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?
- How to change Elementor default or global link text color?
- How to change the heading link color?
- Elementor change individual link color?
- How to change Elementor hover color link?
- How to change link color using CSS in Elementor?
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.
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.
Step 2: Click on Site Setting and then go to the Typography tab.
Step 3: Under the Link tab, you can change hyperlinks normal and hover color in Elementor.
How to change the heading link color?
In the Elementor page builder, we can add headings using two different ways:
- In the Text Editor Element
- 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.
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.
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;
}
a:hover{
color: black;
}
If you are using the Elementor page builder, use the Elementor Global link Setting.
