Browse practical Divi tutorials, fixes and customization tips from Divi Booster. Find step-by-step guides for improving Divi modules, fixing common layout issues, customizing design details, and getting more from your Divi site.
Many of these tutorials show manual Divi fixes and code snippets. Divi Booster gives you 100+ extra Divi settings - no custom coding required.
Looking for a specific Divi module, setting or fix? Search the tutorials below.
On the Divi theme, when you open a drop-down menu and hover over a particular menu item, the item's background color is changed to highlight the item. If you want to change this color, or get rid of the hover effect (by setting its color to the same as the actual...
The Divi Theme’s portfolio module gives you the option of displaying your projects as a series of thumbnails (grid view). To adjust the size and spacing of the images in your thumbnail grid, you can use the following CSS:Related Post: Adding CSS to the Divi Theme It...
To change the height of the Divi Theme header, you can do so by adding CSS to Divi, like so:A couple of notes: This sets the minimum height rather than the absolute height to allow the header to grow if you add more content too it. The first min-height sets the...
To change the background color in the Divi Theme, you can do so by adding CSS to Divi, like so: #main-content { background-color: green !important; } This will set the background on the main content, but leave the header and footer untouched.
If you'd like to change the default font size in the Divi Theme, you can do so by adding CSS to Divi, like so: body { font-size:130% !important; } This will change the font-size of many components, such as there text in fonts, in the footer and in the sidebar. Note...
Need to add PHP code to Divi? The right method depends on whether the code needs to output something inside a Divi layout, or run more generally across your site. Divi’s built-in Code Module does not run PHP. It is intended for HTML, CSS, JavaScript, shortcodes and...
If you'd like to hide the navigation links (including the search icon) in the Divi Theme's standard header, here are several options.Hide the Divi Header Menu within Divi Settings It's possible to remove the menu links and search icon within Divi itself. To do so: 1....
The Divi Theme header has a default scroll effect which sees it "shrink" to a more compact version as you scroll down the page. If you'd like to keep the header at full-size as you scroll down the page, you can do so using either of the two methods below.Stopping the...
To make Divi Theme's slider button links open in a new tab, you can add the following into the footer.php file (of the theme itself, or a child theme): <script> jQuery(function($){ $('.et_pb_more_button').attr('target', '_blank'); }); </script> This is...
The Divi Theme comes with a map module that makes it easy to embed Google Maps into your webpages. Here's a quick cross-browser CSS snippet for displaying the map in greyscale rather than the standard Google Map colors:
