Divi Tips

If you find yourself wanting to incorporate unique functionality into your web pages using Divi, this may be useful.

If you find yourself wanting to incorporate unique functionality into your web pages using Divi, this may be useful.

To address potential GDPR compliance and security concerns associated with loading Google fonts from their server, it is recommended to take the following steps in Divi.

Yes, you can move the Divi blog module items with custom ordering using CSS to whatever order you like.

How to add an image icon to read more button on the Divi blog module.

With the latest release of the WooCommerce PayPal Payments module, there have been a lot of complaints. A client's site was not working properly where if someone clicked the Place Order button it showed an error. But, the PayPal buttons below the Place Order button work. So, I found a script and modified it to hide the Place Order button if the PayPal option is chosen.Add the following code to...

Make the Divi active menu item background color highlight (like the image below) is something Divi does not have settings for. This can be tricky depending on things like font sizes, number of menu items, sizing, design requirements, etc.Add the following CSS to the Divi Options / Custom CSS (without style tags) or Integration / Head area. TIP: Play around with the padding and margins in the...

It's crazy how you can't simply put an image into the Divi slider and have it full width. With some custom CSS, you can! In your slider module, in the Advanced/Custom Classes area, add "full-image-slider" to the class field. Add an image to the image field for each slider and save. Add the following CSS to the Divi Options / Custom CSS (without style tags) or Integration / Head area.[css] /*...

A collapsible mobile menu in Divi is something you might think would be standard or at least an option, but is not. The good news is it's easy enough to pull off.In your Appearance / Menu area click the "Screen Options" button in the upper right. Make sure CSS Classes is checked. Click the down arrow next to the menu items that have sub-menus. Add "first-level" to the CSS Classes field. Next,...

This is one of the greatest Divi tricks ever. It gives you SO much more flexibility. NOTE: Divi.Space has a free plugin but I can't seem to find it on their site. So, here's a link to the plugin zip file for install. It's written better and adds a link to the library in the plugin menu. If you are already using my method, you can install the plugin and then run a search and replace, using the...

While there are many tips in my other post, this one is a bit more simple and more up to date. Do not use negative margins! Anywhere. If you absolutely need to move something, use the positioning tool instead. Make sure you check the tablet and mobile versions as you may need to reset the position for these. Do not use animations! Anywhere. TIP: The Divi blurb module has a default animation you...

There are a few Divi mega menu plugins out there and they work nicely for the most part. But, they can be pricey and some are a bit bulky. Using this method requires 2 things: Install the free "Shortcode in Menus" plugin for adding shortcodes to your menu. Add the function below to your child theme functions.php file. The custom function does 2 things: Allows us to use a shortcode to display a...

NOTE: Here is a link to my most recent post More Divi Cumulative Layout Shift and other GTMetrix and Google Page Speed Tips How to improve your Divi website Cumulative Layout Shift scores and other GTMetrix and Google Page Speed scores.While I was working hard on other projects, two of my clients (unrelated) were staring down the new GTMetrix and Google page speed scores and determined to whoop...

Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* reduce the blog category featured image size */ .archive.category .et_pb_post a img {max-height:300px; width:auto;} [/css]

Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* reduce the search result image size so it doesnt fill screen */ .search-results .entry-featured-image-url img {max-height:300px; width:auto;} [/css]

Add the CSS class "flip" to any Divi row settings in the Advanced tab. Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* swap columns on mobile */ @media only screen and ( max-width: 980px) { .flip { display: -webkit-flex; -webkit-flex-direction: column-reverse; display: flex; flex-direction: column-reverse !important; } }...

Add the following CSS code to the Divi theme options area or your child theme style.css file. [css] /* make top nav bgd transparent on home page only */ .home #main-header, .home #top-header { background-color: rgba(255, 255, 255, 0) !important; box-shadow: none !important; } /* make Fixed top nav bgd transparent on home page only */ .home #main-header.et-fixed-header { background-color:...