Divi Documentation

Follow the instructions below to install and configure your new theme

« Back to Documentation

Advanced Design & Custom CSS Settings

More Design Control For Those Who Need It

Whenever you edit a module, row or section, you will notice three tabs in the settings popup: General Settings, Advanced Design Settings and Custom CSS. Everything you need to create awesome Divi Layouts and take full advantage of each module can be found in the General Settings tab. However, if you want even more control over the appearance of the module then you can venture in to the Advanced Design Settings. If you are a developer and you want to use your own CSS instead of using the design controls in the Advanced Design Settings, then you can venture further into the Custom CSS Tab. When combined, there is nothing that can't be customized.

Advanced Design Settings

Advanced design settings vary from module to module. For each, we have added all the possible design settings that you could ever want into the Advanced Design Settings tab, and kept all of the basic/more commonly used design settings in the General Settings tab. As a general rule, if there is something you can't do on the design-level within the General Settings tab, then you are free to venture into the Advanced Design Settings tab. Due to the sheer breadth of settings available for certain modules, we have separated them into their own tab so that the general settings are not overwhelmed.

To locate and use the Advanced Design Settings, simple edit an existing module, row or section (or create a new one) to open up the settings popup. Next click on the Advanced Design Settings tab to reveal the design controls.

From within this tab you can do just about anything. Settings will vary depending on the type of module you are editing. Typically you will find options to adjust typography (such as text size, letter spacing, line height, etc), spacing adjustments (such as custom padding and margin values), color options (such as text color, overlay color, column BG colors) as well as a slew of unique settings for certain elements. Utilizing these design options can create some truly unique looking designs that are not possible with only the General Settings.

Custom CSS Settings

In the Advanced Design Settings tab, we have created so many options that you can do just about anything that can be done with CSS (without touching a line of code). If you are a developer, however, you might prefer to write your own code instead of using our custom design controls. In this case you can use the Custom CSS tab, which can be found right next to the Advanced Design Settings tab in the modal settings window for modules, rows and sections.

In this tab we have broken down all of the structural elements of the module, and given you text area fields where you can type in your own CSS. Using this panel you can apply CSS to individual parts of the module. For example, you could apply custom CSS directly to a Blurb Icon, or create your own :after pseudo element right from the Divi Builder. Using these settings removes the need and the hassle of creating Child Themes, and allows you to easily target CSS to individual modules on individual pages.

Join 385,236 Happy Customers And Get Access To Our Entire Collection Of 87 Beautiful Themes For The Price Of One

We offer a 30 Day Money Back Guarantee, so joining is risk-free!

Sign Up Today