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.

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.

 

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!

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.

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.

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

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

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.

 

Tweak #9 – Remove Bullets From Widgets In The Footer

 

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.

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 FREE Divi Child theme!

4 Shares