How to Add a Counter to the Dynamic Repeater Widget

Backend Preparations

Beforehand you need to create your Custom Post Type and meta boxes, with the help of which you will fill in the information in custom posts.

In our case, let it be Team CPT, in which we add the team members and enrich them with the information using meta fields. You may build any structure and use as many meta fields as you need.

Adding a Repeater Meta Field

To learn the entire process of creating a repeater meta field, check this tutorial.
For this tutorial we used textual fields and here’s what we’ve got:

Listing Template Creation

Adding a new listing item

A detailed guide on how to create a listing template from scratch can be found here.

So, you need to navigate to JetEngine > Listings> Add new option. Then fulfill appropriate fields and create a new listing.

Building listing layout

Once the listing is created, and Conditions are set, you need to create its layout using Dynamic widgets. Check these tutorials to know how to do it.

Dynamic Repeater Widget Set Up

We’ll take a closer look at how to adjust the Dynamic Repeater widget to overview the counter option properly.

Adding dynamic repeater widget

Now you need to drag and drop the Dynamic Repeater widget to the Elementor page:

In the widget’s Content block, select the repeater you’ve made in the Source field and fulfill the Item format block with appropriate repeater name IDs:

To make sure you’re doing everything correct, follow this tutorial:

Enabling counter option

We’ve reached the essence of our tutorial.
Scroll down a bit, and in the Content block, find the Add counter to repeater items toggle. Enable it:

As you can see, here you may adjust it:

• add leading zero before counter items;
• add text after counter number;
• change the position of the counter.

Here’s how it works:

Styling up the counter

Now we can change the appearance of Dynamic Repeater and counter. Switch to Style tab and in General accordion block change the direction, for instance:

Then, open a Counter accordion block and see the variety of settings you can use. Play around with them to get the best result:

That’s all! Easy enough, isn’t it?