Elegant Themes released the Divi 3.1 Developer update in late April. Since then we have been hard at work updating our plugins to add support for the Visual Builder.

We are excited to announce those efforts have come to fruition with the latest version of the Divi Module Builder plugin.

In the latest version of the plugin, you will see a new checkbox when creating or editing a module – “Activate partial VB support for this module”. After checking this option and updating or publishing your custom module, you will now be able to edit the module in the Visual Builder and see a live preview of the changes.

Partial Visual Builder Support Limitations

Currently the only limitation is custom javascript. If your module uses custom javascript to change the appearance or functionality of your custom module, those changes will not be reflected in the live preview of the Visual Builder.

What is “Partial” Visual Builder Support?

Elegant Themes has defined three types of module compatibility for the Visual Builder:

• No Compatibility
• Partial Compatibility
• Full Compatibility

No Compatibility

Modules that have no compatibility can still be edited in the Visual Builder, but will not display a live preview of the module when the page is loaded or when module settings are changed. Custom Modules created by the Divi Module Builder that do not have the new Activate partial VB support for this module option checked will have no compatibility and therefore no live preview.

Partial Compatibility

Modules that have partial compatibility can be edited in the Visual Builder and will display a live preview of the module when the page is loaded and when the module settings are changed. The live preview is rendered using AJAX. Custom Modules created by the Divi Module Builder that have the new Activate partial VB support for this module option checked will now have partial compatibility and therefore live preview (unless they fall under the limitations listed above).

Full Compatibility

Modules that have full compatibility can be edited in the Visual Builder and will display a live preview of the module when the page is loaded and when the module settings are changed. They will behave just like the official modules included with Divi. The difference between partial compatibility and full compatibility are the rendering methods used to create the live preview. Modules that have full compatibility are rendered using React.js, which is faster than AJAX.

Why Are Divi Module Builder Custom Modules Limited to Partial Compatibility?

As described above, full compatibility for modules requires using React.js to render the module preview in the Visual Builder. Unfortunately, this is not possible for custom modules created using the Divi Module Builder plugin. React.js requires passing HTML output through special syntax in order to render the HTML in the Visual Builder live preview. Without advanced knowledge of the HTML output, it is impossible to successfully integrate it with the required React.js syntax.

Is Partial Compatibility “Bad”?

The only difference between modules with full compatibility vs modules with partial compatibility are the methods used to render the live preview of the module while editing the module in the Visual Builder. Full compatibility modules use React.js. Partial compatibility modules use AJAX. Everything will work exactly the same. Both modules will show a live preview. AJAX is just not quite as fast at rendering the live preview as React.js. This does not affect the speed at which the module is outputted on the front-end of the page or post it is added to. It only affects the speed of the live preview while editing the module in the Visual Builder.

How Does This Affect the Divi Module Importer Plugin?

The latest version of the Divi Module Importer plugin also has partial Visual Builder support. If partial VB support was added to a custom module using the Divi Module Builder, that module will also have partial VB support when imported into a site using the Divi Module Importer (unless it falls under the limitations listed above).

Are Custom Modules Compatible with Versions of Divi Prior to 3.1?

In order for us to add partial VB support to modules, we unfortunately had to break compatibility with custom modules and versions of Divi prior to Divi 3.1. The Developer API released with Divi 3.1 uses different methods than previous versions of Divi. We had to choose between maintaining compatibility with older versions of Divi and adding partial support for the Visual Builder. Elegant Themes seems to be moving away from the backend Page Builder, so we decided to move in the same direction.