Back to contents

How to add a counter to Dynamic Repeater widget

This tutorial outlines what a counter option is in the Dynamic Repeater widget and shows how to adjust it easily.

Dynamic Repeater widget allows displaying the information in the repeating blocks for a more convenient content organization. It may come handy in many spheres. From this tutorial, you’ll learn how to adjust the settings to add counter functionality to your repeater.

Repeater meta field creation

1 Step — 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.

2 Step — 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:

repeater meta field

Listing template creation

1 Step — 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.

listing item

2 Step — 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.

1 Step — Adding Dynamic Repeater widget

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

dynamic repeater widget

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:

dynamic repeater elementor

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

2 Step — 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:

dynamic repeater counter

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:

counter in elementor widget

3 Step — 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:

dynamic repeater style

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

counter styles elementor

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