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
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.
How to Change Link Color in Elementor
Step 1. Select 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"
From the left Panel..
- Click on “Style” to open styling options
- Then click on “Typography” to see more options
You should now see “Link Color” and “Link Hover Color” options
Step 4. Choose your preferred link color
You can now click on the color picker to choose your preferred color or paste in your color code.
- Under “Link Color” choose the color for your links.
- 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.
How to Change Link Color Globally
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
To get to theme customizer do the following…
- Hover on “Appearance“
- Then click on “Customizer“
Step 2: Open Colors and Background
Expand color options by clicking on “Colors & Background”.
This will lead you to the next step.
Step 3: Open Base Color
Open “Base Colors” to view color options
Step 4: Set your global link color
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.