Try Amazon Prime Video for FREE for One Month. Click for details.

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: 

a: link { }
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.

Add to your custom colors to CSS stylesheet so you can easily find them when needed.

/* WEBSITE COLORS
Green: #32952d;
Orange: #fe8727;
Brown: #442b00; 
Yellow: #f0ff23; */
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:
a: link {
	color: #fff;
}
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:
a: link {
	color: #fff;
	border-bottom: 2px dashed;
}
We can even add background colors to our links if we want:
a: link {
	color: #fff;
	border-bottom: 2px dashed;
	background-color: #442b00;
	padding: 5px;
}

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:

a: hover {
	border-bottom: 2px dashed;
}
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.

.greenLink a {
	color: #32952d;
}
.greenLink a: hover {
	border-bottom: 2px dashed;
}
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.
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:

.greenLink a {
	color: #32952d;
}
.greenLink a: hover {
	border-bottom: 2px dashed;
}
.brownLink a {
	color: #442b00;
}
.brownLink a: hover {
	border-bottom: 2px dashed;
}
.orangeLink a {
	color: #fe8727;
}
.orangeLink a: hover {
	border-bottom: 2px dashed;
}
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):

#top-menu a {
	border-bottom: none;
}
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




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.
DiviDudeWeb16

Popular Domains for just 99 Cents at Namecheap!

Legal Disclaimer

To support the publication of this website, this site runs banner ads and is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com. As an Amazon Associate I earn from qualifying purchases. Also other ads may result in commission payments or other compensation.

Favorite WordPress Theme

Divi WordPress Theme

Start Your Newsletter

MailerLite Email Marketing for Small Business

 

Constant Contact

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…

MailerLite is an affordable, easy-to-use newsletter and email marketing platform

MailerLite is an affordable, easy-to-use newsletter and email marketing platform

For the longest time I used MailChimp. I was drawn to the 2,000 free subscribers.

But when MailChimp changed how they defined subscribers and made some other not so user friendly changes, I started looking for alternatives. Not just for the free tier, but for my paid subscriber lists (I have clients that send out newsletters and they need more bang for the buck than what many free tier offers).

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…

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