Beiträge

Divi Builder - Set default values

Define default values ​​for new Divi and Extra custom modules

The ET_Global_Settings class

If you are developing custom modules for Divi or Extra from Elegant Themes, you will definitely make the decision to insert editable fonts. Unfortunately, it is not done with just inserting them into your module class.

If you only define the fonts in the module class, they will work as expected on desktop computers, but you will get a shift of the font size to 51px on tablets and smartphones.

The reason why this happened is relatively easy to locate. You must set default values ​​in the Divi Builder. These also work on tablets and smartphones and are used until someone changes the corresponding sizes with the help of the sliders.

In the Divi Builder itself, the default values ​​are defined in the class ET_Global_Settings. These can be found under the following path:

(Divi)(Extra)(Divi Builder)/includes/builder/class-et-global-settings.php

Hook to add your own defaults

If you would like to add your own default values, you can use the following hook:

Working example

Here you get a working example, which you can integrate into your plugins. We start with the custom module:

This should be hooked into the following hook: „et_builder_ready“.

Then we create a class with our own defaults:

Decisive are the following values. In our custom module, we have defined the following slug: „$this->slug = ‚et_pb_dawp-breadcrumb'“;

Then in „fonts“ within the „$this-> advanced_options“, we have defined the following indexes: „breadcrumb_links“ and „breadcrumb_title“.

In order to set the default values, we must now combine the slug and the indices  with a hyphen ( – ) between them as shown in our default class.

Then for the font size we add „_font_size“, for the lineheight „_line_height“, for letter spacing „_letter_spacing“ and then extend it with an entry „border_width“ for the borderwidth.

Please note that you can extend this class for your own custom defaults as much as you need it. This means that if you implement several custom modules, you can define all your defaults here at one place.