Help Center
How to Use Dynamic Data Addon from JetTabs DevTools

How to Use Dynamic Data Addon from JetTabs DevTools

From this tutorial, you will learn how to use repeater meta fields created with the help of JetEngine to add dynamic content to the pages via JetTabs widgets.

Before you start, check the tutorial requirements:

  • Elementor (Free version)

  • JetTabs plugin installed and activated with free Dynamic data addon installed and activated

  • JetEngine plugin installed and activated

With the help of the JetEngine plugin, you can display dynamic content using JetTabs widgets, such as Tabs, Image Accordion, and Classic Accordion.

Make sure you have installed the free Dynamic Data addon, and let’s get started.

dynamic data addon

Let’s see how to deal with the Dynamic Settings block after installing the Dynamic data addon. In this tutorial, we’ll do this on the example of the Tabs widget.

Creating Meta Field with JetEngine Plugin

Create a meta box

Primarily, create a meta box in the WordPress Dashboard > JetEngine > Meta Boxes section. Click the “Add New” button, and the settings window will appear immediately.

add new meta box

In the General block, you need to determine the title of the meta box and choose the “Post” or “Taxonomy” type for which you want to adjust the meta box. If you have selected the Post type, you should specify the appropriate post type (in our case, it’s the “Book” post type).

meta box for book post type

Create a meta field

The Meta Fields block allows the creation of meta fields with a repeater. We create the Repeater meta field and fill in the Label and Name/ID bars. 

Press the “New Repeater Field” button to add the field for completing.

repeater fields settings

After that, the section appears where we can add a media repeater field. To do so, fill in the Label and Name. Then find the “Media” option in the Type drop-down menu.

Also, you can specify the Value format or leave it empty to store the image in the default ID format.

Click the “New Repeater Field” every time you need to add one more field to the repeater.
For instance, we add one more Text Field for the image name and Textarea for the description. 

When everything is set, click the “Add Meta Box” button on the right.

Customizing the CPT Item

We open the Book section (our CPT) in the WordPress Dashboard. We are going to add a repeater to each of the CPT items. Click the “Edit” button under the product.

edit button next to the post

Here we can see the created meta box with a repeater field, where we can add media files.

Add the needed amount of items and update the post.

repeater fields in the post

Displaying Dynamic Content via JetTabs Tabs Widget

Create a Single page template

Go to the WordPress Dashboard > Crocoblock > Theme Templates section. Here we click the “Add New” button and create a Single page template in the Elementor Page Builder.
Or press the “Edit/Edit with Elementor” button next to the item over which you hover the mouse cursor.

single template in the list

Add Tabs widget

Find the Tabs widget or any other that supports Dynamic data addon (Image Accordion and Classic Accordion) and place it on the page.

Open the settings of the widget and unfold the Dynamic Settings tab. We need to move the toggle near the Enable dynamic data option and specify the Repeater field name as we have set it before in the Name/ID field of the repeater meta field. 

Set the Image repeater field with the media meta field’s Name/ID, and also, in the following fields, you can specify the other IDs if you have added some before.

tabs widget in elementor

At the Label and Content fields, also write the Name/ID of these fields.

Don’t forget to click the “Update” button below and view the tabs on the front end.
As you can see, everything is displayed correctly on the front end.

results on front end

From now on, you know how to use JetTabs and JetEngine to display dynamic content from the repeater fields.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.