Search for a plugin or theme

How To Change Link Color In WordPress

How To Change Link Color In WordPress

Colors are one of the best ways to make any website more visually appealing.

It will be very beneficial to match the various elements of your website with your brand’s colors.

If you’re using WordPress, you probably know that finding the right settings to change isn’t very easy and often can get confusing.

In this article, you will learn how to change link color in WordPress.

Finding The Right Color

In order to change the link color, we first must know what color we want.

While most of the popular colors can be referred to as blue, purple, yellow and etc, the rest is a combination of letters and numbers together that creating a hexadecimal value.

For example, the hexadecimal code of the color blue is #0000ff. The hexadecimal code of red is #ff0000.

In order to find the hex code of your desired color, navigate to Google, and search for Color picker.

The color picker will be displayed at the top of the search result.

Move the slider left or right and the picker to the right color and copy the Hex code.

Color Picker

After finding the right color code, we can move forward and learn how to change the link color in different ways.

How To Change Link Color In WordPress

Changing the link color in WordPress can be done in many ways.

We can change the link color using CSS rules, theme customization, plugins, and page builders.

Feel free to choose the method you like the most or experience with them all.

Change the link color with CSS

CSS (Cascade Style Sheet) is written with [Property] : [Value] pairs and commanding the browser on how to style the elements of the document.

By default, the link color of any website is set to blue or in CSS rule:

a { color: #0000ff; }

The a is the property and it means Anchor (or link) and #0000ff is the color blue (value).

If you would like to display the links in a different color, we will need to enter a new CSS rule.

First, click on Customize from the admin bar to access the customization screen.

Click customize

Then, navigate to the Additional CSS tab, where we will be able to enter the new rule.

Chose the additional CSS option

On this screen, paste the code below.

a { 
color: hex code;
}

Make sure to replace hex code with the actual color code you found on the last step and click Publish.

Set link color with CSS

Now, revisit your website and make sure the link color was changed successfully.

In addition, you can also set different colors when hovering on the links and for visited links.

Simply add the CSS below to the code above and change the hex code respectively.

a:hover {
	color: #ffc0cb;
}
a:visited {
	color: #ff0000;
}

In this example, I set the links’ color to be purple, the hovering color to be pink, and the visited color to be red.

Different colors for various link states

CSS is my preferred way because it should work with all themes and websites.

However, if you don’t want to use CSS we can also change the colors for most themes from the customization screen.

Change link colors for specific themes

Many themes will have the option to change the link colors using their customization screen without using any plugin or CSS.

Usually, you can access the desired settings screen from the customization window.

In this section, we will go through the most popular themes and learn how to access the right screen.

Most chances are that you still have the option to change it for your theme even if you are not using one of the themes below.

OceanWP

First, access the customization screen by clicking on the customize link from the admin bar.

Then, click on the General Options tab.

OceanWP General Options

Now, click on the General Styling tab and scroll to the bottom.

OceanWP general styling

At the bottom of the sidebar, you’ll have the option to change the link and the link hover colors.

Set your desired colors and click on publish.

OceanWP link colors

GeneratePress

Open the customization screen and click on the Colors tab.

GeneratePress Colors

On this screen, you’ll have the options to change the colors of the links for both normal state and hover. Select your desired color and save the changes.

GeneratePress link colors

Astra

For the Astra theme, launch the customization screen and click on Global.

Astra Global tab

Then, click on the Colors link and Base Colors.

Astra colors tab

There, you’ll have the option to change the link and the link hover colors. Make sure to save the changes when done.

Astra link colors

If you couldn’t find the right setting screen for your specific theme, we can still style the link colors with a plugin.

Divi

For Divi, navigate to the customization screen, and click on General Settings.

Divi General settings

On this screen, click on the Typography option.

Divi Typography

Then, select your desired color and for the Body Link Color and click publish.

Divi body link color

Change link colors with a plugin

From the backend of your WordPress website, navigate to Plugins -> Add New, search, install and activate the SiteOrigin CSS plugin.

SiteOrigin CSS WordPress Plugin

After activating the plugin, navigate to the new Appearance -> Custom CSS tab and click on the eye icon to launch the visual editor.

Siteorigin custom css

Here, click on any of the links to highlight it and notice that the selector was changed on the left top corner to a:hover meaning that you’re editing the settings for the hover state.

Style the hover state as you wish and set a color, bold, underline, and etc.

Siteorigin link hover color

To change the normal state of the link, click on the a attribute from the list at the bottom and verify that the selector on the left top corner changed accordingly.

Now, style this state as desired and click on the checkmark icon when finished.

Siteorigin link color

After both CSS rules were added to the SiteOrigin plugin screen, click on the Save CSS button and revisit your website to verify that the new style was applied successfully.

Siteorigin save css

If you’re already using a page builder with your WordPress website, you can simply change the global settings of the page builder and skip the steps above.

Change link colors with Elementor

All the popular page builders will enable you to change the global styling of various elements of your website.

In this section, we will go through Elementor and discover how to access their global styling screen.

Launch the Elementor editor and click on the hamburger menu on the left top corner.

Elementor plugin global settings

Then, click on the Site Settings option.

Elementor plugin site settings

Now, click on the Typography tab under Theme Style.

Elementor typography global tab

On this screen, change the colors and styling of the link for normal and hover state and click on the update button when done.

Global link colors with elementor

Conclusion

Styling your website to carry your brand colors is one of the most important things to do.

In this article, you learned how to change the link color in various ways.

Let us know which method you used and if you would like to add an additional way to the list.

Also, make sure to subscribe to our YouTube channel and like our page on Facebook.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

PluginsForWP

PluginsForWP is a website specializing in redistributing WordPress plugins and themes with a variety of knowledge about WordPress, internet marketing, and blogging.

Leave a Reply