~Just the Facts~

CUSTOMIZING LINKS IN DIVI

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

Cloudways Promo Code

Use coupon code SCALEINSUMMER for 30% discount for 2 months on all Cloudways webhosting plans.  And don’t forget, you get a FREE 3 day trial.

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.

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

}

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.

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.

MAKE YOUR DIVI LIFE EASIER

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:

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


Faster WordPress Hosting

Load WordPress Sites in as fast as 37ms!

Build Better Websites

Affordable Domain Registration

Get $1.00 off.
DiviDudeWeb16

Subscribe

Must Have Plugins

WP Theme FAQs

WP Rocket - WordPress Caching Plugin

Favorite WordPress Theme

Divi WordPress Theme

Latest Divi Dude Tutorials

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

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