By default, links on Internet pages are blue, and turn purple when clicked with the mouse. However, there are many ways to make your WordPress site use different colors for these links.
Therefore, if you want to change the colors of links on your WordPress site, whether because you do not like the default colors, or because the colors provided by your site template do not match the colors of your brand, or for any reason, you can do this easily and without the need for programming experience.
In this article, we will talk about changing the colors of links on a WordPress site in several ways. The easiest of these methods is through the template settings, as most templates allow you to do this. We will also learn to do this through one of the page builders plugins, and finally we will learn to change it programmatically through custom CSS codes as well.
Ways to change link colors on a WordPress website
If you own a WordPress site, you can change the colors of links in one of the following ways:
- By setting the template used on your site.
- Through website builder plugins
- By adding custom CSS codes. Read also: How to add custom CSS code to your WordPress site
But before we explain the practical steps for each of the previous methods, let us first learn about the different states in which links occur on a web page. Where the link can be in one of 5 states:
Link Status
- Normal or Link: This state is the default state of a link, which is the state of a link that has not been hovered over or clicked with the mouse.
- Hover : The state of a link that has been hovered over without being clicked.
- Visited : The status of the link that was clicked, visited, and saved in the browser history.
- Focus : The state of a link that has focus (for example, then moved to it using the Tab key on the keyboard)
- Active : The state of the link that was just clicked, and the destination it points to is currently being fetched by the browser.
These states help us format the link in different colors depending on the state it is in, as we will explain shortly.
Let us now go back to explaining the three methods used to change the colors of links on a WordPress site:
1. Change link colors using template settings
Changing the settings related to links, their colors, or their properties through setting up the template is the easiest way, but the method used to do this may differ from one template to another. Also, some templates may not provide this feature to you.
In our example here, the method will be explained on the Kadence Theme template . To do this, you must follow the following steps:
1- From within the WordPress control panel, go to Appearance > Customize
2- A new window will open for you, choose General , then look for the ( Colors) option to change the colors.
3- A new window will open for you, containing many options related to links and colors.
Search in the window for the Content Links section that specializes in changing the formats and colors of site links. Through the Link Color section shown in the following image, you can specify two colors for each link through the two visible color circles:
– The first circle determines the color of the basic link (i.e. when it is in the Link or Normal state)
– The second circle determines the color of the link when we hover the mouse over it (i.e. when it is in the Hover state)
Select the color you want for each circle by clicking on it. It will open a window containing a sliding color bar through which you can select the color you want.
We set the link color to be red by default, and yellow on mouseover as shown in the following animation.
2. Change link colors through the page builder
Most page builders for WordPress offer the ability to change the colors of links on the site easily and without the need for programming knowledge.
After installing and activating the selected add-on, go to the Articles section of the site, open any article from within the Elementor editor, then click on the menu icon consisting of three small horizontal lines at the top right of the screen as follows:
From the menu that appears, choose the first option ( site settings ).
Then choose from the Template Format ( Fonts ) section, as shown in the following image.
Scroll to the bottom of the window that appears to find the section (link). This section includes two tabs at the top.
The Normal tab enables you to change the colors of the links when they are in the normal state, and the Hover tab enables you to change the colors of the links when the mouse hovers over them.
As shown in the previous picture. You can simply choose the appropriate color from the color bar that appears, or you can specify the HEX value of the color you prefer for the link. You will be able to preview the changes directly to the article you are browsing.
After selecting your options click the Update button to save your changes.
3. Change link colors using CSS codes
If your theme doesn’t offer link color customization, or you don’t rely on a page builder plugin on your site, that’s okay! You can still change the colors of links on your site through custom CSS codes, as we will explain to you in this paragraph.
Note that the default color used for links on our current site is brown. We will change this color through the code according to the following steps:
1- Log in to your site’s control panel > then go to the Appearance tab > Customize
2- A new window will open, from which you can choose additional CSS formats
3- A new window will then appear, enabling you to add custom CSS codes within the text field ( additional CSS formats ) .
Here we will add CSS codes that change the colors of links on our website
4- To change the link color in its default state from brown to blue (which has the hexadecimal code #0031FF), for example, we add the following code:
We notice changes in the colors of the links and their turning to blue throughout the site, as shown in the following image
Note: The letter (a) in the previous code indicates the tag for links in (html), and the word Link indicates that we want to change the application of formatting to the link in its default state, that is, before clicking on it or hovering over it with the mouse.
5- To change the color of the link when we hover the mouse cursor over the link to the color hazel or light brown (which has the code #c1934d), for example, with a line added under the link, we will write the following code:
After writing this code, when you hover your mouse cursor over the link it will become light brown and a line will be placed below the link text.
Note : The code for adding a line below the written text is (text-decoration: underline).
6- The last step that we will take is to change the color of the link to red (#ff0000) when it is clicked with the mouse and the destination it refers to (Visited) is visited. We write the following code:
In the previous code, when the user clicks on the link and visits it, its color will become red, as shown in the following image:
Therefore, the final CSS code that you can include will be as follows:
Read also: Inserting links on your site to enhance the user experience and improve your site’s SEO
In the end, changing the colors of links on your WordPress site does not require a lot of experience, and you can achieve this in several ways, as we have seen. Most WordPress templates and most page builder plugins allow this to be done easily and without the need for programming expertise. You can also of course add custom CSS codes to do this when these features are not available on your site, as we explained in the article.
