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.
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...
Some of my fixes for the Divi theme require PHP code to be added to make the required change to the theme. This post briefly covers the various options and their various advantages.To add PHP code to the Divi Theme, you can: Use Divi PHP Code Module - to add PHP...
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:
The Divi theme lets you put your site logo in the header. As you scroll down, the header shrinks to take up less space, and the logo shrinks with it. Here's how to change the height of both the normal and shrunken state of the logo. How to Set the Divi Logo Height...
To add a dividing line between the individual widgets in the Divi Theme's sidebar, we can add the following CSS: #sidebar .et_pb_widget { border-bottom: 1px solid #ddd; padding-bottom: 20px; margin-bottom: 20px; } #sidebar .et_pb_widget:last-of-type { border-bottom:0;...
To change the style of the post titles in the Divi Theme, you use CSS like the following: .single h1 { font-family: Courier; font-size: 30pt; color: green; border-bottom: 1px solid #ddd; } This example change the post title font to Courier, makes the font size bigger,...
Eliminating the bottom border bar from the Divi standard header creates a cleaner and more modern look on your website. This change can help your header blend seamlessly with the rest of the page, offering a sleeker appearance and improved visual consistency. In this...
