Hyperlink Color and Hover Color Change in Divi Using CSS

Hyperlink Color and Hover Color Change in Divi Using CSS

26 May 2019

By Rupert Bean

After using the WordPress theme DIVI on a few websites now, we’ve had to delve into some simple CSS to achieve certain tweaks to get things to look how we want them to. In this brief tutorial, we deal with changing the color of hyperlinks that can’t easily be seen because of the background color we’re using.

DIVI style limitations

We love Divi for several reasons, especially its versatility when it comes to layout and design. However, it does have a few limitations out-of-the-box and sometimes you need to use custom CSS to get things looking how you want them to.

Custom CSS for Divi hyperlink colors including hover

So, you’ve created your website and have chosen a nice background color in your Divi section/row but the problem is, when you add a hyperlink, it’s difficult to see it because the default hyperlink color is too similar to your chosen background color (as in the lead image at the top of this post). If you’re facing this problem, here’s how to rectify it with a simple CSS trick to change to hyperlink color and hover color to whatever you want.

How it’s done

First, we log into our WordPress dashboard and go to Divi’s theme options

We then immediately scroll down to the Custom CSS field at the bottom of the General tab. This is where we’re going to insert our CSS code to change the color of our hyperlink.

In the custom CSS box, paste the following CSS code then save and exit.

/* hyperlink color */
.hyperlink-color a {
color: #fff;}.hyperlink-color a:hover {color: #88b8e8;}

Next, we go to the module where the hyperlink resides (in this instance, we’re using a Blurb Module and paste the following CSS in the CSS Class field of the Advanced Settings:

hyperlink-color