Changing the Link colours in Elementor : With or without CSS code 2025 Guide

Changing link colors in Elementor can give your website a fresh, branded look. Whether you prefer to use Elementor’s built-in settings or custom CSS, this guide will walk you through the easiest methods to customize your link colors for buttons, text, and menus.

Sometimes, you may see that some sites use a different color on their link instead of the default color. And now, how can you change the link color in Elementor? Don’t worry; in today’s quick guide, we will discuss how you can do this easily.

So, you want to change the link color in WordPress for a specific post, block, or whole site. You don’t need to roam around for the information. Just stick with us till the end as we discuss the different aspects of your concern.

So, without further ado, let’s get into it.

Why Change Link Colors in Elementor?

Changing link colors in Elementor is important for several detailed reasons:

1. Enhances Brand Consistency
   Using your brand’s specific color palette for links ensures your website looks professional and cohesive. Consistent link colors reinforce brand identity across all pages.
2. Improves User Experience and Readability
   Distinctive link colors help users easily identify clickable text, improving navigation and reducing confusion. Clear visual cues guide users efficiently through your content.
3. Increases Engagement and Click-Through Rates
   Visually appealing and contrasting link colors attract attention, encouraging visitors to click links and explore more pages or products, which benefits SEO and conversions.
4. Supports Accessibility Standards
   Choosing link colors with proper contrast from surrounding text ensures that users with visual impairments can distinguish links, making your site inclusive and compliant with accessibility guidelines.
5. Allows Customization for Context and Style
   Elementor lets you set different link colors globally or for specific sections, enabling targeted emphasis on calls to action or promotional content while maintaining overall site harmony.
6. Facilitates Hover Effects for Interactive Feedback
   Changing link colors on hover states signals interactivity to users, enhancing the interface responsiveness and creating a polished browsing experience.
7. Helps Resolve Style Conflicts
   Customizing link colors helps override default theme or plugin styles that may not align with your design, giving you full control over your site’s look.

Overall, changing link colors in Elementor is essential to create visually effective, accessible, and engaging websites that align perfectly with your brand and audience needs.

Customize Links in Elementor Free Version

Even without Elementor Pro, you can customize links on your website using the free version of Elementor by these methods:

• Basic Link Settings in Widgets:
  Most Elementor widgets with text or buttons allow you to set a link URL in the widget’s content panel. You can add or edit the link directly here.
• Text Editor Widget:
  Inside the Text Editor widget, you can format text as links using the standard WordPress editor toolbar. This lets you create clickable links with basic styling.
• Changing Link Color without CSS:
  The free version of Elementor does not offer direct global link color customization in Site Settings. However, individual text widgets can have their link color changed by selecting the text and applying inline color changes inside the text editor.
• Using WordPress Customizer:
  You can also change default link colors for your entire website by going to Appearance > Customize > Colors or Additional CSS in your WordPress dashboard, which will apply site-wide, including Elementor-designed pages.
• Add Custom Link Attributes:
  Elementor free edition allows you to add custom HTML attributes to links within widgets by clicking the gear icon next to the link field. This can be useful for SEO or accessibility (e.g., adding rel="nofollow"  title attributes).
• Custom CSS for Advanced Styling:
  Although Elementor Free doesn’t include a custom CSS panel, you can add custom CSS via your theme customizer or child-theme stylesheet to target Elementor elements by their classes or IDs, allowing full control over link styling.
• Third-Party Addons:
  You can install free addons like “Unlimited Elements” or “Premium Addons for Elementor” to gain extra styling options for links without using custom code.

In short, while the free version offers basic link insertion and limited styling inside widgets, combining WordPress customizer settings and external CSS or addons is the key to more advanced link customization without upgrading to Elementor Pro.

How to Change the Link Color in Elementor? 

Nowadays, you don’t need to stick with your site’s default pink link color; you can customize the link color and show your identity to the respective users. Moreover, colors represent emotions, and a wise content marketer knows how to play with emotion. For example, red is a symbol of urgency, whereas green is a symbol of calmness.

So, just like these, you must think logically and prepare a marketing strategy to build your brand. So, let’s find out together how you can change the link color in Elementor.

Step 1: Log in to the WordPress dashboard:

First, log in to your WordPress dashboard to see the settings option. You can log in to your dashboard by typing “/wp-admin” next to your domain and then log in to it using your credentials.

Step 2: Access a page or site:

Once logged in, navigate to the pages or posts you want to edit the link color. Here, you will see the option to edit with Elementor right before the edit post option, where you can navigate through it and change the link color in WordPress.

Step 3: Locate the hamburger menu:

Now, you have access to Elementor settings and can start the process.

Just click on the hamburger(which looks like Three Lines Normally used to represent Options) menu in the screen’s top left corner. Just click on it and access the site settings option, where you can change the default color to a specific color of your choice. All you need to do is access the site settings, then theme style, and go to typography (site settings > theme style > typography). 

Step 4: Choose the color type:

Once you get access using typography, now here in step number 4, you can choose the color type of the link as you have two options: standard and hover.

Choose normal if you want to change the color entirely, and choose hover if you’re going to change the color only when the cursor hovers over it.

So, it’s totally up to you which one seems right. You have no restrictions on it. You can try out any of the types you want.

Step 5: Choose the color palette:

Undoubtedly, the ultimate purpose of the process is to get rid of the default pink color and use your desired one. Now, it’s time to do that. Here, you can choose any colors you want to add from the color palette.

Step 6: Save changes:

Once you are done with all these steps and have chosen the color, remember to save and update the changes. That’s it, all the colors should be changed and will be changed to a new one.

How to Change Link Color with CSS Code:

You can also change the link color in Elementor with the help of a CSS code. 

And for this, you must log in to your WordPress dashboard and then go to Customize, navigating through the Appearance. Here, you will get an option for “Additional CSS”.

On the left side of the page, a screen will appear where you will add your custom code. Under the CSS section, you can add the code you want. 

Option 1: To change the color of the link your user will see, use the following code.

a {

color: orange;

}

This will change the link color to orange, or you can use the color code #FFA500 to change it to orange. Make sure to change the code #FFA500 or the color name if you want to use any other color.

Option 2: If you want to change the link hover color, you can use the following code as an example. 

a: hover {

Color: red;

text-decoration: underline;

}

This will change the link color to red, and whenever a reader places the cursor on it due to this code, the code will be changed to red, and the text will be underlined. Moreover, you can also use the color code #FF0000 to change it to red. Don’t forget to change the color name or code if you are willing to use another color. 

How to Use Custom CSS to Edit Link Colors in Elementor

1. Open the Elementor Editor
   Edit the page or template where you want to customize the link color using Elementor.
2. Select the Element Containing Links
   Click on the widget (e.g., Text Editor, Button) that has the links you want to style.
3. Go to the Advanced Tab
   In the Elementor panel on the left, open the Advanced tab.
4. Open the Custom CSS Section
   Scroll down to find the Custom CSS panel (note: only available in Elementor Pro).
5. Write Your CSS Code
   Enter CSS code to target links inside the selected widget. For example: CSSselector a { color: #1e90ff; /* Normal link color */ text-decoration: none; } selector a:hover { color: #ff4500; /* Hover color */ text-decoration: underline; } Here, selector refers to the current widget, so the CSS only applies to links within it.
6. Apply CSS Classes for More Control
   To target specific links, add a CSS class in the widget content like:xml<a class="custom-link" href="#">My Link</a> Then, in the Custom CSS panel or your site-wide CSS, write:css.custom-link { color: green; } .custom-link:hover { color: red; }
7. Save and Preview
   Save your changes and preview the page to ensure your links appear as styled.

Additional Notes

• Custom CSS lets you override global link styles set in Elementor Site Settings or your theme.
• For global link color changes without code, use Site Settings > Typography > Links in Elementor.
• If you don’t have Elementor Pro, add custom CSS via your WordPress theme customizer or a child theme stylesheet to affect Elementor links.

Using custom CSS in Elementor provides precise control over link colors, including hover effects, enabling you to style links exactly as you want for better branding and UX.

Elementor CSS for link styling

• Targeting Links with CSS:
  Use CSS selectors like a, .class a, or #id a to style links inside specific containers or widgets in Elementor.
• Basic Link Color Styling:
  Change link colors with the color property, e.g., a { color: #1e90ff; } for the normal state.
• Styling Link States:
  Use pseudo-classes for different states:
  • :link for unvisited links
  • :visited for visited links
  • :hover for mouse-over effects
  • :active for active/click state
• Example of State-Based Styling: CSSa:link { color: blue; } a:visited { color: purple; } a:hover { color: orange; } a:active { color: red; }
• Text Decoration Control:
  Use text-decoration to add/remove underlines:
  a { text-decoration: none; } removes underlines from links.
• Adding Hover Effects:
  Enhance interactivity with hover effects using color change, underline, background color, or border styles.
• Elementor Custom CSS Usage:
  In Elementor Pro, add CSS under the widget’s Advanced > Custom CSS, using selector a {} to target that widget’s links.
• Using CSS Classes for Specific Links:
  Assign CSS classes to elements or links to apply custom styles without affecting other parts of the site.
• Global Link Styling:
  Use Elementor Site Settings to set global link colors or write site-wide CSS in your theme customizer for full control.
• Compatibility and Overrides:
  Custom CSS can override default theme styles and Elementor’s default link settings for precise design control.
• Targeting Links with CSS:
  Use CSS selectors like a, .class a, or #id a to style links inside specific containers or widgets in Elementor.
• Basic Link Color Styling:
  Change link colors with the color property, e.g., a { color: #1e90ff; } for the normal state.
• Styling Link States:
  Use pseudo-classes for different states:
  • :link for unvisited links
  • :visited for visited links
  • :hover for mouse-over effects
  • :active for active/click state
• Example of State-Based Styling: CSSa:link { color: blue; } a:visited { color: purple; } a:hover { color: orange; } a:active { color: red; }
• Text Decoration Control:
  Use text-decoration to add/remove underlines:
  a { text-decoration: none; } removes underlines from links.
• Adding Hover Effects:
  Enhance interactivity with hover effects using color change, underline, background color, or border styles.
• Elementor Custom CSS Usage:
  In Elementor Pro, add CSS under the widget’s Advanced > Custom CSS, using selector a {} to target that widget’s links.
• Using CSS Classes for Specific Links:
  Assign CSS classes to elements or links to apply custom styles without affecting other parts of the site.
• Global Link Styling:
  Use Elementor Site Settings to set global link colors or write site-wide CSS in your theme customizer for full control.
• Compatibility and Overrides:
  Custom CSS can override default theme styles and Elementor’s default link settings for precise design control.

These points summarize key ways to style links with CSS in Elementor for a personalized, branded, and interactive website experience.

How to style links without CSS in Elementor

• Use Elementor Global Site Settings:
  Change link colors site-wide by going to Site Settings > Typography > Links and selecting link and hover colors.
• Customize Link Colors in Individual Widgets:
  In the Style tab of text or button widgets, adjust Text Color and Hover Color for links directly without code.
• Use Text Editor Toolbar:
  Highlight text, click the link icon, and use the color picker inside the editor to change link color inline.
• Adjust Link Hover Effects Visually:
  Set hover colors and underline styles in Elementor’s Style tab for interactive feedback.
• Apply Different Colors to Specific Sections:
  Customize link colors uniquely within particular widgets or sections for emphasis.
• Leverage Elementor Theme Builder:
  Modify link colors in templates (header, footer, archive) using widget styling options.
• Change Colors via WordPress Customizer:
  Site-wide link colors can also be altered under Appearance > Customize > Colors if supported by your theme.

These methods allow effective, no-code link color customization straight from Elementor’s user-friendly interface, ideal for beginners and non-coders.

How to change the color of a link in HTML without CSS?

• Use the style Attribute Inline:
  Add a style attribute directly to the <a> tag with a color property for the desired color.
  Example: <a href="url" style="color: red;">Link Text</a>
• Use the Deprecated <font> Tag (Not Recommended):
  Wrap the link text inside a <font> tag with a color attribute.
  Example: <a href="url"><font color="red">Link Text</font></a>
  This is outdated and not recommended for modern HTML.
• Set Link Colors Using the <body> Tag Attributes (Limited):
  The link, vlink, and alink attributes in the <body> tag can define colors for unvisited, visited, and active links, respectively.
  Example: <body link="blue" vlink="purple" alink="red">
• Note:
  These methods only change link colors but lack control over hover effects or detailed styling, which usually requires CSS. Inline styles override default browser styles but are not reusable. Modern best practice recommends using CSS for flexibility.

This approach works well for quick, basic link color changes without a stylesheet or external CSS.

Elementor Free Link Styling Options

• Allows basic link insertion in text, buttons, and widgets.
• Link color and hover color can be changed on a per-widget basis in the Style tab (e.g., Text Editor, Button).
• Does not support global site-wide link color changes directly within Elementor.
• Limited control over link states, often relying on theme or default browser styles.
• No access to Custom CSS within the Elementor interface.
• Can use WordPress Customizer or external CSS for broader styling control.

Elementor Pro Link Styling Options

• Includes all free version capabilities plus advanced customization tools.
• Enables global link color settings via Site Settings > Typography > Links for consistent styling across the website.
• Provides a Custom CSS panel on any widget or section to add precise link styling and override default styles.
• Supports hover, visited, active, and focus states customization for links with separate colors and effects.
• Ability to create and reuse Global Widgets with consistent link styles.
• Access to 90+ advanced widgets and design features for richer interactive elements with styled links.
• Offers theme builder capabilities to style links in headers, footers, archives, and dynamic content.

Comparison Table Free VS Pro

In short, Elementor Free covers basic link styling needs fine for simple sites, while Elementor Pro unlocks powerful global controls, custom CSS, and theme-wide styling for professional and scalable design projects.

Elementor typography and link settings

• Global Typography Settings:
  Accessed via Site Settings > Typography in Elementor to set consistent font styles across the site.
• Define Fonts for Headings and Body:
  Customize fonts for Headings (H1 to H6), Body Text, Buttons, and Special Elements globally.
• Font Family Selection:
  Choose from a wide range of Google Fonts, system fonts, or custom uploaded fonts.
• Control Font Size and Weight:
  Adjust font size with sliders or input (including responsive settings for desktop, tablet, and mobile), and set font weight for boldness.
• Text Transform and Style:
  Options include uppercase, lowercase, capitalize, italic, underline, and line height for readability.
• Link Color Settings:
  Under Site Settings > Typography > Links, set default and hover colors for all links on the site for consistency.
• Widget-Level Typography:
  Override global typography per widget in the Style tab, allowing custom font and link styles for specific sections.
• Responsive Typography Controls:
  Adjust font size, line height, and letter spacing specifically for desktop, tablet, and mobile views to ensure readability.
• Use of Fluid Typography:
  Elementor supports advanced font sizing with CSS clamp() for smooth scaling across screen sizes.
• Integration with Theme Styles:
  Typography and link settings can be harmonized with your WordPress theme or overridden for a unique design.

These features together give full control over font and link appearance for an optimized, visually appealing website using Elementor.

How to Change the Link Color for Only One Block of Text?

Do you want to change the color of one specific block of your text in the post? Well, this is possible, and you can achieve it too quickly, but it is impossible in Elementor.

But don’t worry; the solution lies in using the classic editor, where you can achieve this under the text editor option.

In the future, whenever you want to change the Elementor global link color, you need to use the text editor option under the classic editor.

Elementor change hyperlink color step by step

• Open your page with Elementor and select the widget containing the link.
• Go to the Style tab and locate the Text Color option to pick your desired link color.
• To customize hover color, switch to the Hover state in the Style tab and select a different color.
• For global link color changes, go to Elementor’s Site Settings > Typography > Link Colors.
• Save changes and preview to ensure your new link colors display correctly on the site.

Changing hover link color in Elementor editor

• Open the page in Elementor Editor and select the widget containing the link.
• Go to the Style tab and click the Typography section.
• Switch the state from Normal to Hover using the toggle at the top.
• Choose your desired hover color from the color picker.
• Click Update to save and preview the hover effect on your links.

These simple steps allow changing link hover colors visually in Elementor without code.

Best practices for link colors in Elementor site design

• Use Elementor global styles to set consistent link and hover colors across your entire site for brand coherence.
• Choose link colors with sufficient contrast against the background for readability and accessibility compliance.
• Differentiate link colors from regular text so users easily recognize clickable elements.
• Apply subtle but noticeable hover effects (color changes, underlines) to improve user interaction feedback.
• Customize link colors per section or widget only when necessary to highlight promotions or calls to action without overwhelming design.

Following these ensures professional, user-friendly link styling in Elementor websites.

Best link colors for dark-mode Elementor designs

• Use bright, saturated colors like cyan, electric blue, lime green, or bright orange for links to ensure high contrast against dark backgrounds.
• Avoid pure white links as they can cause glare; instead, opt for off-white or light gray link colors for a softer look.
• Choose subtle but visible hover colors that are lighter or complementary to the base link color to provide clear interaction feedback.
• Ensure color contrast meets accessibility standards (WCAG) for readability, typically a contrast ratio of at least 4.5:1 with the dark background.
• Apply either subtle glows or underlines on hover for links in dark mode to enhance visibility without overpowering the overall dark theme.

These practices improve usability, user comfort, and aesthetic appeal for dark-themed Elementor websites.

Conclusion:

In conclusion, mastering how to change and style link colors in Elementor, both with and without CSS, empowers you to create visually cohesive and engaging websites that perfectly align with your brand identity and user experience goals. Whether you leverage Elementor’s global typography and link settings for seamless, site-wide consistency or dive into custom CSS for precise control over individual links’ colors, hover effects, and states, these customization options cater to all levels of expertise. Using Elementor Pro unlocks advanced styling capabilities, including global link color control, custom CSS integration, and detailed hover/active link effects that elevate your site’s professionalism and user interaction.

Additionally, customizing link styles in Elementor without coding remains accessible via intuitive widget-level styling and the WordPress Customizer for broader theme-based adjustments. This flexibility ensures your links not only stand out but also comply with accessibility standards for improved readability and navigation ease across devices.

Embracing these Elementor link styling techniques using semantic keywords like “Elementor link color customization,” “Elementor global link styling,” “custom CSS for Elementor links,” and “responsive Elementor link colors” will boost your content relevance and SEO potential, helping your website rank higher in Google search results. Ultimately, comprehensive link styling is essential for enhancing call-to-action visibility, brand consistency, and a polished online presence in 2025 and beyond.

Changing the link color could be an effective way to add additional branding features to your site, and you can do this without any hassle. This will create a unique look that will help the users understand and remember your site.

Hopefully, you got the answer through this quick guide. Remember to subscribe to our newsletter if this guide has created value for you. For any query, you can reach us anytime; we would love to be there.

Till Next!

FAQs

• Author
• Recent Posts

Social Media

TIPsoont

A Complete Blog full of Motivation and Learning about Website DesigningMarketing.

Do Subscribe the Newsletter and Push Notification Because we'll share premium knowledge about web here for free.

Social Media

Latest posts by TIPsoont (see all)

• Squarespace Template Change Guide for Versions 7.0 and 7.1 in 2025 - September 17, 2025
• Best WordPress Books, Custom CSS Tips & Elementor Free Guide (2025) - September 17, 2025
• How Long Learn WordPress? (Complete Guide 2025) - September 15, 2025