Customizing Links in Divi

By Divi Dude

Unlike my mother’s youngest son, Divi isn’t perfect. That’s why we sometimes have to find ways around certain limitations. Like changing the colors and effects of hyperlinks, or as we call them, links. 

As I’m sure you’re aware, you can change your site’s overall link color in the Theme Customization screen over on the left side of the WordPress Dashboard under the Divi link section.  

Changing the main link color is a pretty simple process, just go into the Divi Theme Customizer and then the General Settings > Typography panel and pick your link color there.  And if you want to change the menu link colors in the header, you can do that via the Header & Navigation > Fixed Navigation panel.

But if you build your website into sections, and each section has different colors and backgrounds, then the one-size-fits-all link color doesn’t work. For instance, on this website my default link color is yellow, which looks fantastic on my orange, green and brown backgrounds. Not so much on white and yellow backgrounds. So I need a way to change the color of my links in those sections. Luckily, we can use custom CSS to do it.

This is a pretty short process, and I’ve done an extensive write up of it on this page.  If you’d rather watch a video, then I have also linked a YouTube tutorial near the bottom of the post.

Where to Add Custom CSS in Divi

First thing to do is go to your Custom CSS place of choice. For some of you, it will be your child theme (See my article on: How To Configure a Child Theme in Divi), for others it will be in the Theme Customizer on the WordPress Dashboard (near the same area where you set up the main link color), and for others it will be in the Divi > Theme Options panel.  It doesn’t matter which one you use.  I use a child theme.

Adding Custom CSS To Change Divi Link Colors

We’re going to start with the basic code to change link colors, so we’ll type our link placeholder in: 

Cloudways Promo Code

Do yourself a favor and dump the shared hosting you're currently using and switch over to Cloudways.  The combination of WordPress, Divi and Cloudways is like a match made in heaven. Just click the banner or this link to find out why you should be using Cloudways as your WordPress host. Includes a Free 3 day -trial.  Need a little more info? Then read my Cloudways review and find out why I host on it.

Load WordPress Sites in as fast as 37ms!

Helpful tip: Add all your website hex code colors to your custom CSS field using /* */ markers so you can easily copy the code you will need.
To change all link colors, you will add in your custom CSS the following code.  So let’s say we want to make all our links white, we would add the color field to our link, like so:
Now, let’s say we want to add a dashed underline to the bottom of the link, we would then add a border-bottom attribute like this:
We can even add background colors to our links if we want:

Adding Style to Link on Hover in Divi

This should give you an idea of the different stuff you can do.  We can style a link however we want, but that still doesn’t solve the problem of how to change the Divi link color in certain sections or modules.

Let’s start again from the beginning.  We have our blank link CSS code here and we added a hover attribute to it. If we’re not changing the link color, we don’t need the link class, just the hover class like below.  Let’s say we want to just change the hover on the main links. Instead of having a dashed underline on all the links, like we did above, we only want to show the underline on a hover.  To do this we will add the border-bottom attribute like we did before, but this time, we’ll add it to the hover class, like I do here:

This will also add a dashed underline to your navigation links, at the bottom of this article I show you how to remove it.

Creating Different Color Links in Divi

So now it’s time to add different link colors to different sections. To do this, you will need to give each link color its own class. For my example below, we are going to add a link that is green.We’ll need to give it its own class name, so that Divi knows to only apply this color link when it’s associated with the class.  You can name it whatever you want (just make sure the name is not already being used elsewhere in the CSS).  I’ll call mine greenLink.
Again, I can add virtually any other styling to it that I want. But in this case, I want it to do the same thing my other link does, which is to add a dashed line on the hover.


Divi Booster is a Divi plugin that just makes your life as a website developer easier. It adds about 50 functions to the already impressive Divi WordPress theme. Want an example? Here’s a video  I did showing the long way and the short way to add additional social media pages to your Divi theme (guess which plugin I used to show the short way). But it doesn’t just help with social media, it also allows you to make adjustments to sliders, headers, posts, pages, modules … like I wrote above, it does about 50 things (I write “about” because it is continuously updated with more functions). $29.

Now, wherever we want the greenLink to be applied, we do that by opening a module in Visual Builder, clicking on the Advanced >> CSS ID & Classes and then entering the greenLink (without the period) into the CSS Class field. And then click the green arrow and be sure to click on the save button.  And now all your links in that module will be green (or whatever custom color you chose).If you want multiple colors, then create multiple classes.  For instance, you can have a green link, brown link, and orange link by doing the following:
Feel free to style them however you want. The examples I give are just some basic examples of what you can do and I hope will meet the needs of the vast majority of us who are looking for better ways to customize Divi and its links.

Remove the Dashed Underline Link From Navigation Link

But wait a minute, now you have dashed underlines under your navigation links.  Let’s get rid of those lines, shall we?  So let’s go back to where you added the previous link colors and type in the following code below your last link (so it’s the last link code Divi reads):
If you’d rather watch a video, I take you through the same steps in this YouTube video.

If you enjoyed this Divi tutorial, or at the very least found it useful, you may want to check out how to customize the Divi Tooltip.

Better Social Media

Instagram Training

Must Have Plugins

WP Theme FAQs

WP Rocket - WordPress Caching Plugin

Duplicator Pro: WordPress Backups Made Simple

Faster WordPress Hosting

Load WordPress Sites in as fast as 37ms!

Affordable Domain Registration

Get $1.00 off.

Big Discounts for Domains, Hosting, SSL and more

Legal Disclaimer

Affiliate marketer: Which means when you click a link and purchase an item, I may receive a commission.  Thank you for your support.

Favorite WordPress Theme

Divi WordPress Theme

Start Your Newsletter

MailerLite Email Marketing for Small Business

For Your Inner Nerd

Rolecosplay Movie Costumes

More From Divi Dude

Delete Spam Comments in Bulk Without Plugin on Cloudways

Delete Spam Comments in Bulk Without Plugin on Cloudways

Sometimes you screw up and forget to turn off comments on your WordPress website, or forget to configure your Askimet, or do both, and then you end up with thousands of comments that are nothing but spam. We’re talking hundreds of pages worth of comments that need to…

Code Snippet Syntax Highlighter that Works with Divi – Review

Code Snippet Syntax Highlighter that Works with Divi – Review

This is one of those plugins that’s only going to appeal to a certain number of people. People like me who have a need to add syntax code to websites. But if you’re one of those people, then I recommend you get the plugin — Divi Code Snippet Module — from the creator of Divi Booster. I tried 3 or 4 plugins in WordPress, every one of them …

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

3 Easy Ways to Add Pinterest Board Pins to Divi Websites Without Plugins

Here’s the dilemma. When I build websites, I build them primarily for a landscape screen. Most of my photos are optimized for landscape screens. My Facebook and Twitter graphics are for landscape screens. But Pinterest prefers portrait style graphics for its pin boards. See the problem? My website has graphics that are wider than they are long (landscape). Yet, Pinterest wants graphics that are taller than they are wide (portrait).

Join Our Awesome List

Join our mailing list to receive the latest news and updates from Divi Dude. We don't write often, but when we do, everything will more or less be spelled correctly (oh, and be interesting and fun and knowledge based).

Thanks Dude! You've successfully subscribed.

Pin It on Pinterest

Share This