How to Display Images from Cloneable Fields - P3 - with Elementor
Tags: tutorial, elementor, cloneablefields, brandlogo
Published: 2022-07-20 07:10:10


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/excrutxkyytybfi0hgkb.jpg)In this tutorial, we’ll continue <a href="https://metabox.io/series/display-images-from-cloneable-fields">the series</a> of displaying images from cloneable fields using Meta Box and another page builder - Elementor. So here we go!

<!--more-->

Here is my example:

<img class="aligncenter" src="https://i.imgur.com/x5JABan.png" alt="The example of displaying images from cloneable fields using Meta Box + Elementor" width="1000" height="640" />
<h2>Video Version</h2>
https://youtu.be/yqRud-APqgQ
<h2>Before Getting Started</h2>
To get started, we need the <a href="https://wordpress.org/plugins/meta-box/">Meta Box core plugin</a> to have the framework for creating custom fields. It’s free, so you can download it directly from <a href="https://wordpress.org/plugins/meta-box/">wordpress.org</a>.

For the extensions, they’re in the Meta Box AIO. If you haven’t had it, you can download and install each extension individually. The list of extensions we need for this tutorial is as follows:
<ul>
 	<li><a href="https://metabox.io/plugins/mb-settings-page/">Meta Box Settings Page</a>: to create settings pages;</li>
 	<li><a href="https://metabox.io/plugins/meta-box-builder/">Meta Box Builder</a>: to have an intuitive UI to create custom fields in the backend;</li>
 	<li><a href="https://metabox.io/plugins/meta-box-group/">Meta Box Group</a>: to organize custom fields into cloneable groups, where we input images;</li>
 	<li><a href="https://metabox.io/plugins/mb-elementor-integrator/">MB Elementor Integrator</a>: to connect and display custom fields created by Meta Box plugin in the Elementor's dynamic tags.</li>
</ul>
Finally, make sure you have Elementor Pro which has integration with Meta Box.
<h2>Step 1: Create a Settings Page</h2>
Normally, we’ll use a custom post type to create multiple posts for brands. But today I will do it in a more convenient and simple way - creating a setting page. The information about all the brands will be inputted into that page. It means that all of them will be in one place only.

Go to <strong>Meta Box &gt; Settings Page &gt; Add New.</strong>

Since the settings page contains the image and name of each brand only, there’s no special setting for it. I just changed the option name.

<img class="aligncenter" src="https://i.imgur.com/upCEEWJ.png" alt="Create a Settings Page" width="1000" height="701" />

After publishing, you’ll see a new settings page named <strong>Brands</strong> appears as below:

<img class="aligncenter" src="https://i.imgur.com/0etweZJ.png" alt="The new Settings Page named Brands appears." width="1002" height="411" />
<h2>Step 2: Create Custom Fields for the Settings Page</h2>
Now, let’s create custom fields. Go to <strong>Meta Box &gt; Custom Fields &gt; Add New</strong>. I’ll add fields with the following structure:
<table>
<tbody>
<tr>
<td><b>Field</b></td>
<td><b>Types of Field</b></td>
<td><b>ID</b></td>
</tr>
<tr>
<td>Brand Group</td>
<td>Group</td>
<td>brand_group</td>
</tr>
<tr>
<td>Brand Logo Upload</td>
<td>Single Image</td>
<td>brand_logo_upload</td>
</tr>
<tr>
<td>Brand Name</td>
<td>Text</td>
<td>brand_name</td>
</tr>
</tbody>
</table>
This is a group with 2 subfields inside. It is also set to be cloneable to have more spaces to add different brands' information.

<img class="aligncenter" src="https://i.imgur.com/nI7og1l.png" alt="Set this group as cloneable to have more spaces to add different brands' information." width="1000" height="875" />

In addition, I set this group as collapsible to collapse the information of the group field.

<img class="aligncenter" src="https://i.imgur.com/ZCXl2yG.png" alt="Set this group as collapsible to collapse the information of the group field." width="1000" height="873" />

After that, open the <strong>Settings</strong> tab and choose the <strong>Location</strong> as the settings page that we’ve created to apply the custom fields to it.

<img class="aligncenter" src="https://i.imgur.com/aH7KIOK.png" alt="In the Settings tab, choose the Location as the Settings Page to apply the custom fields." width="1000" height="760" />

Back to the settings page, you will see the created custom fields appear and the sub-fields are contained in the group field. Moreover, to add another brand’s information, press the <strong>Add more</strong> button.

<img class="aligncenter" src="https://i.imgur.com/y9vfR1X.gif" alt="The created custom fields are displayed" width="1000" height="300" />

Now, enter the brand’s information in the fields and go to the next step.
<h2>Step 3: Create a Skin</h2>
Go to <strong>Elementor Theme Builder</strong> &gt; choose <strong>Meta Box Group Skin</strong> &gt; Add new skin.

<img class="aligncenter" src="https://i.imgur.com/0FTgqlB.png" alt="Go to Elementor Theme Builder &gt; choose Meta Box Group Skin &gt; Add new skin." width="1000" height="346" />

Set the settings for the skin as you want. Then, add the <strong>Image</strong> element to display the brand logo.

<img class="aligncenter" src="https://i.imgur.com/5Yp7q8R.png" alt="Set the settings for the skin, then add the Image element to display the brand logo" width="1000" height="821" />

To get the image from custom fields created by Meta Box, go to the <strong>Dynamic Tags</strong> and find the <strong>Meta Box Field</strong>.

<img class="aligncenter" src="https://i.imgur.com/mHUQTcn.png" alt="Go to the Dynamic Tags and find the Meta Box Field to get the image from custom fields" width="1000" height="758" />

Since the custom field we created is on the settings page, we choose the <strong>Meta Box Field</strong> in the <strong>Site</strong> section.

<img class="aligncenter" src="https://i.imgur.com/VEkOwof.png" alt="Choose the Meta Box Field in the Site section." width="1000" height="700" />

Then, choose the name of the field you want to get the image from.

<img class="aligncenter" src="https://i.imgur.com/85HlkAI.png" alt="Choose the name of the field you want to get the image from" width="1000" height="505" />

For the brand’s title, add a<strong> Text Editor</strong> element. Once again, go to the <strong>Dynamic Tags</strong> and find the<strong> Meta Box Field</strong> in the Site section and choose the Brand Name option.

<img class="aligncenter" src="https://i.imgur.com/uOd8XDu.png" alt="Add a Text Editor element to this section" width="1001" height="589" />

After that, I’ll style both elements a little bit.

<img class="aligncenter" src="https://i.imgur.com/Ma9aEXQ.gif" alt="Style both elements a little bit" width="1000" height="400" />
<h2>Step 4: Display the Logo Section on the Home Page</h2>
Let’s edit the homepage with Elementor.

<img class="aligncenter" src="https://i.imgur.com/yl9jjId.png" alt="Edit the homepage with Elementor" width="1002" height="562" />

First, I add a widget to the homepage to create a section that contains brand information. Add a Heading for it and style it as you want.

<img class="aligncenter" src="https://i.imgur.com/yExxtLm.gif" alt="Add a widget to the homepage to create a section that contains brand information then add a Heading to style" width="1000" height="400" />

Next, to display the brands’ logos, add the Meta Box Group element.

<img class="aligncenter" src="https://i.imgur.com/xfEddmE.png" alt="Add the Meta Box Group element to display the brands’ logos" width="1000" height="399" />

Set <strong>Object Type</strong> as <strong>Settings</strong> <strong>page</strong> because we’ve just input the data into a settings page.

<img class="aligncenter" src="https://i.imgur.com/TjAZfjH.png" alt="Set Object Type as Settings page" width="1000" height="564" />

After that, it will set the created-latest group by default. Change it to the right one that you want.
All the data from the group will be displayed, but there is no styling.

<img class="aligncenter" src="https://i.imgur.com/Zph2nOn.png" alt="Set the created-latest group by default" width="1001" height="456" />

For styling, choose the skin that you’ve created above. Then, it will turn to the new look with the style of the created skin.

<img class="aligncenter" src="https://i.imgur.com/wLnjmcV.png" alt="Choose the skin that you’ve created" width="1001" height="475" />

Also, you can configure the display of the brand section, such as the number of columns and the spacing between them.

<img class="aligncenter" src="https://i.imgur.com/EZF6ASW.png" alt="you can configure the display of the brand section like column's number and spacing" width="1006" height="208" />

Next, drag and drop the section to your desired position on the homepage.

Here is the result we’ve got:

<img class="aligncenter" src="https://i.imgur.com/x5JABan.png" alt="The final result of displaying images from cloneable fields with Meta Box + Elementor" width="1000" height="640" />
<h2>Last Words</h2>
As you can see, displaying the images from cloneable fields with Meta Box and Elementor is so simple and easy to do without coding. If you have any questions and ideas, leave comments below, and don’t forget to keep track of our channel for more helpful tutorials.