CSS tweaks

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 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 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...

Want more module options for your Divi website?

Check out our Custom Modules for Divi
Browse Custom Modules