WordPress Change Link Color – How To Do It?

Changing the color of links in WordPress can improve how your visitors interact with your website.

It increases the number of pages they visit and the time they spend on your website. The more time visitors spend on your website, the more chances you have to convert them into paying customers.

But how can you change the WordPress link color from standard blue to a color of your choice?

Don’t worry!

Keep reading to learn how to change the color of the links in WordPress.

How can you change the link color on your WordPress site?

There are 4 ways that you can use to change the colors of the links in your WordPress website.

They are as given below:

  1. Using Custom Additional CSS Code
  2. Using Elementor
  3. Using the WordPress Customizer
  4. Using Beaver Builder and Theme

Let’s learn how to change the link color in WordPress using the methods discussed above:

#1: Writing custom CSS Code

Creating a custom CSS code to change the hyperlink color is the fastest way to do it if you are comfortable using CSS. Here, you need to find the hex code of the color you want for the link and add it to the website.

Use a free website like Color-Hex to find the hex codes of any color and use them on your WordPress website.

How to change the default color of the link with additional CSS?

Once you have found the hex code, follow the steps given below:

  1. First, sign in to your WordPress site and go to the Dashboard.
  2. Go to Appearance and then to Customize.
  3. Open the Custom CSS Editor by clicking on the Additional CSS option.
  4. Enter the hex code of your desired color as given below in the CSS editor:

How to change link color when hovering?

An excellent way to grab visitors’ attention to a link is to change link color when they hover over them.

You can do it in the CSS editor.

After opening the CSS Editor, just like in the previous step, add the following color code to the editor:

How to change the link color after clicking?

You can change the font and visited link color from the default link color after a visitor has clicked on it by adding the following CSS code to your CSS Editor:

  1. Now, you can save the changes by clicking on the Publish button for the effects to take place.

We have used the hex codes as examples, and you must replace #FFA500 and #0000FF with the code of your preferred font and link color. You can pick a different color than the ones others use.

#2: Using WordPress Customizer

According to the WordPress theme you have chosen, you can change the color of your links. Using a theme customized like css hero is the best way to change link color if you do not want to use custom CSS codes.

Here is what you need to do:

  1. Log in to your site and go to WordPress Dashboard.
  2. Go to Appearance and then to Customize.
  3. Look for an option labeled Color.
  4. You can now customize the link color using Accent Color.
  5. Pick a color of your choice by experimenting with it using the color picker.
  6. You can also add the hex code if you have it handy.
  7. Click on Publish to save the changes and the effects to take place.

Depending on your WordPress theme options, the settings may change a little. However, most color options may be found under the label appearance. This is how you can use WordPress customizer to change the link and font color on your WordPress website.

#3: Using the Elementor page builder

Elementor is a widely used page builder plugin for WordPress. You can use the WordPress plugin to change the color of the link.

Follow these steps:

  1. Log in to WordPress and go to Dashboard.
  2. Open the page you want to change the color in Elementor.
  3. Click on the icon on the top left and go to Site Settings.
  4. Ensure that the Normal tab is in selection.
  5. Choose Typography and click on any one of the icons against Color.
  6. Pick your preferred color from the colors available.
  7. You can choose a preferred link-hover color similarly by selecting the Hover tab instead of the Normal tab.
  8. Click on Publish, and you are good to go.

#4: Using the Beaver Builder plugin and theme

Beaver, another famous WordPress builder, is used by many websites to customize their websites. With the Beaver Builder plugin and theme, you get a range of predefined elements to use.

To customize the color of the links, you must override these presets. You can follow the steps below to do that:

  1. Log in to WordPress and go to Dashboard.
  2. Now navigate to Appearances and go to Themes.
  3. You will launch the Beaver Builder Theme. Hover over it and select Customize.
  4. The Beaver Builder Editor will open.
  5. Now, go to General from the menu on the left-hand side and choose Accent Color.
  6. You can choose a color from the color options given by clicking Select Color.
  7. You can also add a hex code of your preferred color to the box near Selection Color.
  8. Likewise, you can also define a unique link hover color by clicking on Hover Color.
  9. Click on Publish to save the changes.

You can change these changes to default later by returning to this menu and clicking on the Default option on the left-hand side of the panel.

Conclusion

Making your website accessible and appealing to users is crucial for businesses and bloggers. Doing so will help improve the customer experience as it will be easier for users to navigate the site.

Therefore, make your website as user-friendly as possible and different from other websites. And changing link color is one way of doing it.

While changing the hyperlink color is a minor modification, its impact on the users’ experience and interactions with the site will be huge as custom colors always improve user experience on your website.

Leave a Reply

Your email address will not be published. Required fields are marked *