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. Use promo code: DiviDude10 for 10% off your first 3 months. Need a little more info? Then read my Cloudways review and find out why I host DiviDude.com on it.
a: link { }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; */a: link {
color: #fff;
}a: link {
color: #fff;
border-bottom: 2px dashed;
}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;
}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;
}
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.
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;
}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 enjoyed this Divi tutorial, or at the very least found it useful, you may want to check out how to customize the Divi Tooltip.
Must Have Plugins
Faster WordPress Hosting
Affordable Domain Registration
Get $1.00 off.
DiviDudeWeb16
Favorite WordPress Theme
Start Your Newsletter
For Your Inner Nerd
Affiliate marketer: Which means when you click a link and purchase an item, I may receive a commission.
More From Divi Dude
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
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
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…
Amazing! Thank you so much! <3
You are welcome.
Hey. I’m doing the exact same thing as you but still the appearance of my link won’t change. Any ideas on what I may be doing wrong?
nvm found out what I did wrong. Btw great video and great blog, been getting a lot of useful tips from here.
Great. Glad you figured it out. Thanks for the kind words.
Hi, This is a great video, and I’m glad I found your site, however, I can’t seem to get this to work. When I go to put the class in, I don’t have anything in the CSS Class, so I put in blackLink and .blackLink but I don’t see a change. I am trying to change the link and the visited link (so a and a:visited). Can you help me?
Hi Patricia. Sorry for my delay, this comment skipped past me. I tried adding the a:visited to my code and it worked. So my guess is the issue may be either: a) simply a typo (that’s usually my issue); or b) your browser cache isn’t clearing and while it is working, you don’t see it (try cleaning the cache and then looking at it again); or c) a plugin you are using is screwing something up (try disabling them one at a time to see if this is the cause). Double check your work and if you are still having problems, shoot me an email via the contact page and we’ll see if we can figure it out.
Hi I liked that, unfortunately #top-menu a {border-bottom: none;} did not remove the dashes from my menu or my logo when I hover. No idea why 🙁
Also I have a couple of links – 1 white & 1 black – could you show me how to change the colours of them individually and also tell me how to make them both change colour when you mouse over them (instead of the bottom border?
🙂 cheers dude!!!!
Let’s start with the last one first. To change the color on the hover, you would simply put in a:hover {color: #ddd;} (change the #ddd to the color you want.)
To change the multiple colors, you’ll need to give them custom class names. It’s the same as I did in the video for .greenLink, but you would just make several of them (for instance, name one .whiteLink and the other .blackLink) and add the name to the CSS Class field in the module. So to make a link that is white do something like .whiteLink a {color: #fff;} and then change the hover to grey .whiteLink a:hover {color: #ddd;}.
Not sure why the lines didn’t disappear. First make sure you did everything the same as I did (usually we forget the ; or something small like that). If you’re 100% sure the CSS is correct, you may have a plugin that is interfering. If you send me the link via email, I can look at it and see if I can spot the problem.
THANK YOU! And thank goodness for the comments section. I read all of your replies, and you mentioned to “double check” all the little details. And that’s what it was! I was missing a little ol’ } symbol. You are the bestestest DiviDude!
You’re welcome. And my grade school math teacher will be happy to learn that her stern warning to “always check your work” has paid off.
Thanks for the video! This was driving me nuts!
Hi DiviDude great tutorial!
I like how you showed how to make links custom colours in different sections.
Related to that – is it possible to make links have underlines only in specific sections of a Divi site? I like the underline look on links but don’t want it on every single link across a site.
You could just create two CSS classes for each color. One that has an underline and one that doesn’t. And then use the appropriate one in the CSS Class field in the module.
EXAMPLE
.greenLink a {color: #32952d;}
.greenLink a:hover {border-bottom: 2px dashed;}
.greenLink_no a {color: #32952d;}
.greenLink_no a:hover {border-bottom: none;} (NOTE: you probably don’t need this line, but I include it just in case).
Cheers thanks DiviDude that worked a treat! 😀
Great! Happy it worked.
Was having trouble with this and closed the screen where you replied that you’d tested my code and it worked for you, once you added the needed ‘f’ to my short #fffff color. Just responding here so you’re not spending more of your time on my issue. I found the problem that was still causing the link color not to work, even after fixing the 5-character color to be 6 characters. Must have been a browser cache issue. No amount of refreshes worked, but dumping the cache got my links appearing according to the color I specified with your method. Thanks again for the time you spend responding to my comment!
Great! Glad it worked out.
Thanks for this, it’s super helpful! I was able to add underlines to all my links and remove them from my top navigation, but I can’t figure out how to remove them from any buttons. Any idea how to make that happen? Thank you!
Hi Shari. Not entirely sure without seeing your site. Is the underline happening at the bottom of the button, so that the border that is there is being replaced with the link underlining (i.e. a dashed line)? Are the buttons all the same styling? If the answer is yes to both, then you can try something like this in your custom CSS stylesheet .et_pb_button:link {border-bottom: 2px solid;} Where 2px and solid would be replaced with your own style. Otherwise, I’d have to see your site, because it’s just a guessing game for me. Also when you check to see if it works, make sure you hit CTRL F5 to clear your cache on your page, or else your changes may not show up. Hope this helps.
Here’s the site – https://societyofeverywhere.com/ No, the underline isn’t at the bottom of the button, it’s right under the text. You can see it in the first button “Find Out More” on the hero image and then on the three blog post links below that and again on “Contact” at the bottom of the page above the social media links, all of which I’m hoping to get rid of the underline on. Thanks!
I took a quick look at your site (I like it by the way, looks great!) and am wondering have your tried removing the !important from your a:link “text-decoration: underline !important;”? And then adding to your button class “text-decoration:none;” Just from a quick look, I’m wondering if that’s the issue.
Thanks, I appreciate it! I tried what you recommended, but I’m not sure I know the code for the button class. I tried:
#button a{
text-decoration:none;
}
but it doesn’t seem to make a difference.
Was that the right thing to put, or should it be something else?
Shari. It should either be .et_pb_button {text-decoration: none !important;} or .et_pb_more_button {text-decoration: none !important;}. The first will remove underline from all buttons, whereas the second one will remove it from the ones using that specific class. If it doesn’t work, can you email me using the contact form? That way we’re not using the comments form to go back and forth. 🙂 Thanks.
Thanks – this helped!
You’re welcome.
Thanks for this tutorial, I’m trying to create a hover underline for links but can’t seem to make it work. Followed instructions from the video but no change on my site, not sure what I’m missing. Tried clearing cache, incognito, different browsers…
Usually when something like this happens to me the culprit is something I’ve overlooked, like forgetting to put a ; in or the . (or adding a . to the CSS Class tab). If all that is good, then I’d start turning off plugins and see if one of them is interfering.
Figured it out, had to put the changes in the divi customizer, not the editor. Works great, thanks!
Mr. Dude,
Just a follow on to the above video… I set up a child theme but I’m a little confused how I would get this code from the
DIVI editor into the Child theme. Would I open my style sheet in the child theme with a text editor, then simply add
the code under a comment, like /* Link Underline*/ ? I guess what I’m asking is, is there enough information in the code
you provided above for the Child Theme to respond? Or do I need to add more code such as another selector?
I’m learning CSS but sometimes it’s the little things that really stall you.
You mentioned you had a video on Child Themes. By any chance, do you cover how to get code out of the Appearances > Editor
into the style sheet?
If you could respond to my email I would be grateful.
Thanks!
Brad
bsmi******@*****erv.com
The code should work exactly as described in the tutorial. When you add custom CSS to a style sheet it will override any CSS in the original if they have the same class name. If you add a new Custom class to the style sheet, then as long as you tell Divi in the module to apply that class, then it will load it from the child theme style sheet, as long as you have set up the child theme correctly. The best way to learn it is to try it. 🙂 You can always delete.
Thank you !!! (This was driving me crazy for hours till I found your tutorial)
Great! Glad you found it helpful.