Back to contents

JetEngine Dynamic Repeater widget overview

This tutorial provides an overview of Dynamic Repeater widget and its functionality. Make sure you’ve installed JetEngine plugin to have access to it.

With JetEngine Dynamic Repeater widget you can display dynamic repeaters, set for the custom post types and taxonomies that can be added via the meta boxes or when you create a meta field for the post or term and select the Repeater content type.

From this tutorial, you will learn about JetEngine Dynamic Repeater widget functionality and how to display repeating blocks with the help of this widget. So, let’s have a closer look at this process.

Creating a Dynamic Repeater

Step 1 — First of all, open your WordPress Dashboard and navigate to the JetEngine > Meta Boxes section and click the Add New button to proceed.

Step 2 — After that, write down the Meta Box Title. Select Post or Taxonomy option in the Meta Box for field and choose the Type of content that you want this meta box to be applied to. You can also choose certain post types or taxonomies below.

general settings of a new meta box

Step 3 — Then, add a new Meta Field in Meta fields tab. Here you need to write a Label and Name/ID, and also choose the Repeater type in the Field type section. Moreover, you can add description and set width of the meta field.

repeater meta field

In Repeater Fields you’ll see the same three fields. You can give a title for each of them and add as many Repeater Fields as you need. When you’re done with this, click on the Add Meta Box button to continue.

repeater fields
NOTE!
Memorize name/IDs of each of these fields because you’ll need them a little later, or you can just leave this tab open when you go and add a dynamic repeater to the pages in Elementor.
repeater fields

What is more, you are able to add the Posts repeater type and then in the field below select the one you want to display. You can choose among Pages, Media, Products, Variations, Coupons, Contact Forms, Mega Menu Items, etc.

posts repeater field

Step 4 — The next thing you need to do is to navigate to Posts, open the needed post and click the Edit button.

Afterward, click the Add Item button in the Repeater block. Here you can add your items. In the Link field you can add the link, just paste the HTML tag.

Also, you can add Media and Description. When you’re done with all settings click on the Update button and then on the Edit with Elementor.

Post Type in repeater meta field

Step 5 — In the widgets panel, find the Dynamic Repeater widget and drag it to the needed section.

Next, navigate to the Content settings block and select the Repeater in the Source section. It’s your meta field that you’ve created before.

You can render repeater field values with macros in the Item format section. So, now let’s have a closer look at different macros.

Step 6 — First, make sure you know the IDs input in the Meta Fields that are included in the repeater, e.g., ID “link” goes for the Text block.

To add this field as a macros, type in “link” ID into %…% structure.

using a macros for link

In order to display Images with the repeater, you need to add HTML markup for the image link to display it.

Item format for images

To add the Post URL that is added to the repeater sub field, use |post_url_by_id filter inside the macros. E.g., %link|post_url_by_id%.

using a macros for presenting post URL

In case you need to add Galleries in the repeater you need to use |img_gallery_grid filter. Use %gallery1|img_gallery_grid% markup to display the gallery.

using a macros for displaying galleries

You can also add Tables using the dynamic repeater field. Add HTML markup to create the table.

adding tables

Step 7 — Now, let’s come back to the Item format in the Content settings block.

As the first item was Text, so you need to paste the ID of that field. For us it was “link”, so you just type it in. It will look that way – %link%.

The next item that you need to display is an Image. In order to display images with the repeater, you need to add HTML markup to display it.

Then, you need to add the Description item, so you can just copy the code again and paste your link inside it.

displaying an image

Afterward, you’ll see all your items displayed on your page.

Item format for images

There’s also an option to select Item HTML tag, so it’s possible to create tables within the dynamic repeater. Moreover, you can paste Before item markup and After items markup.

Item HTML tag

Step 8 — The last thing here is the Style settings block where you’re able to change the appearance of your Dynamic Repeater items.

How repeater looks on the front-end

In the Style tab you can customize the appearance of the element.

General tab contains settings to change the Direction of value in the Dynamic Repeater fields: to show them horizontally or vertically.
Next, you can change the Alignment – make them display on the left, in the centre, or on the right.
Also, you can apply some Typography characteristics.

In the Items tab, you are able to enable the Fixed item size.
Then here you can set the color, border characteristics, padding, and margin both for Normal and Hover appearance.

The Delimiter tab allows you to change the color and margin for the delimiter.

Step 9 — When you’re done with all settings click on the Publish button and enjoy the result.

Now you know how to add a Dynamic Repeater widget that goes with JetEngine plugin to your website. Hope this tutorial was useful.