Divi Design Settings and Advanced Module Settings | Scoreapps

Divi Design Settings and Advanced Module Settings

Divi Design Settings and Advanced Module Settings

You can customize everything over any module using advanced design settings.


Whenever you edit aModule,RoworSection, you will notice that in the configuration pop-up window there are three tabs:

  • Tab Content

  • Design tab

  • Advanced Tab


TabContent

Everything you need to create amazing designs in Divi and get the most out of each module is on the tabContent.

However, if you want to have even more control over the appearance of the module, you can go to the tabDesign.If you are a developer and prefer to use your own codeCssinstead of the design controls offered by the Design tab, you can go even further by entering the tabAdvanced.When used together,There is nothing that cannot be customized.

TabDesign

Design configurations vary from module to module.

We have incorporatedall possible design optionsthat you might need within the tabDesign.

Because of the large number of configurations available in certain modules, they have been organized intodrop-down menus with labelswhich makes it easy to switch between the different groups of options.

You will also find asearch boxvery practical at the top, which makes it easy to quickly find a specific design option.

To locate and use design settings: Edit amodule module module,row roworsectionexisting (or create a new one), the configuration pop-up window will open, click on the tabDesignto deploy all visual customization options.

From this tab, you can do virtuallyof everything. Available configurations will vary depending on thetype of modulethat you're editing.
You will normally find options to adjust:
  • Typography: text size, spacing between letters, line height, etc.
  • Spacing: custom values ofmarginandfilling (padding)
  • Colors: text color, overlay color, column background colors, among others
  • In addition, you will find a lot ofunique adjustmentsfor specific elements according to the module
Leveraging all these design options lets you create something trulysingle and customized.

TabAdvanced

On the tabAdvanced, you can add aCustom CSS IDor aCssto apply your own CSS code from the filestyle.cssof yourtheme child.

If you want to avoid the need and complication of creating child themes, you can apply CSS directly to individual modules on specific pages using the drop-down menu optionsCustom CSS.

Here we have broken down all the structural elements of the module and offer you text fields where you can write your own CSS properties directly.

You can apply CSS to specific parts of the module from this dashboard.
For example: Apply custom CSS directly to aBlurb module icon, ca pseudo-element::afterdirectly from theDivi Visual Builder

You can also control thevisibilityof an element (section, row, module) using the optionVisibilityor modifying the behavior of the element, such as making itsticky(sticky) on the page, among many other functions.