Elementor change underline color lets you easily customize link underlines to match your design and improve visibility. Elementor has become one of the most popular page builders for WordPress due to its user-friendly interface and advanced design capabilities. Whether you’re building a website from scratch or tweaking your existing design, having the flexibility to style links is crucial for enhancing the overall aesthetic and user experience.
In this guide, we’ll walk you through how to change the underline color in Elementor, a simple yet impactful change you can make to your website. We’ll cover different methods, including using the Elementor editor’s built-in features, CSS customization, and how to apply these changes to individual or multiple links.
Why Change the Underline Color in Elementor?
Before diving into the tutorial, it’s important to understand why changing the underline color can make a difference. Links are a key element of any website, guiding users to various sections, pages, or external websites. Adjusting the underline color can help:
- Enhance visual appeal – A different underline color can make your links stand out more.
- Improve readability – Sometimes, default underlines are hard to see, especially on light-colored backgrounds.
- Match branding – You can align the underline color with your website’s color palette or branding.
Now that we’ve covered why it’s beneficial to change the underline color, let’s move on to how to do it.
Method 1: Change Underline Color Using Elementor’s Style Panel
Elementor provides a simple way to change the color of link underlines directly within its interface, making it ideal for beginners.
Steps:
- Open Elementor Editor:
Log in to your WordPress dashboard, and navigate to the page or post you want to edit using Elementor. Click on “Edit with Elementor.” - Select the Text or Link Element:
Find the text widget or the link element you want to customize. This could be any clickable text such as a button, heading, or paragraph. - Open the Style Tab:
In the Elementor panel on the left, click on the Style tab. This will bring up various customization options, including typography, colors, and borders. - Customize the Underline Color:
Scroll down to the Typography section. You should see options for adjusting the font size, style, weight, and more. Look for the Text Decoration option. If it’s not visible, click on Advanced and then find the Custom CSS section. - Add Custom CSS (if necessary):
If the built-in options don’t give you a direct way to change the underline color, you can use custom CSS. In the Custom CSS area, add the following code:{ text-decoration: underline; text-decoration-color: #FF5733; /* Replace with your desired color */ }This CSS code will add an underline to all links and change its color to the hex code you specify (in this case, a reddish-orange color#FF5733). - Update the Page:
Once you’re satisfied with the changes, click Update to save your settings.
Method 2: Using Global Settings for Uniform Styling
If you want to change the underline color site-wide for all links, Elementor’s global settings can be helpful. This method is great for maintaining consistency across your website.
Steps:
- Go to Elementor Settings:
In the WordPress dashboard, go to Elementor > Settings. - Navigate to the Style Tab:
Under the Global Settings tab, you’ll find the Typography section. Here you can adjust various typography elements that apply globally to all widgets, including links. - Customize Link Underline Color:
In the Global Colors section, you can define colors for different text elements, including links. You can set the default color for links and hover states, and customize their underlines using the Custom CSS area. - Save the Changes:
Once you’ve set the desired colors, save the global settings to apply them to your entire website.
Method 3: Changing Underline Color via Custom CSS in Theme Customizer
If you need more advanced customization or wish to make changes that affect the entire theme (beyond Elementor), you can add custom CSS via WordPress’ Theme Customizer.
Steps:
- Go to WordPress Customizer:
In your WordPress dashboard, navigate to Appearance > Customize. - Add Custom CSS:
In the Customizer, go to Additional CSS. Here, you can add the following CSS code to target all links and their underline colors:{ text-decoration: underline; text-decoration-color: #3498db; /* Blue color for underlines */ } a:hover { text-decoration-color: #2ecc71; /* Change underline color on hover */ } - Publish the Changes:
Once you’re satisfied with the changes, click Publish to apply the custom CSS.
Method 4: Changing the Underline Color in Link Hover State
For added interactivity, you may want to change the underline color when a user hovers over a link. This can be done easily with Elementor’s hover state settings or through custom CSS.
Steps:
- Select the Link Element:
Edit the page in Elementor and select the text or button that contains the link you wish to modify. - Go to Hover Settings:
Under the Style tab, you’ll see a Hover option. Click on it to customize how the link behaves when the user hovers over it. - Change Underline Color on Hover:
If the underline isn’t already visible on hover, you can enable it by adding the following custom CSS:cssCopy codea:hover { text-decoration: underline; text-decoration-color: #9b59b6; /* Purple color for hover effect */ } - Save and Update:
Save your changes and update the page.
Conclusion
Changing the underline color in Elementor is a straightforward task that can make a significant impact on your website’s design. Whether you choose to use Elementor’s built-in tools, custom CSS, or global settings, the flexibility to customize link styles ensures that your website looks professional and aligned with your branding.
By following the steps outlined in this guide, you can easily modify the underline color of links in Elementor, improve visual clarity, and enhance user interaction on your site. So, go ahead and give your links a stylish makeover today!
