Category: Divi Tricks

How to vertically centre the content of a DIVI module

A very common trend we see at the moment is the “almost” full screen header – with the real content of the page peeking out at the bottom of the screen, teasing the visitor to scroll down.  This is not only functionally great, but it also looks great.  The trouble is when you make a […]

Divi increase bullet indent and spacing

  Here is a quick CSS snippet to change the indent and spacing of bullets in Divi .et_pb_text ul, .et_pb_text ol { margin: 30px; } .et_pb_text li { margin-top: 16px; }  

Divi Full Width Header module tweaks

Have a fixed height for headers add the following CSS (to Divi Options > Custom CSS): et_pb_fullwidth_header {min-height: 100px;padding: 10px 0 !important;}  

Creating a full screen slider in Divi

This is done by using the Full width slider module and adding some CSS and javascript code. Add full width module, then add full width slider module Give the module a Custom class name of et_fullscreen-slider – this is under the Custom CSS tab, in the CSS Class field Under Divi > Theme Options add the […]

Customising the Divi menu for each page

So you want to have custom colors in the header for each Divi page?  this is definitely possible, and is all related the to unique page ID in WordPress.  you find the unique page ID in the address bar when editing a page in WP admin. Rather than make my own blog about this, you […]

CSS code to customise the Divi built-in color scheme options

Divi includes a number of pre-built color schemes, which is great for businesses with no pre-existing colour scheme.  But in reality most businesses have a logo or brand that uses specific colours – Wouldn’t it be great to easily add the color scheme of the business but continue to use the built-in Divi color scheme […]

Quick CSS snippets for great custom-look websites using Divi

Here are a heaps of snippets I commonly use to make unique websites for clients.  They are generally placed in the Theme Options section, or in the child theme CSS file. Superimpose logo #top-header {z-index: 99999;} #logo { max-height: 220%; margin-top: -32px; z-index: 100000; } @media only screen and (max-width : 980px) { #logo { […]