How to Change Link Color in Elementor Page Builder

Last Updated on

Install ssl cert on easywp
Share on facebook
Share on twitter
Share on pinterest

Share

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Are you struggling and wondering how you can change the color of the links in Elementor so you can override theme default link color? Well, this quick tutorial shows you how do exactly that.

Watch Video Tutorial

Play Video

Click Play icon to watch quick video tutorial where I walk you though step-by-step on how to change link color in Elementor.

Read textual tutorial with screenshot to see more tips that I share.

Changing link color shouldn’t be complicated, follow these simple steps to learn how.

Step 1. Select Section or Column

click on section or column

Begin by opening the page containing your links in Elementor page builder.

Then, click on the Section or Column containing the text links you want to change the color. See the screenshot above to understand what I mean.

Step 2. Select "Typography"

click on style then typography

From the left Panel..

  1. Click on “Style” to open styling options
  2. Then click on “Typography” to see more options

You should now see “Link Color” and “Link Hover Color” options

choose link color or link hover color from color pallate

You can now click on the color picker to choose your preferred color or paste in your color code.

  1. Under “Link Color” choose the color for your links.
  2. Under “Link Hover Color” choose the color that you want to display when cursor is hovered on the links.

That is it, you have successfully set color for your links on an Elementor Page.

This also allows you to override default theme link color.

Question is; what if you want to change link color for entire website?

Well, see next section on how to do that.

Unfortunately, this options isn’t available in Elementor, yet.

To achieve this, you will have to rely on theme customizer to set global link color.

In the next steps I’m going to show you how to do this with Astra theme, this should be similar with other themes as well.

Step 1: Open theme customizer

hover on Appearance then click on Customize

To get to theme customizer do the following…

  1. Hover on “Appearance
  2. Then click on “Customizer

Step 2: Open Colors and Background

expand colors and background - astra theme

Expand color options by clicking on “Colors & Background”.

This will lead you to the next step.

Step 3: Open Base Color

open Base colors - Astra

Open “Base Colors” to view color options

select link color - Astra

You should now see default global colors.

Click on “Link Color” color picker to select or set the color you’d like to be global link color across your website.

You have now set your global link color which you can still override with Elementor following the steps shown in the first part of this tutorial.

Over to you

That is it!

Let me know which method you find convenient in the comment section below. Also, don’t be shy to give me your thoughts if you found this tutorial helpful. 

Related Posts

Get Free WordPress Checklist

Going to launch? Here’s a full WordPress checklist for a successful launch!

Share this post with your friends

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Daniel Emunot

Daniel Emunot

Over 5 years ago, I had no idea on how to use WordPress. Now I professionally build websites for my clients using WordPress. Over the past years I have gained experience and therefore, I spend my spare time writing articles that help beginners skip the Jibber Jabber and quickly start launching websites in the shortest time possible.

16 thoughts on “How to Change Link Color in Elementor Page Builder”

  1. This is greate content i have been struggling with links for a while, thank you very much, please keep posting more tricks.

  2. This is very helpful. I have the Hello Elementor theme installed and the Appearance> Customize did not have the option to change the colors. So, unfortunately, I have to manually go to each page to customize the link colors.

    1. Hi Shirley,

      Thanks for your great and encouraging feedback!
      You’re right, Hello theme doesn’t have Customizer, however, you can use the Additional CSS to set this.

      This is what you would add inside Additional CSS for all links (replace #000 with your own color code):

      a{
       color: #000;
      }
      

      The this for link color on hover (replace #eeewith your own color code):

      a:hover{
       color: #eee;
      }
      
  3. This is everything I needed to know. I imagine that elementor will solve this between the app and the Hello elementor theme but for now this is what we needed.

    Thanks Daniel, you da man!

  4. Awesome article, thanks Daniel! I’m just using a starter theme so I can fully customise and white label it, so unfortunately using the a tag requires the !important for it to work, and then it overrides my menu link settings. Do you have any ideas on how to isolate just the content a tags? 🙂

    1. Thanks for sharing your feedback, Kobi!

      Well, I am not sure why you have to use

      !important

      for your case. It’s possibly because there’s already an “a” tag CSS you’re overwriting.

      To escape your navigation links you will have to find your main content class or id. I haven’t used starter theme yet but most themes have .site-content as their main content div wrapper class. So, in that case, you’d change your CSS selector to something like this:

      .site-content a{ color: blue }

      for e.g.

      I hope that helps, otherwise, I am happy to have a look at your website so I can help on finding the right selector to wrap your CSS around.

  5. Thanks, I was trying to find this in Elementor’s help and it was very unhelpful 🙁
    Followed your video tutorial and was done in a few minutes 🙂

Leave a Comment

Your email address will not be published. Required fields are marked *