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 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 Clear the Logo in the Divi Navigation Header (to Default Divi Logo)
Why would I want to clear the logo back to the default Divi logo? You probably don't...unless: You work as/for a website agency building multiple Divi sites starting from a backup of a previous or preferred installation. (For a preferred installation, you will most...
How to Hide the Logo from Divi Navigation Header
STEP 1: Log in to your WP Admin panel. 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 (see images). Admin panel (back end): Editing bar (front end): STEP 3: Select...
How to Hide the Logo from Divi Mobile Navigation Header
STEP 1: Log in to your WP Admin panel. 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 (see images). Admin panel (back end): Editing bar (front end): STEP 3: Click on...
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 disable default text in the Divi footer
Your WordPress installation with the Divi theme by Elegant Themes will have a default footer: "Designed by Elegant Themes | Powered by WordPress" Within the Divi theme, there is a simple way to disable the footer text OR write your own custom footer text. Step...
How to Globally Change the Website Font in Divi
NOTE: A module with a different font set in the Design settings tab will override the global font for that module. 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...
How to Push Text to a New Line
by inserting a break tag <br> Step 1: Go to the module settings of the text you wish to edit. Step 2: Click the “Text” tab to make sure you’re working in the text editor, rather than the visual editor. This way you can see and add html. Step 3:...
How to Change the Divi Footer Text
NOTE: These instructions apply when using the Divi default footer, as opposed to a custom footer in the Theme Builder. 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...
How to Change the Logo in the Divi Navigation Header
Step 1: Log in to your WP Admin panel. yourdomainname/admin Step 2: Navigate to Divi>Theme Options in the menu. Step 3: Click on “Upload” to change logo to a new image or an existing one in the media library. Select (or upload) logo image and click...
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...
How to push down Divi blurb icon to align with text
Want to change the vertical alignment of your Divi blurb icon to be better centred with text (e.g. if using without the heading title and more like a icon 'dot point'? The following CSS snippet will push down the icon. Add a custom CSS class (in the "Advanced"...
How to Edit Images in Gallery
Step 1: Log in to your WP Admin panel. yourdomainname/admin Step 2: Select “Pages” from the WordPress admin menu. Step 3: Choose the page you want to edit. (Click on the page's title, or the "Edit" button in the menu that appears when you hover over the...