How do I change the link color in WordPress – but not for my entire theme! I just want WordPress to change the link color of the current page… This is the question that I’ve asked myself some time ago, as I wanted to change the hyperlink color of active links on one specific page to a color that is different from the usual link color of my WordPress theme. So here’s the answer! In this tutorial, I’ll be showing you, step-by-step, how to change the active link color and the link hover color in WordPress of the current page with Elementor!
What should links on your WordPress site look like?
As a baseline, consistency is key! After spending some time on your website, visitors will associate a particular color as your ‘link color‘. Therefore, being consistent in your link color will not only help you create a harmonious website but also improve user-friendliness.
Blue is still the strongest signal color for links, but other colors work as well. Of course, your link color should match the overall design of your website. But what’s most important, however, is that people can immediately tell what is a link and what is not. This improves user experience and prevents people from overlooking vital links on your site!
Related: → Best Hyperlink Colors For Your Artist Website – With Hyperlink Style Guide
But life is colorful and there might be instances where you want to stray from link color consistency… For example, you might want to use a different link color for your About or Contact page, or for one of the landing pages you created.
Also, if you are an artist – which is very likely as you’re here on this blog – you might want to write about one of your artworks and use the same color as your artwork for links on that particular page. After all, a little splash of color doesn’t harm and your readers will get used to the new link color on the current page quickly!
Related: → Elementor For Photographers And Artists – QUICK & EASY Page Builder
If you use Elementor to build your WordPress site, then changing the link color of the current page is super-easy!
In this tutorial, I’ll be showing you, step-by-step, how you can change the color of your links for one specific page, and also how to create a page with many different link colors on it.
If you take a look at the little text passage below, you’ll see that all colored sentences are links that you can actually click through… just have a try!
Lorem ipsum dolor sit amet, consectetur elit. This link goes to the homepage. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo adipiscing.
This link goes to the Freebie Library. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut elit tellus. This link goes to the Web Store. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
How do I change a hyperlink color on the current page only?
Elementor makes it very easy to change the hyperlink color for your entire WordPress theme and for current page links only. Just a few clicks and you are there! No programming skills required, and there’s no need to add any CSS code to the current link either. So let’s see how to do it!
To change the link color of the current page in WordPress with Elementor, these are the four steps you'll need to follow:
How to change link color of current page with Elementor
STEP 1: Open Elementor & drag the Text Editor Widget on the canvas
The first thing you need to do is either create a new page, post, portfolio item, etc. where you wish to change the link color of the current page, or open an existing page that you’ve created before on your WordPress site.
Whatever the case may be, just click on the Edit with Elementor button to access Elementor’s editing options via the sidebar on the left-hand side of your computer screen.
Related: → Is Elementor Easy To Use? – Elementor Tutorial For Beginners
If you haven’t created any text passage yet, simply grab Elementor’s basic Text Editor widget and drag & drop it onto the canvas. Type in the text you want to display on your current page, including all hyperlinks whose color you want to change later on!
STEP 2: Open the Section Editor & go to Typography settings
In order to change the link color of the current page only, you’ll need to access Elementor’s Section Editor.
You open the Section Editor by clicking on the six little dots at the top of the active section area.
Don’t click on the widget editing icon in the upper right corner. This will only bring you to the Text Editor menu, but not to the Section Editor!
Once you’ve clicked on the six dots of the section area, you’ll see Elementor’s ‘Edit Section‘ menu appear in the sidebar.
By default, the Layout tab will be active.
However, to change the link color of the current page in WordPress, you’ll need to move over to the Style tab!
After clicking on the Style tab, you’ll see a number of sub-items in the menu, also depending on what plugins you have installed.
I’m using Ultimate Addons for Elementor to build my WordPress site. That’s why you see a sub-category for UAE – Particle Backgrounds on the screenshot.
However, to actually change the link color of the current page in WordPress, the Typography dropdown is what we need.
STEP 3: Change the active link color in WordPress
How to change the active link color in WordPress on the current page only?
In the Typography dropdown right below Heading Color and Text Color, you’ll find the option Link Color.
The Link Color option will allow you to change the active link color on your current WordPress page.
Just click on the little box right to ‘Link Color‘ to bring up Elementor’s color picker dialog box.
In the color picker dialog box, you can either choose one of your preset colors or use Elementor’s color wheel to select a color for active links on the current page.
Once you’re happy with your choice, just click away the color dialog box and the active links in the respective section of the current page will have been assigned the new color!
STEP 4: Change the link hover color in WordPress
How to change the link hover color in WordPress on the current page only?
Changing the link hover color in WordPress of the current page works exactly the same way.
Instead of using Link Color, this time click on the little box right to ‘Link Hover Color‘.
This will bring you again to Elementor’s color picker dialog box where you can choose a link hover color for your current WordPress page.
Once you’ve selected a color, don’t forget to click on the Update button at the bottom of the Elementor sidebar to save your changes!
And there you go! This was already everything that’s necessary to change the link color of the current page in WordPress with Elementor.
Note that all text widgets that you drop into the same section will have the link color that you configured for that particular section.
If you set different link colors for different sections, you can have many different active link colors and link hover colors on the current page.
This is how I actually created the little snippet below that I’ve already shown you at the beginning of this tutorial. I’ve created three different sections, all with different link colors for active and hover. After that, I have reduced top and bottom margins of the sections (and added borders) to make everything look like one paragraph of text!
Lorem ipsum dolor sit amet, consectetur elit. This link goes to the homepage. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo adipiscing.
This link goes to the Freebie Library. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut elit tellus. This link goes to the Web Store. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Get access to more than 100+ widgets for limitless design possibilities that speed up your workflow!
More about WordPress for your Artist Website:
Hello my family member! I want to say that this article is amazing, nice written and come with almost all important infos. I would like to peer extra posts like this .
Great to hear that the article was helpful. Thanks for passing by and leaving some feedback! ♥︎