• Home
  • /
  • Blog
  • /
  • An Advanced Guide to Changing Links & Menus Colors in Elementor

An Advanced Guide to Changing Links & Menus Colors in Elementor

Posted in Elementor Gudies   on  March 7, 2023 by Shoaib

Do you want to change all your global or default link colors with your website branding color with Elementor? Then you are at the right place.

In this article, we will learn An Advanced Guide to Changing Links & Menus Colors in Elementor.

We will cover unique tips and tricks about the Elemenotr text link, which I bet are unavailable on the internet.

You will learn about the following:

How to change the link color Elementor?

Unfortunately, Elementor does not have the option to change the link color in the live text editor tab. But on the other hand, with Thrive Architect page builder, you can change it within the front-end editing.

With Elementor, we need to set the global color to change the link default and hover color. 

How to change Elementor default or global link text color?

Global Colors for Elementor is a new dynamic color system that allows you to create and control colors across your entire website. All elements using that color are updated when you change a global color.

Every WordPress theme and page builder has their own global color palette. We first need to change it with the website branding color you have in mind.

Changing the link colour in Hello Elementor WordPress Theme

I am using the hello free WordPress theme developed by Elementor. By default, the theme has a pink color for all hyperlinks.

Hello Elementor theme default link color in wordpress

Now let's see how we can fix this problem. Here are a few steps to change the colour of your hyperlinks using the Elementor Global theme setting.

Step 1: While editing a page or post in the Elementor page builder, click on the hamburger menu at the top left corner.

click on the hamburger menu in Elementor setting

Step 2: Click on Site Setting and then go to the Typography tab.

Elementor Typography tab to make changes to links

Step 3: Under the Link tab, you can change hyperlinks normal and hover color in Elementor.

Changing normal and hover link color in elementor

How to change the heading link color?

In the Elementor page builder, we can add headings using two different ways:

  1. In the Text Editor Element
  2. Or we can use Heading Element  

In both ways, we need different techniques to deal with heading colors.

While using headings in the Text editor, Elementor inherits the same color as the other link in the paragraph text.

Elementor text editor and heading element links color

In order to change all heading normal and hover links color, add this CSS code to your WordPress theme.

Note: You need to change color values with the desired one you want to have on your heading links.

h2,h3,h4,h5,h6 a {
color: #0073ff; 
h2,h3,h4,h5,h6 a:hover {
color: #018e11; 

But if you are using the Headings Element and want to change the link color, use this CSS code.

Note: Use the important keyword; otherwise, it does not affect the default color.

.elementor-widget-heading .elementor-heading-title a {
    color: #0073ff!important;
.elementor-widget-heading .elementor-heading-title a:hover {
    color: #018e11 !important;

Elementor change individual link color?

Do you want two hyperlinks with different colors on the same page or a post in the Elementor page builder? If this is the case, let's change each link color.

Step 1: Select the Text Tab in in the text editor Tab.

Step 2: Give each link a differnt class within the text tab.

how to change Elementor change individual link color

Step 3: Then go to the Advanced Tab and add custom CSS with your target classes.

.link-01 {
    color: blue;
.link-01:hover {
    color: red;
.link-02 {
    color: red;
.link-02:hover {
    color: blue;

How to change link color using CSS in Elementor?

If you are confident you need the exact link color throughout your website, use this code in your theme style.css file.

Go to Appearance >- Theme File Editor and add the following CSS code.

   a {
        color: dodgerblue;
        color: black;

If you are using the Elementor page builder, use the Elementor Global link Setting.

Some Useful Articles

About Shoaib Akram


I've been in the business of writing, marketing, and web development for a while now. I have experience in SEO and content generation. If you need someone who can bring life to your words and web pages, I'm your guy.

Leave a Reply

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

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Subscribe to get the latest updates