September 8, 2023

Add Dynamic Number Counter on Elementor Loop Grid Posts

Play Video

Have a look at how to add a Number Counter on Elementor Loop Grid Posts to enhance user navigation and visual appeal. This post walks you through the HTML and CSS you’ll need to make it happen.

Why Add a Number Counter on Elementor Loop Grid Posts?

Adding a number counter to your Elementor Loop Grid Posts is like putting up mile markers on a highway—it helps guide your visitors. It’s a small touch that can make your website more navigable and visually interesting.

Setting Up Your Elementor Loop Grid

Before we add the number counter, let’s make sure your Loop Grid is ready. You’ll want to include:

  • Post title
  • Featured image
  • Post excerpt

Think of this as laying down the base coat before you start the actual painting.

Adding HTML for the Number Counter

Alright, let’s get to the good stuff: the number counter. First, you’ll need to insert a small HTML element into your Loop Grid.

  1. Open your Loop Grid in Elementor.
  2. Add an HTML element where you want the number counter to appear.

Here’s the HTML code snippet:

<span class="fraction"></span>

This code is the foundation for your number counter. It won’t look like much now, but it’s essential for the next steps.

Styling and Positioning with CSS

Now, let’s add some style to that number counter. You’ll need to add some custom CSS to your Loop Grid.

  1. Go back to your Loop Grid.
  2. Navigate to Advanced > Custom CSS.

Here’s the CSS code snippet:

body {
  counter-reset: fraction-number;
span.fraction {
  counter-increment: fraction-number;
span.fraction:before {
  content: counter(fraction-number);
  font-size: 20px;
  background: #FF0050;
  border-radius: 100%;
  color: white;
  width: 2em;
  line-height: 2em;
  text-align: center;
  display: inline-block;
selector .elementor-widget.elementor-widget-html {
  margin-bottom: -32px;
  z-index: 9999;
  text-align: center;

Source: Reddit

Each CSS entry serves a specific purpose:

  • counter-reset: Initializes the counter.
  • counter-increment: Increases the counter by one for each post.
  • content: Displays the current counter number.
  • font-size: Sets the size of the numbers.
  • background: Defines the background color.
  • border-radius: Rounds the corners to make it circular.
  • color: Sets the text color.
  • width and line-height: Control the dimensions of the counter.
  • text-align: Centers the number.
  • display: Makes the counter an inline-block element.
  • margin-bottom: Adjusts the vertical position of the counter.
  • z-index: Ensures the counter appears on top of other elements.

Feel free to adjust these settings to fit your design.

Fine-tuning the Positioning

If your number counter isn’t exactly where you want it, you can adjust its position with some additional CSS. The z-index and margin-bottom properties in the original code are your go-to settings for this.

Reordering Elements in the Loop Grid

Feel like changing things up? Elementor lets you easily rearrange the elements in your Loop Grid. Just drag and drop to find the layout that works best for you.


And that’s it, you added a dynamic number counter to your Elementor Loop Grid Posts. Feel free to play around with the CSS to make it uniquely yours!

Required Resources

Elementor Logo
Free Options
Credit to Web Squadron
Web Squadron is a popular YouTube channel dedicated to providing informative tutorials, tips, and insights on web development and design. With a strong focus on WordPress and website builders like Bricks Builder, the channel aims to help users of all skill levels, from beginners to advanced developers, create and optimize their websites. By offering easy-to-understand, step-by-step guidance, Web Squadron provides practical and valuable content.
Add Dynamic Number Counter on Elementor Loop Grid Posts
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.