Note: This tutorial series is intended for advanced users. An advanced 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)partialon
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 could be better, as it's much slower than normal and will only be suitable in some cases.
For that reason, it's important that developers test their modules and only declare partial support for modules that can be successfully rendered via AJAX.
Declaring Partial Compatibility Example
<?php
class MYEX_HelloWorld extends ET_Builder_Module {
public $slug = 'myex_hello_world';
public $vb_support = 'partial';
public function init() {
$this->name = esc_html__( 'Hello World', 'myex-my-extension' );
}
...
}
Full Compatibility
Modules fully compatible with the Divi Builder behave like official modules. They use the builder's JavaScript API to handle their rendering inside the builder.
You can learn more about that here.
Declaring Full Compatibility Example
<?php
class MYEX_HelloWorld extends ET_Builder_Module {
public $slug = 'myex_hello_world';
public $vb_support = 'on';
public function init() {
$this->name = esc_html__( 'Hello World', 'myex-my-extension' );
}
...
}