Elementor: How to Change Link Color

There are a few good reasons to change your link color in Elementor. The most common is branding: your links should complement your site’s color palette rather than defaulting to a generic blue that clashes with everything else. If your body text is already dark blue, a default link color can blend right in and go unnoticed.

Accessibility is another important factor. Links need to have enough contrast against surrounding text so that all visitors — including those with color vision differences — can tell them apart at a glance. If your background and link colors are too similar, you may be turning visitors away without realizing it.

Finally, changing your link color can improve click rates. A link that stands out clearly draws more attention than one that gets lost in the text. Whatever the reason, Elementor makes it easy to update link colors across your entire site at once — you don’t need to edit individual links one by one.

Open any page or post in Elementor, then click the hamburger menu icon (the three horizontal lines) in the top-left corner of the editor. This opens the Elementor panel menu.

From here, go to Site Settings → Theme Style → Typography. Scroll down to the Links section. Here you can set the default color for all links on your site, as well as the hover color — the color the link turns when a visitor moves their mouse over it. You can also toggle the underline effect on or off for each state.

These settings apply globally, so every link on your site will update immediately.

Using CSS Classes for Individual Links

If you want to style specific links differently, you can use custom CSS. Go to Site Settings → Custom CSS, or open your theme’s customizer and find the Custom CSS region. Add something like the following to make selected links appear in green:

a.mygreenlink:link, a.mygreenlink:visited, a.mygreenlink:active
{ color:green; text-decoration: none; } a.mygreenlink:hover { color: green; text-decoration: underline; }


<a class="mygreenlink" href="#">My Green CSS Class Link</a>
Inline HTML Style

Replace green with any color value (hex, RGB, or named color) to match your needs.