Advanced Field Types For Module Settings
Learn about the Advanced Field types for module settings.
Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.
Advanced fields are added automatically to all modules that are compatible with the latest version of the Divi Builder unless they specifically opt-out. Most advanced fields are configurable. Configuration for advanced fields can be defined in the get_advanced_fields_config() method of the module』s PHP class. To opt-out of an advanced field, simply set its key in the array to false.
Background (background)
The background field allows users to set the module』s background color, gradient, image, and/or video.
Background Field Configuration
css (array) — CSS style configuration
important (bool) — Whether or not styles should include !important
main (string) — CSS selector for the module』s main element
options (array) — Field definition parameter overrides
module_setting_slug (array)
parameter_1 (mixed) — Parameter value
parameter_2 (mixed) — Parameter value
settings (array)
disable_toggle (bool) — Don』t add a Background toggle group to the settings modal
tab_slug (string) — Modal tab slug
toggle_slug (string) — Modal tab settings group toggle slug
use_background_color (bool|string) — Show the background color tab
use_background_color_gradient (bool|string) — Show the background gradient tab
use_background_image (bool|string) — Show the background image tab
use_background_video (bool|string) — Show the background video tab
The accepted values for use_background_color, use_background_color, use_background_gradient, use_background_image, and use_background_video are:
true — Display fields in the module settings and handle frontend markup
false — Do not display fields in the module settings and don』t handle frontend markup
fields_only — Display fields in the module settings but don』t handle frontend markup
Background Field Configuration Examples
Borders (borders)
The borders field allows users to set the module』s border style, color, width, & radius.
Border Field Configuration
Modules can apply borders not only to their outermost container element, but also to elements inside it. Each key in the configuration represents a separate element that will have adjustable border settings. The border field configuration for the module』s outermost container element is set under the default key.
While only parameters that are specific to borders fields are shown below, all of the common field parameters are supported.
default (array)
css (array) — CSS style configuration
main (array) — CSS selectors for the module』s main element
border_radii (string) — CSS selector to be used for border radius styles
border_styles (string) — CSS selector to be used for border styles
defaults (array)
border_radii (string) — Default value for border radius.
Format: link|top-left|top-right|bottom-right|bottom-left
Example: on|3px|3px|3px|3px
border_styles (array) — Default values for border style properties
width (string) — Default value for border width
color (string) — Default value for border color
style (string) — Default value for border style
label_prefix (string) — Text to display in front of the setting label (localized)
suffix (string) — Suffix to append to the setting slug. Not required for default border field
Borders Field Configuration Examples