Divi Tips

100% Google Page Speed Scores with Divi 5

The website **DiviGuy.com** proudly boasts a perfect **100% Google PageSpeed score**, a testament to its superior technical optimization and performance. Achieving a score this high is rare and reflects a meticulous focus on speed, responsiveness, and overall user experience. Whether accessed on desktop or mobile, the site loads blazingly fast-ensuring that potential clients experience zero…

Read More

Cloud Hosting Cost Calculator for AMA Systems

In collaboration with the skilled developers at Gravity Wiz, I created a custom Cloud Hosting Cost Calculator using the Gravity Forms plugin. Initially, the project was intended as a standard form submission, where users would select their desired hosting plan, enter relevant details, and submit their info. However, as the project evolved, the client opted to use the calculator as a dynamic,…

Read More

Hide Place Order button (on WooCommerce Checkout page) when PayPal payment method (or any other) is chosen

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…

Read More

How to make Divi active menu item background color highlight

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…

Read More

How to make Divi slider image full width

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. /* Full…

Read More

How to add a collapsible mobile menu in Divi.

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,…

Read More

How to add a Divi section or module inside another module.

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…

Read More

More Divi Cumulative Layout Shift and other GTMetrix and Google Page Speed Tips

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…

Read More

How to make a Divi mega menu using Divi modules without buying a plugin.

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…

Read 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 them. We’re talking about Cumulative Layout Shift (CLS), optimizing/combining/deferring Javascript and CSS, etc. Both had…

Read More

Make the default Divi search box search WooCommerce products only

If you have a Divi/WooCommerce site and you don’t have any posts, this is perfect for you. The default Divi search will now search only your products. You can add this to the Divi theme options Integration tab in the head. Or add to a Code module in your global header. This also changes the placeholder text from “Search” to “Search Products”. For example when you click on the search icon like…

Read More

Swap Divi columns on mobile and tablet devices

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. /* 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; }…

Read More

Make default Divi header transparent on home page only

Add the following CSS code to the Divi theme options area or your child theme style.css file. /* 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: rgba(255,…

Read More

Hide or show WordPress menu items on mobile devices

In Appearance/Menus click on the Screen Options tab at the very top right. In the “Show advanced menu properties” area, check the box next to CSS Classes. Use the either “hide-mobile” or “show-mobile” in the menu class field. NOTE: The max-width is the default Divi tablet break point width. You can change this to your specific needs. Add the following CSS code to the Divi theme options area or…

Read More

Format superscript text in Divi

Add the following CSS code to the Divi theme options area or your child theme style.css file. sub, sup { font-size: 75%; /* Zero out the line-height so that it doesn’t interfere with the positioning that follows */ line-height: 0; position: relative; vertical-align: baseline; } sup { /* Move the superscripted text up */ top: -1.25em; } sub { /* Move the subscripted text down, but only half as…

Read More

How to make a Divi slide in menu (or full screen menu) and a default style menu at the same time.

NOTE: This an old method and I’m sure there is an easier way using the new Divi theme builder. How to make a Divi slide in menu (or full screen menu) and a default style menu at the same time. This way the mobile style (hamburger) icon will appear in the upper right that opens the slide out menu. And, you can add a regular style menu in the center. It requires some HTML and CSS updates but are…

Read More

How to change Divi Project slug to something else

Are you using the Divi Projects for something other than projects? You may want to change the permalink (or URL) to say something other than “project”. You’ll need to use a child theme and paste the following into the functions.php file. The code below will change “Projects” to “Case Studies”. Just change 3 lines below to whatever you like. /* Change the Divi Project Post…

Read More

Make Divi footer stick to bottom on short pages

If you want make the footer display at the very bottom for short content pages, you can use the code below. Paste this in the Divi Options/Ingergration area in the header section. Make sure to put this inside of a script tag. jQuery(function($){ function stickyFooter(){ var footer = $(“#main-footer”); var position = footer.position(); var height = $(window).height(); height = height –…

Read More

Change Logo on Mobile – Divi Theme

If you want to add a different logo to your header for different screen resolutions, you can use the code below. Change the URLs to point to your images. You can also adjust the width value to whatever you like. Make sure to put this inside of a script tag. jQuery( document ).ready(function() { if(jQuery(window).width() < 481){…

Read More

More Tips

Ask a Question

Tell me about your project. The more details the better.

"*" indicates required fields