Skip to main content
All CollectionsDiviUsing The BuilderDivi Builder Basics
Divi Design Settings & Advanced Module Settings
Divi Design Settings & Advanced Module Settings

You can customize absolutely everything about any module using the advanced design settings.

Updated over a week ago

Whenever you edit a Module, Row or Section, you will notice three tabs in the settings popup windows:

  1. Content tab

  2. Design tab

  3. Advanced tab

Content Tab

Everything you need to create awesome Divi Layouts and take full advantage of each module can be found in the Content tab.

However, if you want even more control over the appearance of the module, then you can venture into the Design tab.

If you are a developer and want to use your own CSS instead of the design controls in the Design tab, you can venture further into the Advanced tab. When combined, there is nothing that can't be customized.

Design Tab

The Design settings vary from module to module.

We have added all the possible design settings you could ever want into the Design tab.

Due to the sheer breadth of design settings available for certain modules, we have separated them into labeled dropdowns that toggle each group of design options.

There is also a convenient Search Options box above all options to make finding a specific design option much easier.

To locate and use the Design Settings, edit an existing Module, Row or Section (or create a new one) to open up the settings popup and click on the Design tab to reveal the design options.

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 background colors) as well as a slew of unique settings for certain elements.

Utilizing these design options can create something truly unique.

Advanced Tab

In the Advanced tab, you can add a custom CSS ID or CSS Class to target and apply your CSS code from your child theme's style.css file.

Suppose you want to remove the need and the hassle of creating Child Themes. In that case, you can easily target CSS to individual modules on individual pages by utilizing the options in the Custom CSS dropdown.

Here, 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 custom CSS properties.

You can apply CSS to individual parts of the module using this panel. For example, you could apply custom CSS directly to a Blurb Icon or create your own after pseudo-element right from the Divi Builder.

You can also control the visibility of an element (Section, Row, Module) by using the Visibility option or changing the behavior of an element, making it sticky on the page, and much more.

Did this answer your question?