{"id":16917,"date":"2019-10-25T10:03:03","date_gmt":"2019-10-25T10:03:03","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=16917"},"modified":"2023-07-28T12:30:06","modified_gmt":"2023-07-28T12:30:06","slug":"how-to-add-a-counter-to-dynamic-repeater-widget","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/","title":{"rendered":"How to Add a Counter to the Dynamic Repeater Widget"},"content":{"rendered":"\n
\n

Repeater meta field creation<\/span><\/h2>\n<\/div>\n\n\n\n

Backend Preparations<\/strong><\/h2>\n\n\n\n

Beforehand you need to create your Custom Post Type<\/strong> and meta boxes<\/strong>, with the help of which you will fill in the information in custom posts.<\/p>\n\n\n\n

In our case, let it be Team <\/strong>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.<\/p>\n\n\n\n

Adding a Repeater Meta Field<\/strong><\/h2>\n\n\n\n

To learn the entire process of creating a repeater meta field, check this tutorial<\/a>.
For this tutorial we used textual fields and here\u2019s what we\u2019ve got:<\/p>\n\n\n\n\"repeater\n\n\n\n

Listing Template Creation<\/h2>\n\n\n\n

Adding a new listing item<\/strong><\/h3>\n\n\n\n

A detailed guide on how to create a listing template from scratch can be found here<\/a>.<\/p>\n\n\n\n

So, you need to navigate to JetEngine > Listings> Add new<\/strong> option. Then fulfill appropriate fields and create a new listing.<\/p>\n\n\n\n\"listing\n\n\n\n

Building listing layout<\/strong><\/h3>\n\n\n\n

Once the listing is created, and Conditions are set, you need to create its layout using Dynamic widgets<\/strong>. Check these tutorials<\/a> to know how to do it.<\/p>\n\n\n\n

Dynamic Repeater Widget Set Up<\/h2>\n\n\n\n

We\u2019ll take a closer look at how to adjust the Dynamic Repeater<\/strong> widget to overview the counter<\/strong> option properly.<\/p>\n\n\n\n

Adding dynamic repeater widget<\/strong><\/h3>\n\n\n\n

Now you need to drag and drop the Dynamic Repeater<\/strong> widget to the Elementor <\/strong>page:<\/p>\n\n\n\n\"dynamic\n\n\n\n

In the widget\u2019s Content <\/strong>block, select the repeater you\u2019ve made in the Source field<\/strong> and fulfill the Item format block<\/strong> with appropriate repeater name IDs:<\/p>\n\n\n\n\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/dynamic-repeater-setup.png\"\n\n\n\n

To make sure you’re doing everything correct, follow this tutorial<\/a>:<\/p>\n\n\n\n

Enabling counter option<\/strong><\/h3>\n\n\n\n

We\u2019ve reached the essence of our tutorial.
Scroll down a bit, and in the Content block, find the Add counter to repeater items<\/strong> toggle. Enable it:<\/p>\n\n\n\n\"dynamic\n\n\n\n

As you can see, here you may adjust it:<\/p>\n\n\n\n

    \n
  • add leading zero before counter items;<\/li>\n\n\n\n
  • add text after counter number;<\/li>\n\n\n\n
  • change the position of the counter.<\/li>\n<\/ul>\n\n\n\n

    Here\u2019s how it works:<\/p>\n\n\n\n\"counter\n\n\n\n

    Styling up the counter<\/strong><\/h3>\n\n\n\n

    Now we can change the appearance of Dynamic Repeater and counter. Switch to Style tab<\/strong> and in General<\/strong> accordion block change the direction<\/strong>, for instance:<\/p>\n\n\n\n\"dynamic\n\n\n\n

    Then, open a Counter <\/strong>accordion block and see the variety of settings you can use. Play around with them to get the best result:<\/p>\n\n\n\n\"counter\n\n\n\n

    That\u2019s all! Easy enough, isn\u2019t it?<\/p>\n","protected":false},"excerpt":{"rendered":"

    This tutorial outlines what a counter option is in the Dynamic Repeater widget and shows how to adjust it easily.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[390],"yoast_head":"\nHow to List Items in Dynamic Repeater Widget \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to create a neat layout for the items added within the repeater meta field. Explore the Counter option and learn how to manage it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to List Items in Dynamic Repeater Widget \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a neat layout for the items added within the repeater meta field. Explore the Counter option and learn how to manage it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T12:30:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/repeater-meta-field.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/\",\"name\":\"How to List Items in Dynamic Repeater Widget \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-10-25T10:03:03+00:00\",\"dateModified\":\"2023-07-28T12:30:06+00:00\",\"description\":\"Learn how to create a neat layout for the items added within the repeater meta field. Explore the Counter option and learn how to manage it.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Add a Counter to the Dynamic Repeater Widget\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to List Items in Dynamic Repeater Widget \u2014 JetEngine | Crocoblock","description":"Learn how to create a neat layout for the items added within the repeater meta field. Explore the Counter option and learn how to manage it.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/","og_locale":"en_US","og_type":"article","og_title":"How to List Items in Dynamic Repeater Widget \u2014 JetEngine | Crocoblock","og_description":"Learn how to create a neat layout for the items added within the repeater meta field. Explore the Counter option and learn how to manage it.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/","og_site_name":"Help Center","article_modified_time":"2023-07-28T12:30:06+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/repeater-meta-field.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/","name":"How to List Items in Dynamic Repeater Widget \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-10-25T10:03:03+00:00","dateModified":"2023-07-28T12:30:06+00:00","description":"Learn how to create a neat layout for the items added within the repeater meta field. Explore the Counter option and learn how to manage it.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-add-a-counter-to-dynamic-repeater-widget\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Add a Counter to the Dynamic Repeater Widget"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/16917"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=16917"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=16917"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=16917"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}