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
Use coupon code BFCM40 for 40% discount for 2 months on all Cloudways hosting plans. And don't forget, you get a FREE 3 day trial. Offer valid until December 04, 2019.
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:
Creating Different Color Links in DiviSo 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.
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.
Remove the Dashed Underline Link From Navigation LinkBut 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 enjoyed this Divi tutorial, or at the very least found it useful, you may want to check out how to customize the Divi Tooltip.
More From Divi Dude
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…
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 …
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).