Divi Guide: Our Top 10 Frequently Used CSS Tricks and Fixes

Introduction

It’s no secret, we all love Divi, and the way it’s transformed our web development work flow. There are, unfortunately, still some annoyances that come with using Divi. As such, there are quite a few tweaks that we tend to use on most of our Divi projects, sometimes to fix things, and sometimes just to add a little bit of flair to what otherwise might be pretty plain. Today, I’m going to share with you our most commonly used Divi tweaks. Let’s dive right in, shall we!

 

Tweak #1 – Link Transitions

Tweak #1 is a very simple one, but it’s a simple trick that goes a long way. Let’s not just have a basic rollover color change on our links, but rather a smooth fading transition. To use this, add the following to your child theme stylesheet.

/* Add transitions to link hover effects */
a {
-webkit-transition: color .5s ease;
-moz-transition: color .5s ease;
-o-transition: color .5s ease;
-ms-transition: color .5s ease;
transition: color .5s ease;
}

Tweak #2 – Stop Changing Opacity On Hover Of Menu Links

This one is arguably subjective, but I prefer to instead set a rollover color, rather than lowering the opacity of a menu link on hover. To achieve this, add the following CSS to your child theme stylesheet.

/* Stop changing the opacity of our main nav on hover */
#top-menu li a:hover {
color:#2d93cf; /* Hover color */
opacity: 1 !important;
}

Tweak #3 – Fix For Text On Dark Colored Buttons

If you’ve been making Divi sites for a while, then you’re probably aware that there is a bug when it comes to buttons, particularly the comments buttons on posts. When you have a dark colored button, the theme customizer doesn’t actually change the text color on these buttons, which makes things look pretty bad. Thankfully, we can fix this pretty quickly with some CSS. This will also apply to your WooCommerce buttons. You know the drill, child style time!

/* Fix for buttons */
#submit, .comment-reply-link, .et_pb_button, .button, .button .wc-backward {
color: #FFF !important; /* Change this to whatever color you prefer */
}

Tweak #4 – Full Width Footer

Have you ever used the full width header setting, only to be disappointed when your footer doesn’t have a full width option to match it? No problem! We can fix that pretty easily with the following CSS.

/* Make Footer Full Width */
#footer-bottom .container{
margin-right: 1.5%;
margin-left: 1.5%;
width:97% !important;
max-width: 97%;
}

Tweak #5 – Header Background Images

Okay, a solid color background on the header is nice and all, but what if you want something nicer? We like to use a background image and put a drop shadow on our menu text. Here’s the code for that. You can also change “no-repeat” to “repeat” if you’re using a tiled image.

/* top header background */
#main-header {
background-image: url('/wp-content/uploads/path/to/your/image.png');
background-size: initial;
background-repeat: no-repeat;
background-position: center top;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.5);
}

Tweak #6 – Replacing The Arrow On Parent Links In The Main Navigation

Divi looks pretty decent out of the box, but what if you want a different symbol to follow your navigation links. You know, instead of that little downward-pointing arrow, maybe a plus sign (like ours!). Since Divi uses its own font for those symbols, we can replace it easily enough.

/* Replace Parent Menu Icon */
#top-menu .menu-item-has-children > a:first-child::after, #et-secondary-nav .menu-item-has-children > a:first-child::after {#top-menu .menu-item-has-children > a:first-child::after, #et-secondary-nav .menu-item-has-children > a:first-child::after {
content:"l";  /* Try different characters for different icons */
color:#2d93cf; /* You can even change the color of the icon! */
}

Tweak #7 – Remove The Divider Line Between Content And Sidebar

Are you ever annoyed by that little line? We know we are, so we remove it most of the time. Here’s how.

/* Take out the divider line between content and sidebar */
#main-content .container:before {
background: none;
}

Tweak #8 – Hide The WooCommerce Shopping Cart Icon

So your site is looking great, but that pesky WooCommerce shopping cart icon is just throwing everything off? Just hide it! Be sure to provide another means of the user getting to their shopping cart before doing this.

.et-cart-info {
display: none;
}

Tweak #9 – Remove Bullets From Widgets In The Footer

Hey, sometimes you just want a clean look for the lists of links in your footer. Here’s a simple way to clean it up. If you still want them indented, remove the second part with the padding.

#footer-widgets .footer-widget li:before {
display: none;
}
#footer-widgets .footer-widget .et_pb_widget:not(.woocommerce) ul li {
padding-left: 0px;
}

Tweak #10 – Remove Excerpts From The Blog Grid Module

So you like the look of the blog grid module, but you’re struggling with keeping all the entries the same height? It really does look pretty terrible when they don’t match up. We choose to just remove the excerpts entirely for a much cleaner look. Here’s how, and it’s dead simple.

.post-content {
display: none;
}

 

Conclusion

Do you use any of these tweaks for Divi? Are you going to start? Did we blow your mind? Did we miss anything? Let us know in the comments!

 

Bonus Content! – Divi Child Theme

If you like all these tweaks, I’ve provided a child theme with all of them already applied. Of course, you can simply remove the tweaks you don’t want to use from the child stylesheet. Enjoy!

Download Child Theme

Pin It on Pinterest