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.
Editing Pages in WordPress using the Divi theme
From the dashboard, the menu down the left will be where most of your edits will take place: “Pages” is where the top navigation pages are (Home, About, Features, Case Studies, Contact). “Posts” is where your blog articles are. “Media” is where your images are. When...
How to change the colour of Bloom signup form success icon in Divi
If you are using Bloom with your Divi theme, you can choose much of your signup form styling from withing the settings for each signup. But you may want to change the colour of the success 'check mark' icon to match your website's design. Use the following CSS snippet...
How to remove the extra space below a Divi Page Builder blog post
If you are using the divi page builder to create blog posts, you may notice a large space at the bottom of the post. Use the following CSS snippet as a quick-fix to remove that extra space: /* Remove extra bottom padding and margin on posts */ .single .et_pb_post {...
How to horizontally align the Divi fullwidth header buttons
Using two buttons on a divi fullwidth header, but finding them a bit off-centre and not quite neatly aligned on a mobile screen? Use the following CSS snippet to fix: /* Align fullwidth header buttons on mobile */ .et_pb_fullwidth_header...
How to set custom page content width in Divi
Want the page content on your Divi site to fit within a narrower space? First, enable the boxed layout in the Divi Theme Customizer. (Enabling the boxed layout will keep your page container centered on the screen.) Navigate to "Divi>Theme Customizer". Click on...
How to use a Divi icon as a special list ‘dot point’
This example uses the arrow icon. /* custom list icon */ ul.arrow_right { list-style: none; } ul.arrow_right li:before { color: #BC9D63; font-family: "ETmodules" !important; content: "\24 \0020"; } You’ll need to find your particular icon code in the list of...
How to remove sidebar in Divi
This is from an Elegant Themes blog post, where they also give some other method options: https://www.elegantthemes.com/blog/divi-resources/how-to-remove-sidebars-from-divi). /*** Take out the divider line between content and sidebar ***/ #main-content...
How to make a Divi page builder specialty section ‘fullwidth’
Trying to make a specialty section ‘fullwidth’ but getting nowhere in the section and row options? Here’s the CSS snippet to make it happen: Add the class fully_special to the section and add the following css to your stylesheet. /* Make specialty section full width...
How to push down Divi blurb title
Want to change the vertical alignment of your Divi blurb title to be better centred with a left icon? Here’s the CSS snippet to make it happen: /* Align blurb title with icon */ /*Change 8px value to work with your heading size */ .et_pb_blurb h4 { padding-top: 8px...
How to add pdf download link in your Divi WordPress site
Step 1: Log in to your WP Admin panel. yourdomainname/admin Step 2: Click on “Media” from the WordPress admin menu. Step 3: Upload your pdf to the Media Library, by dragging the file from your folders and dropping into the library, or click on “Add New”...
Use [copy] and [year] shortcodes in your Divi custom footer text
Want to include shortcodes in your Divi theme custom footer text? Using a shortcode for the year means the year will always be current and up-to-date without requiring manual edits. Click here for instructions to simply rewrite the default Divi footer text into custom...
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 Protocol) software if you are more familiar with this method. Step 2: Open “public_html” (double-click). Step 3: Open...
Caldera Forms Module – New Form is Not Showing in List
You’ve just installed the Caldera Forms Module by OptimusDivi on your website. You’ve since made a new form and it’s not showing in the list of forms withing the module. This is a browser issue. While you could go into your browser settings and clear your browsing...
How to Change File Permissions
It often happens that when a user installs their first module on a particular website it shows up in the page builder editor, but it displays incorrectly on the front end. This is usually caused by a file permissions issue. That is, the folder does not have correct...
Introducing the Modal Button Module
We have created a custom module for the Divi Page Builder that allows you to use a Divi-styled button to open up a modal window with more content. No longer do you need to create an entire page for a small amount of content. That’s completely unnecessary with this...
How to hide the Divi footer
Want to hide the footer in your Divi themed WordPress site? Here’s the CSS snippet to make it happen: /* Hide footer */ #main-footer { height: 0 !important; overflow: hidden; } How to hide the Divi footer on a particular page/post only Now let’s say you only...