fbpx

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.

Indicator

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.

Icon/Image

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.

Separator

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

Indicator

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

Additional

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.

SIGNUP NEWSLETTER

Don’t worry we hate spam and we promise you will get only quality news and offer from us.

Missed Black Friday offer this year? Get up for flat 50% discount right now. Check Here

© Copyright 2021 All Rights Reserved by BdThemes

Missed the Black Friday offer this year? Get up for flat 50% discount right now.