Add Dynamic Number Counter on Elementor Loop Grid Posts

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.

Conclusion

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!