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.
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.
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.
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.
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.
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.