help center

On this page

Change link color in Elementor

Last Update: September 21, 2023

When changing the colors of links in Elementor you may use the following methods in this documentation. 

Link Color Change link color in Elementor 1

Click the Hamburger menu hamburgericon 1 Change link color in Elementor 3 in the upper left corner of any page or post’s widget panel to access the Site Settings > Theme Style > Typography.

Site Settings Change link color in Elementor 5

Link – Normal | Hover

  • Color: Choose the default color of links for both normal and hover states
  • Typography: Change the default typography of links for both normal and hover states

See Also: Theme Style – Global Settings

CSS Classes

If you need to override the Site Settings, you may create additional CSS link classes in the Site Settings > Custom CSS region. Add these classes to your text editor or widget links.

CSS Class Snippet

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

Usage Example

<a class=”mygreenlink” href=”#”>My Green CSS Class Link</a>

Inline HTML Style

You may additionally use the style property directly in your link HTML .

Usage Example

<a style=”color:purple;” href=”#”>My Purple Inline CSS Link</a>

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article