Table Of Contents

Advanced Counter Widget

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 web counter 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 Advanced Counter Widget

Inserting the widget is just a matter of drag and dropping. As you see in the screenshot above, just toss the Elementor counter widget into the page you are currently on.

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

Advanced Counter Widget content 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 for the counter widget for WordPress.

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

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 for the Advanced Counter Widget.

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

Decimal Symbol – it will help you to set decimals on the counter.

Decimal places – to set the decimal position.

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


advancedCounter 3 - BdThemes

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

Style Tab

Now, let’s work with the 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.


advancedCounter 4 - BdThemes

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

advancedCounter 5 - BdThemes

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.


advancedCounter 6 - BdThemes

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 of the Elementor counter widget


advancedCounter 7 - BdThemes

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 web counter widget, you can watch the video on the Advanced Counter Widget by Element Pack and also go to our demo page.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.