Help Center

How to Add a Counter to the Dynamic Repeater Widget

How to Add a Counter to the Dynamic Repeater Widget

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

Repeater meta field creation

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:

repeater meta field

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.

listing item

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:

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:

https://crocoblock.com/knowledge-base/wp-content/uploads/2023/02/dynamic-repeater-setup.png

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:

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

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?

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.