How to Use Advanced Counter Widget

element pack

How to Use Advanced Counter Widget

We’ve developed an Advanced Counter Widget so that our users can display the records of their activities through a counter.

The instructions below will get you to walk in the right way to use the widget developed by Element Pack. 

Moreover, I’ll instruct you in different phases of how you can insert & use the widget to design layout for the content (text, image, and video, etc.)  you want to work with and style as well. 

To Insert widget

Inserting widget, it is just a matter of drag and dropping. As you see in the screenshot above.

Content Tab

Using the content tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot.

Counter Layout

Go to the Content tab > Counter Layout.

This section will let you work with the controls such as Counter Start Number and End Number, Counter Text, Text HTML Tag, and Alignment.

And there are also two switcher buttons that are Show Icon and Separator.

When you’re going to activate the Show Icon switcher button, you’ll be provided two controls such as Icon Type, Icon Position, Icon Inline, Icon Vertical Alignment and finally two scrolls bar like Icon Horizontal and Vertical Offset.

Additional Options

Go to the Content tab > Additional Options.

Here, this section holds a few controls like Language, Decimal Symbol, Decimal places, Duration, Prefix & Suffix and also three switcher buttons such as Use Easing, User Grouping, and Indicator.

Language – it will help you to set in what language you want to show the counter.

Decimal Symbol – it will help you to set decimal in the counter.

Decimal places – to set the decimal position.

Prefix & Suffix – it will help you to set word before the counter.


Go the Content tab > Indicator > and check all the controls.

Style Tab

Now, let’s work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the Style tab in Elementor will always give you a fantastic experience.

Let’s have a look.


Simply, go to the Style tab >Icon/Image.

In this section in terms of the mode of Normal, you’ll get able to set Icon Color, Background Type, Color, Image, Padding, Border Type, Radius, Advanced Radius, Box Shadow, Typography, Spacing, Size, Rotate, Background Rotate.

On the contrary, in the mode of hover, you’ll be able to do similar things as of in the Normal Mode.

Counter Number & Counter Text

Go to the Style tab > Counter Number and Counter Text.

In these two sections, you’ll be able to add text color and Typography both in Normal mode and Hover.


Go to the Style tab > Separator.

This section will allow you to set the Separator Type(vague, jemik, line, etc.), Fill Color, Stroke Color, Width, Separator Spacing.


To style the Indicator, go to the Style tab >Indicator > Indicator Style.


Go to the Style tab > Additional.

Video Assist

In conclusion, it seems that you’ve read this article and found it very useful. If you want to know more about the widget, you can watch the video on the Advanced Counter Widget by Element Pack and also go to our demo page.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

A first-ever all-in-one web solution with essential widget, extensions, and features for Elementor WordPress.

Your complete web development partner.


Copyright © 2022 BdThemes.
All Rights Reserved. Site built with Element Pack & Rooten Theme.

AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy Element Pack Pro?

Don’t miss 230+ essential Elementor widgets and 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.