Extension Examples

The following are extension examples that demonstrate how to use the Divi 5 API.

Modules

• Modules - Example of five different types of modules (static, dynamic, parent, child, and converted modules).
• Handling Static CSS and JS — Tutorial: webpack CSS/JS bundling for Divi 4 and Divi 5 extensions.

Custom CSS

• Custom CSS Styles — Tutorial: customCssFields, <CssStyle />, and passing orderClass, baseOrderClass, and isCustomPostType in the Visual Builder.
• Custom CSS Fields — Reference for customCssFields metadata, placeholders, and CPT customPostTypeSelector.

Need Loop selectors in a custom module? See Adding Loop Group.

Modal

• Modal Dev State Monitor - Custom modal that displays various Divi 5' store data states for debugging purposes. Written in TypeScript. (Note: This example is outdated and will be updated soon.)
• Modal Dev Clipboard - Custom modal that displays clipboard data for debugging purposes. Written in JavaScript.