BLACK FRIDAY SALE: Get 50% Off On Any UNLIMITED DOWNLOADS Plan! Use Code "blackfriday" At Checkout

DOWNLOAD ALL NOW!

Search for a plugin or theme

How To Change Link Color In WordPress

You are currently viewing How To Change Link Color In WordPress

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

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.

Why to Change the Links’ Color

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

When all the elements of the website are matching each other, it will improve brand recognition and most importantly, increase the conversion rate.

You can read the article by Investopedia about how important is brand recognition for your business.

A website color can psychology affect the decision-making of your visitors. Therefore it should always match the color scheme and target toward performing an action.

If you already know your desired link’s color, skip the section below. Otherwise, keep reading and find out how to reveal the right color code.

Finding The Right Color

In order to change the link color, we first must know which 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.

Change Link Color In WordPress

You can change the link’s color of your WordPress website in many different ways.

Some of the most popular ways are:

In the next few sections, we will explore all of these ways. Feel free to choose the method you like the most or experience with them all.

Method #1: Use 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.

Method #2: Theme customization

Many themes will have the option to change the link colors using their customization screen without using any plugin or CSS. Therefore, we should use this option when possible.

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.

First, set your desired colors and click on publish afterward.

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

Method #3: Use 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.

Method #4: Elementor page builder

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

Once you published the changes, revisit your website and make sure the color of the links changed successfully.

Conclusion

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

Leave us a comment and let us know which one of the methods you used.

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