< All Topics

Have you seen those cool rolling numbers on websites recently stating fun and useful facts about an Agency or an NGO? We call them Number Counters. You can also use it to show your achievements look more awesome and interactive.

Pro tip
Showcase your achievements using cool rolling numbers on your website’s about page. Make them look inspiring by adding real stats about your business.

How to use the Number Counter Widget of The Plus Addons For Elementor

The Number Counter widget comes with different styles and a plethora of customization options that you can use to add stylish looking number on your website.

Table Of Contents

General Steps

Search for the Number Counter Widget widget from the Elementor screen in the left and then drag and drop it into the content building area.

After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Style Counter

Edit Style for the Number Counter Widget.

Style

Select your preferred counter style from the dropdown. We have provided you with two styles to choose from. Choose any one based on your preference..

Style 1
This style stacks the icon, number, and text to the center.

Style 2
This style stacks the icon, number, and text to the left. Select your preferred Audio Player style from the dropdown. We have provided 9 different styles to choose from. Keep switching the styles to see the different design layouts and settle on one.

Title

Edit your title here.

Alignment

Set the position of your counter to left or right.

Number Counting

Number Value

Enter the value of the number/digits you want to showcase in the icon counter. E.g, 100, 999, etc.

Animation Starting Number Value

Enter the digit from which you want to start the animation on scroll. E.g. 0,10,80, etc.

Number Gap For Animation

Enter the value of the number/digits you want while the animation is in progress.

Time Delay In Animation Gap

Set the time delay for the animation. Set this on a lower side for the counter to run fast.

Symbol

You can add any value in this option which will be setup as a prefix or postfix on Digits. e.g. + , %, etc.

Symbol Position

Set the position of the symbol. It can be set before or after the digit.

Icon

Select Icon

We have provided three options for setting up the icon.

Icon – Use any icons from popular font families like FontAwesome or Icons Mind.
Image – Set a custom icon image if you have it. Click to choose the image from your computer.
SVG – Here you can use a pre-built SVG or a Custom Upload. Select any one option to set your desired SVG icon.

Link

Set a URL for your Counter Title. Click on the gear icon for more advanced link options.

2. Style

The Style tab is used for customizing the appearance of all the Number Counter widget components.

Style

This option lets you set the style of your icon. Use the provided cosmetic options to set the icon style.

Title Style

Set the typography of the title, change the colors, and adjust the spacing as per your needs.

Digit Style

Set the typography of the digit, change the colors, and adjust the spacing as per your needs.

Background Options

Change the background here. Add border and box shadow as per your requirements.

Extra Options

Adjust the number counter box padding, make it vertically center, and set the hover effects.

Style

This option lets you set the style of your icon. Use the provided cosmetic options to set the icon style.

3. Advanced

Advanced Options are a common option for almost all widgets. So, we have written a detailed tutorial on how to use these options.

View Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?