Special Summer Offer! Get up to 40% OFF

How to add Counters to your Website with Elementor for FREE!

Table of Contents

Number counter widget for Elementor is an easy to use widget and perfect way to display your milestones. Let’s say, you have completed 1000+ client projects, you must be really really proud of that (and you should be!) But a simple text line which says that you have completed so many projects, will not do justice to your achievement.

For instances like these, we have created Elementor Number Counter widget. Now you can display your achievements, milestones or journey in numbers in a more elegant manner. The number counter widget displays the number by counting down to the specified digits just like you roll the numbers in a casino lottery machine!

Sounds cool, right? Well, it looks cool too!

This is what the counter widgets looks like in action:

counter widget elementor

You get loads of customization and editing power with this plugin. Let’s see how you can create a achievements section on your website with the Counter widget.


Using Number Counter Elementor Widget

Here we will learn how you can create “Achievements Section” with the Counter widget. For this, you will require the Elementor Builder and the PowerPack Lite Addon for Elementor.

Open the page where you want to add the counters in elementor editor by simply clicking on the Edit with Elementor link for the respective page.

about us page

Once you are in the editor, look for Elementor Number Counter widget and drag and drop it on the page. Now we will begin the customization of the counter.

Elementor Number Counter Widget: Content Tab

In the content tab, you can make changes to the information and data displayed on the counter. Here are the changes I made:

  • Changed the icon for the counter by selecting one from the list.
  • For the number which will be rolling in the counter, I simply entered the number in the counter number field.
  • Changed the Title for the counter using the Title subsection.
  • Enabled the number divider to add more space to the counter.
  • Decreased counter speed to ~1200 using the Settings sub-tab.

elementor counter widget

These were the changes for this specific counter. You can alter the settings as per your wish. Once you have added the number and make the desired changes, we will move on to the Style tab.

Elementor Number Counter Widget: Style Tab

Here you can make changes to how the contents of your counter appear regarding font, color, spacing, etc. Here are the changes I have made in the Style Tab:

  • Changed the Icon‘s color to white, altered the size to 50, and added a bottom margin of 5 px.
  • For the number, switched the color, & changed the font and font style to match the design.
  • Lastly, for the title, changed the color and adjusted the typography of the text.
  • Changed the color of the Number Divider to ‘White’.

elementor counter styling

After making all the changes, this is what a single counter looks like:

Duplicating It!

Since we are creating a full achievements section, we will require more than one counter. So, to make more counters, we will first duplicate the counter we have designed and then we will change the details for each counter from the content tab.

So to duplicate, simply right click on the widget and click on the Duplicate option. Now you can drag and drop the widgets in the respective columns so they look aligned next to each other.

Once aligned, we can change the data in the Counters. We will be changing the Icon, Number, and the Title for the Counters. Rest will remain the same.

Change for respective counters’ details and once you are done, your counter section will look something like this:

Now you can publish the page to set your counters in action. That is it! You have successfully added counters on your page with the Elementor Page Builder.

Summing it up!

This widget can be used in many places. You can check our demo page to see more examples of designs you can make with the Counter widget. If you rather prefer watching a video, here is a video which you can check. This widget is part of the PowerPack lite and you can get loads of functionalities with the Pro version of PowerPack for Elementor. You get access to more than 50 creative widgets which you can use to create your website more awesome!

Chick here to get PowerPack for Elementor.

What do you think of Elementor Number Counter widget? Where are you going to use it on your website? Comment it down!

Liked this Article? Join 5000+ Subscribers

Get latest Elementor updates, tutorials, and freebies in your inbox.
No Spam Guaranteed.
Yashwardhan Rana

Yashwardhan Rana

I am Yash, Content Marketing Head at IdeaBox Creations, we are the makers of PowerPack :) I love good food, gaming and memes. When I am not in front of my laptop, I am either cooking, traveling or attending WordPress meetups.

4 thoughts on “How to add Counters to your Website with Elementor for FREE!”

  1. Can you introduce a delay with each counter, so if you have, say three of them, maybe you see them appear or start counting with a 1 second delay between each, so they don’t end all together?

  2. This is great! I followed everything and works. However I encountered a problem.. When I entered a thousand.. it shows with a comma like. “2,345” instead of “2345” how can I remove the comma.. Sorry I’m new so I’m a little lost.


Leave a Comment

Get 70+ Elementor Widgets with PowerPack Addons for Elementor

Download PowerPack Free

Subscribe to receive latest updates, announcements, offers, deals & discounts.