Links need to look like links and they have to stand out from the rest of the text. That’s why setting link colors for your WordPress site is important. In this tutorial, I’ll be showing you how to change the hyperlink color in Elementor, and also how to change the link hover color – all right here on my OceanWP WordPress theme!
What are hyperlinks?
A hyperlink, also called a web link, URL or simply a link, is an essential building block of web architecture.
The purpose of a website is to provide an easy way to read and navigate through the virtual world, allowing users to quickly reach other web documents. This is where hyperlinks come in.
Links can connect any string of text with a URL, and – at just one click of a mouse – instantaneously lead users to the linked target. This is what actually made the World Wide Web so successful!
Originally, web links used to be blue and underlined. Nowadays, you can see them in many different colors and styles. But can you just use any color for a hyperlink?
What color should you choose for hyperlinks in WordPress?
As a rule of thumb, hyperlinks should be immediately identifiable as such by the reader. And they should appear ‘clickable’.
According to research studies in link readability, web users still consider blue color in combination with underlined text as the typical hyperlink – just like it was at the beginning of the Internet.
That makes blue links still a good choice to stick with. More recent studies, however, found that underlined text can decrease readability and negatively affect user experience.
As Google changed their ranking algorithm over time, longer link text is now a ranking factor for Search Engine Optimization (SEO). Link text should be descriptive and make it immediately obvious to both users and search engines what the linked page is about.
In the end, the choice of color and font style of hyperlinks on your website is totally up to you! These are just some things to pay attention to when choosing a link color that fits both the design of your theme as well as readability/SEO requirements. ☺
Related: → Best Hyperlink Colors For Your Artist Website – With Hyperlink Style Guide
With that said, let’s dive straight into the topic of this blog post on how to change the hyperlink color of your WordPress theme in Elementor!
These are the four steps you need to follow that will show you how to change the hyperlink color in Elementor:
Step-by-Step elementor Tutorial
How to change the Hyperlink color in Elementor
STEP 1: Open Elementor Global Style settings
In order to change the hyperlink color in Elementor, the first thing you need to do is click on the little ‘hamburger’ icon in the top left corner of the Elementor sidebar.
STEP 2: Select Theme Style Settings
A click on the hamburger icon will bring up Elementor’s Global Settings dialog.
Here, you find a lot of settings to change the default styling of your WordPress theme. For example, Elementor allows you to change the global font for headings and body text, the font style (italic, bold, underlined, etc.), or the default color palette used for your website.
You also have several options to customize dashboard and preferences.
However, the one thing we need right now is the Theme Style settings. So simply click on the Theme Style tab under Global Style.
STEP 3: Open Typography dropdown menu
In the Theme Style menu, you’ll see several options to edit the default look of certain elements of your theme.
Click on Typography to open the dropdown.
STEP 4: Set link & link hover color
The Typography dropdown is where the magic actually happens… 😉
The first thing you’ll see in the Typography dropdown is the Body section. Here, you can change text color, font and paragraph spacing of the body text in Elementor.
Right below Body, you’ll find the Link section where you can set link colors and link typography.
To change the link color in Elementor, simply click on the little box next to Color. Then choose a color from the Elementor color palette that will pop up in the dialog box.
Once you’ve selected a color and clicked on the Update button at the very bottom of the Elementor sidebar, the color of all links on your WordPress site will change accordingly.
Now, how to change the link hover color in WordPress?
It’s just as easy to change the text color on hover with Elementor.
All you need to do is click on the Hover tab in the Link section.
Then click again on the little box next to Color and select a shade that gives a nice hover effect to your text links!
That was basically it. You’ve just found out how to change the hyperlink color in Elementor!
Don’t forget to click on Update before you leave the Elementor Global Style settings to admire the new look of your links live on your WordPress site!
This tutorial showed you how to change the link color in OceanWP – the WordPress theme that I’m using for this site!
Get access to more than 100+ widgets for limitless design possibilities that speed up your workflow!
I hope this little tutorial on how to change the hyperlink color in Elementor was able to help you! If you enjoyed, please share the tutorial with other Elementor users and drop a comment. See you soon, Angie 🌟
Thanks for sharing excellent informations. Your site is so cool. I am impressed by the details that you?¦ve on this web site. It reveals how nicely you understand this subject. Bookmarked this website page, will come back for extra articles. You, my friend, ROCK! I found just the info I already searched everywhere and just couldn’t come across. What a perfect website.
Hi Searson, thanks for leaving a comment. Great to hear that you find the content helpful! Looking forward to staying in touch with you (:
I adore meeting useful info, this post has got me even more info!
Great to hear that the post was helpful! (: