Meta Box - Divi Integration Walkthrough

Meta Box is now officially integrated with Divi. We have been around for this integration between Meta Box and Divi for a long time. It took a lot of time and effort from us, but now we made it and have the very first version of the integration.

With the integration, you can get any type of data from any custom fields created with Meta Box, and display them in the right format on a page created with Divi. Even the data from cloneable fields or cloneable groups. Like this:

Let’s see what we can do when we have it.

Video Versions

We made two versions of the walkthrough video since a group of Meta Box’s users suggested we have a real human voice on the video for showing more trust in our brand. So, Janessa from our team spent the whole weekend making it.

If you see one of them makes sense to you, please give a thumbs up on one or both of them. That means a lot to us since we will improve the videos in the way based on your votes. We hope that it will help the videos come to you in the most pleasant and enjoyable way.

This is the version with Janessa's voice:

This is the version with the AI voice:

Github Repository

This integration is named MB - Divi Integrator. It’s now available on our website and GitHub for free download, also included in the Meta Box AIO.

Before Getting Started

Pre-Built Custom Fields

I have some typical custom fields for example, including some basic fields, a cloneable field, a normal group, and a cloneable group.

This is the data I input to these fields for demo.

Now, we will use Divi to get and display them on a page.

Get and Display Data from Custom Fields

There are two ways to get and display data from custom fields in Divi:

1. Adding modules provided by Divi and then using the Dynamic Content option to get data from custom fields created by Meta Box. It seems like we're almost done with some other page builders and themes.
2. Using specific modules created by Meta Box.

Each method will have its own advantage, that you can explore when experiencing both of them later. But we highly recommend using the Meta Box’s modules. Let’s go ahead for the reason.

Method 1: Divi’s Dynamic Content

If you want to use the module from Divi when creating a template, you should look for a reasonable module for the matching data.

Notice

There are some limits of the Dynamic Content option from Divi. That’s why we recommend the 2nd method which is more optimal.

For saving time, you can skip this 1st method.

Basic Fields

For the most basic one as text from the Text fields, we obviously should choose the Text module.

Then use the Dynamic Content icon button.

You will see a section for the Meta Box custom fields in the dropdown list. Just choose the name of the field you want.

That’s done for getting the data from the Text field.

Note that the data will not appear right now. Just the name of the custom field display on the template preview. When you go to the page on the front end, you will see the right information.

Move on with the other types of fields such as Single Image or Checkbox List, you can do the same steps.

Media Fields

For media data such as file or video, Divi has no module for file, and has one for video which does not support dynamic data. So, to get data from the File Upload field or the oEmbed field, I choose the Text module instead.

They will return text like this.

Then, you should click on the Enable raw HTML for these modules.

You’ll have the information in the right form.

Cloneable Fields

If your custom field is cloneable, still do the same. I’m adding a Text module to get data from the cloneable Text field.

You also can get the data from subfields of any group.

And a cloneable group is in the same way, but it will not display all the data, fyi.

This is data displayed on the page in the result. You can compare with the ones filled in the fields.

Gallery

As well as, if you want to have a gallery from the images in an Image Advanced field, there is a Gallery module.

But you can not get images from the field since it does not support dynamic content.

Method 2: Meta Box’s Modules

Two New Modules

To shorten the routine as well as break the limits of the Dynamic Content option that Divi provides, we decided to create two new modules.

Instead of considering which module will make the right choice, just choose one of them.

• Meta Box Cloneable module: is for the cloneable field and cloneable group.
• Meta Box Field module: is for all the rest, which are non-cloneable fields.

We believe that it will be clearer and easier to choose with two new modules.

Non-Cloneable Fields/Groups

To get data from the non-cloneable fields, just choose the Meta Box Field module.

Then, choose the location for it as one of the fields.

Only the field name displays as well.

It will be the same with some other typical fields.

On the page on frontend, you will see the data display.

When using dynamic content of Divi, you should use HTML for the File Upload and oEmbed field to set the data display in the right form. But with this block, you should do nothing. Just set the location as the field, then Meta Box will do everything else.

And, they are in the right format already.

For the group without cloneable, we also use this module. Then choose the subfield for the location, instead of the group.

And, the last one, to get all the images from the Image Advanced field, do likewise.

Then, on the frontend, you will see all the images.

You can style them if you want.

Cloneable Fields / Groups

If you have an individual field that is cloneable, you can use the Meta Box Field module to get and display the data.

Then the result will be like this.

All the data will be listed in the same line, and separated by a comma. So, you can style the whole line only. If you want each one of them to be in separate lines, you should use the way exclusively for cloneable ones.

It’s creating a layout for it with Divi.

You should add the layout type as Section.

In the layout, add the Meta Box Field module.

Also set the location for the module as the cloneable field.

Back to the page template editor, then, choose the Meta Box Cloneable module.

In the settings of the Meta Box Cloneable module, choose the name of the layout that we have just created.

And in the Cloneable Field section, choose the name of the cloneable field.

That’s done. Go to the page on frontend, the data is now displayed in different lines.

For the cloneable group. We also create a layout.

In the layout, add a Meta Box Field module for each subfield that you want to get data from.

In the page template, also add the Meta Box Cloneable module.

Set the layout, and the name of the group.

On the page, all the data will fully display.

We believe that now you know why we recommend using the Meta Box’s modules to get and display data from custom fields created with Meta Box. So, just do it!

Last Words

It would be nice if this post is useful for you. Let’s have a try and give us some feedback or suggestions! This is the very first version of the MB - Divi Integrator extension, so your feedback will be worth a lot with us. Thank you in advance!