New instructions coming soon for using Theme Builder in theme versions starting from Divi 4.0! In the mean time, here are instructions for older versions of Divi: So, you've made a custom footer layout and saved it in your Divi Library as a Global Section. Then you...
CSS tweaks
How to increase width of Divi drop-down menu
Sometimes lines of wrapping text for sub-menu items are not what you want! Here's a quick tweak to resolve this... The code below sets the minimum width at 300px. Adjust this as needed for your website. Update accordingly the list item width if you change the sub-menu...
Set a custom color for icons in Divi’s Social Media Follow module
The Divi Social Media Follow module allows you to set the colour of the icon. However, it is really the icon's background colour you are setting, while the icon remains white. Sometimes you don't want that square or circle around your social media icon, but just to...
Set a sitewide overlay hover color in Divi
The default Divi overlay colour (for images, shop product tiles, etc.) is a semi-transparent white that washes out your images. You can change these settings globally for each module in the Module Customizer, or individually in each module's design settings. But with...
How to make a sidebar line for a blog page in Divi Page Builder to match the default post pages
Navigate to your relevant blog page page editor and clone section. Right-click on the section settings icon (3 horizontal lines) and disable the new section on tablet and mobile. (This will be your desktop version with the sidebar line. It may be a good idea to...
How to collapse Divi Page Builder four-column rows into two columns on mobile
In an effort to be mobile-friendly, Divi collapses your 4-column rows into 1 column on mobile. But sometimes the default one-column layout on mobile gets a little tired, or simply doesn't work for your busy page elements. This is especially so when you have several...
How to adjust the layout of lists in Divi to have all text equally indented
If you don't want your list items to wrap around your bullet point for multiple lines, then here's a CSS snippet for you and your Divi website. The following CSS will position your list icons outside of the list content: /* Ul positioning */ .et_pb_text ul,...
How to replace the logo in the Divi navigation header with text
If you’re hoping to use your site title and tagline as the text to replace the logo, you can use the Divi Booster Plugin to do so, and then all you need is a tiny bit of CSS code to hide the logo. This pulls in the site title and tagline from your general settings...
How to apply custom style to text links in Divi
You can edit the colour of your text links in the Divi Theme Customizer. But what if you want more? The default link colour that you set might be generally great, but not work for every link. In addition, you may want to control more about the link style, but not have...
How to add a Google Font to your Divi website
Note: Divi now has Google Fonts built in! You can choose from Google Fonts in your Theme Customizer: How to Globally Change the Website Font in Divi Or you can select your desired Google Font in each module's "Design" settings on a case-by-case basis, if the font is...
How to adjust minimum height of Divi blog post grid tiles for consistency
Due to different title lengths, post summaries in the grid format may display with varying heights. For consistent heights on each grid tile across the rows, adjust the minimum height with the following CSS: /* Adjust Post Tile Height */ .et_pb_post { min-height:...
How to hide the Divi navigation menu
/* Hide Divi Main Navigation Menu */ #main-header { display:none; } #page-container { padding-top:0px !important; margin-top:-1px !important } But what if you want to hide the Divi Navigation Menu on mobile screen sizes only? Try this: /* Hide Divi Main...