Custom Modules — In Depth

Reference pages for the Divi Builder module system. After completing the Create A Divi Builder Module SOP, this section is where you'll spend the rest of your time.

Module surface area

flowchart LR
  A[Module PHP class] --> B[get_fields()]
  A --> C[render()]
  D[Module React component] --> E[render() in JSX]
  B --> F[Field types]
  B --> G[Settings groups]
  B --> H[show_if / show_if_not]
  F --> I[Custom CSS fields]
  F --> J[Compatibility levels]

Pages

Page	What it covers
Defining Module Settings	Required and optional parameters for every setting passed to get_fields(). The full vocabulary you'll use everywhere else.
Advanced Field Types	Field types that need extra parameters: select, range, color, image upload, multiple checkboxes, tiny_mce, and more.
Module Settings Groups	How to organize settings into tabs and toggles in the module settings modal.
Settings Field Visibility	Show or hide a setting based on the value of another setting (show_if / show_if_not).
Custom CSS Fields	Add custom CSS targets (elements inside the module the user can write CSS for) to the Advanced tab.
Compatibility Levels	What "Builder" / "Backend" / "Visual" compatibility levels mean for module behavior and rendering.

Cross-references

• The get_fields() array shape is referenced by every other page in this section.
• For runtime registration of the JSX component, see API.Modules.register.
• For filters that fire during module rendering, see Divi Module Hooks.