In this tutorial, we’ll continue the series of displaying images from cloneable fields using Meta Box and another page builder - Elementor. So here we go!

Here is my example:

The example of displaying images from cloneable fields using Meta Box + Elementor

Video Version

Before Getting Started

To get started, we need the Meta Box core plugin to have the framework for creating custom fields. It’s free, so you can download it directly from wordpress.org.

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:

Finally, make sure you have Elementor Pro which has integration with Meta Box.

Step 1: Create a Settings Page

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 Meta Box > Settings Page > Add New.

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.

Create a Settings Page

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

The new Settings Page named Brands appears.

Step 2: Create Custom Fields for the Settings Page

Now, let’s create custom fields. Go to Meta Box > Custom Fields > Add New. I’ll add fields with the following structure:

Field Types of Field ID
Brand Group Group brand_group
Brand Logo Upload Single Image brand_logo_upload
Brand Name Text brand_name

This is a group with 2 subfields inside. It is also set to be cloneable to have more spaces to add different brands' information.

Set this group as cloneable to have more spaces to add different brands' information.

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

Set this group as collapsible to collapse the information of the group field.

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

In the Settings tab, choose the Location as the Settings Page to apply the custom fields.

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 Add more button.

The created custom fields are displayed

Now, enter the brand’s information in the fields and go to the next step.

Step 3: Create a Skin

Go to Elementor Theme Builder > choose Meta Box Group Skin > Add new skin.

Go to Elementor Theme Builder > choose Meta Box Group Skin > Add new skin.

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

Set the settings for the skin, then add the Image element to display the brand logo

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

Go to the Dynamic Tags and find the Meta Box Field to get the image from custom fields

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

Choose the Meta Box Field in the Site section.

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

Choose the name of the field you want to get the image from

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

Add a Text Editor element to this section

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

Style both elements a little bit

Step 4: Display the Logo Section on the Home Page

Let’s edit the homepage with Elementor.

Edit the homepage with Elementor

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.

Add a widget to the homepage to create a section that contains brand information then add a Heading to style

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

Add the Meta Box Group element to display the brands’ logos

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

Set Object Type as Settings page

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.

Set the created-latest group by default

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.

Choose the skin that you’ve created

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

you can configure the display of the brand section like column's number and spacing

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

Here is the result we’ve got:

The final result of displaying images from cloneable fields with Meta Box + Elementor

Last Words

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.

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. Display the Latest Products Section - P4 - Using Meta Box + Zion
  12. Display the Most Viewed Posts - P1 - using MB Views
  13. How to Add Custom Fields to Display Banners using Meta Box Plugin
  14. How to Add Guest Author in WordPress using Meta Box (Part 1)
  15. How to Add Guest Author in WordPress using Meta Box (Part 2)
  16. How to Add Related Posts to WordPress Using Meta Box
  17. How to Build a Hotel Booking Website Using Meta Box - P1
  18. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  19. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  20. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  21. How to Create a Classified Ads Website using Meta Box
  22. How to Create a Product Page - P2 - Meta Box + Oxygen
  23. How to Create a Product Page - P3 - Using Meta Box + Bricks
  24. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  25. How to Create a Product Page using Meta Box Plugin
  26. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  27. How to Create a Recipe - P3 - Using Meta Box and Elementor
  28. How to Create a Recipe - P4 - Using Meta Box and Bricks
  29. How to Create a Recipe - P5 - Using Meta Box and Zion
  30. How to Create a Recipe with Meta Box Plugin
  31. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  32. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  33. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  34. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  35. How to Create a Team Members Page - P4 - Just Meta Box
  36. How to Create ACF Flexible Content Field with Meta Box
  37. How to Create an Auto-Updated Cheat Sheet in WordPress
  38. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  39. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  40. How to Create an FAQs Page -P3- Using Meta Box
  41. How to Create Buttons with Dynamic Link using Custom Fields
  42. How to Create Category Thumbnails & Featured Images Using Custom Fields
  43. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  44. How to Create Menu for a Restaurant - P1 - Using Meta Box and Elementor
  45. How to Create Online Admission Form for School or University
  46. How to Create Online Reservation Form for Restaurants using Meta Box
  47. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  48. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  49. How to Display Images from Cloneable Fields - P2 - with Oxygen
  50. How to Display Images from Cloneable Fields - P3 - with Elementor
  51. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  52. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  53. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  54. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  55. How to Manually Reorder Posts with Meta Box
  56. How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
  57. How to Show the Featured Restaurants Section - P2 - Using Meta Box and Bricks
  58. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

Leave a Reply