Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.

How a custom module looks and behaves inside the builder depends on its level of compatibility with the builder. There are three levels of compatibility available to custom modules: off (this is the default), partial, and on. Custom modules can declare their level of compatibility using the vb_support property in their PHP class definition.

No Compatibility

This is the default setting for all custom modules. Live previews are not shown for modules with no support for the latest version of the Divi Builder. Instead, a generic block will be shown. The module’s settings can still be edited and it can still be moved around on the page.

Partial Compatibility

The builder will attempt to render a live preview via AJAX for custom modules that declare partial support. AJAX rendering is not ideal as it’s much slower than normal rendering and it won’t be suitable in all cases. For that reason, its important that developers test their modules and only declare partial support for modules that can actually be successfully rendered via AJAX.

Declaring Partial Compatibility Example

Full Compatibility

Modules that are fully compatible with the Divi Builder behave just like official modules. They use the builder’s JavaScript API to handle their own rendering inside the builder. You can learn more about that here.

Declaring Full Compatibility Example