Instructions, CSS snippets and tweaks for the Divi Theme
Divi is a versatile theme. But sometimes you still need to customise. For that, we share our helpful hints and snippets.
How to create a custom 404 page layout with the Divi Theme Builder
How to reset colour palette in a page or layout to your Divi Theme Options default
Sometimes you may find that the Divi colour palette on a page has reverted to what it was before you customised it in the Divi Theme Options. While you're trying to select a colour, that easy selection from the colour palette is no longer so simple. But there is a...
How to create a custom footer using the Divi Theme Builder
Use a custom Divi Builder layout for your website footer. Now it's easy with the Divi Theme Builder - no code needed! The Theme Builder was released with Divi 4.0. So make sure you've updated to this theme version or later to use the Theme Builder.
How to change the favicon (browser tab icon) in Divi
Step 1: Log in to your WP Admin panel. yourdomainname/admin Step 2: Navigate to Divi>Theme Customizer. You can do this from the Admin Panel menu, or also from the front using the editing bar. Step 3: Select “General Settings” from the Theme Customizer...
How to add Font Awesome icons to Divi
Divi theme comes with 360 icons (you can find a preview of all the Divi icons here). You can use them, for example, in the blurb modules. But what if you wanted to use a different icon? For example, if you cannot find a suitable icon within the Divi ones. Or you may...
How to fix a custom footer to the bottom of the screen
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...
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...
How to add a Custom Font to your Divi website
Divi now has now made it really easy to use custom fonts on your website - no code required! So make sure you've updated the to latest theme version and follow these instructions: Step 1: In any module with text on your site, click into the module settings. Step 2:...
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...
Creating Global Sections in Divi
You can create a global section in Divi by: A) Building it on a page - for the advantage of being able to preview as you go - and saving it to the Divi Library as a global section; OR B) Create it directly in the Divi Library. A) How to save a Divi section to...
How to add a Global Section to your Divi footer
[Update since Divi 4.0 release: The post below was a method utilised before the release of Divi 4.0 with the Theme Builder. But now, there's no need for any code when you need a custom footer layout. Click here for instructions on how to implement a custom footer...
How to add a footer.php file to your Divi child theme
Haven't created your Divi child theme yet? Do this first: How to create a Divi child theme in simple steps (stylesheet only) Step 1: Log in to your website’s cpanel and click open the “File Manager”. You could also access your site files via FTP (File Transfer...
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 preview the available fonts in Divi theme for WordPress
The Divi theme by Elegant Themes now uses Google Fonts for its in-built font options. This is wonderful news for having plentiful options, but is also a crazy long list of options to choose from without being able to preview. If you were hoping to click through the...