MB Divi Integration is an extension for Meta Box that integrates Meta Box and Divi theme & page builder. This extention allows you to use Divi to select and show custom fields created by the Meta Box plugin in the builder.
What is Divi?
Divi is one of the most popular themes and page builders for WordPress, made by ElegantThemes. It allows you to build not only pages, but also the whole website layout by replacing the standard WordPress post editor with a vastly superior visual editor. It can be enjoyed by design professionals and newcomers alike, giving you the power to create spectacular designs with surprising ease and efficiency.
Divi has a lot of features that helps you build your website fast and easily:
- Powerful and visual website builder with drag & drop interface
- Easily add effects, hover states, and shape dividers
- Inline and bulk editing for elements
- Layout library
- Custom CSS
- Responsive editing
- Global styles
- And undo, redo, revisions
For more details about Divi, check out their homepage.
What does MB Divi Integration do?
When working with custom fields in Meta Box, a common task is how to output these fields on the front end. While developers can use code or MB Views to display fields, normal users might find it not straightforward.
And if you build your websites with Divi, you see how easy it is to drag and drop content anywhere on the page or layout. And you might wonder if there is a way to drag and drop Meta Box's fields to the page, just like a normal Divi module? Or connect Meta Box's fields to Divi's modules via the dynamic content feature?
That's exactly what MB Divi Integration does. The plugin creates 2 modules for Divi, that you can use them to get value of Meta Box's custom fields and show them on your page or layout. As they're modules for Divi, you can use them as other modules, like putting them in a container, change their color or styles, drag them around, etc. It acts like a connection between the front end (Divi) and the back end (data of custom fields).
This is the most convenient way to output Meta Box's fields in Divi. You don't have to remember the helper functions' names, or work with PHP code to output data. Just drag and drop, visually.
The plugin also extends the dynamic content feature of Divi to connect Divi's modules to Meta Box's fields to show the fields' data in Divi's modules.
This way, you can still display Meta Box's fields while inheriting all settings and power from built-in Divi's modules.
What field types does MB Divi Integration support?
MB Divi Integration works well with all field types for Divi, including cloneable fields and cloneable groups. There are two modules in the plugin:
- Meta Box Field: for non-cloneable fields
- Meta Box Cloneable: for cloneable fields and groups
The plugin will list all available (registered) fields for you to select from, so you don't have to remember their IDs or names:
For cloneable fields or cloneable groups, it's recomended to create a layout first:
And inside the layout, just add the fields you want to display. It's very helpful if you want to display a cloneable groups as you can design how your subfields in the group are displayed:
And on the front end, simply select the Meta Box Cloneable module to display the layout:
What's the difference between Meta Box modules and Divi's Dynamic Content?
Divi already has a feature called Dynamic Content that allows you to connect a module with custom fields to output their data. In many cases, it displays the data correctly, such as for basic field types: text, textarea, select, radio, etc.
However, there are few cases that Meta Box modules work better than Divi's dynamic content:
- By default, Divi's dynamic content display data as text. If you want to output data for oEmbed, file input, etc. you need to enable the option Enable raw HTML in Divi. If you use Meta Box's modules, they take care of this for you and you don't need to do anything.
- Divi's gallery module doesn't support dynamic content! So you can't connect it with image fields in Meta Box like image_advanced or image_upload.
However, as Meta Box's modules are manually built, some style options might lack. If that's the case, you might want to switch to use Divi's modules with dynamic content to have more options.
Video Tutorial
See how to use the plugin to connect Meta Box's custom fields with Elementor in this video:
