The Number Counter widget from The Plus Addons for Elementor allows you to dynamically showcase figures in style. For instance, If your company has served 5,000+ happy customers, don’t just state a text number. the number counter widget allows you to highlight figures like satisfied customers in motion.
With the Number Counter widget, you can highlight key numeric milestones as the page loads, your figures will animate engagingly.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have The Plus Addons for Elementor plugin installed and activated.
- Make sure the Number Counter widget is activated, to verify this visit The Plus Addons → Widgets → and Search of Number Counter and activate.
Learn via Video Tutorial:
How to Activate the Number Counter Widget?
Go to
- The Plus Addons → Widgets
- Search the widget name and turn on the toggle.
Key Features
- Animation – You can easily add an animated number counter.
How to Add Number Counter in Elementor?
Add the Number Counter widget to the page.
Layout
From the Style dropdown, you can select a style for the number counter.
In Style 1, the icon, number & text are positioned at the center.
In Style 2, the icon is placed inline with the number & text.
In the Title field, you can add a title to the counter.
From the Alignment section, you can align them towards the left, center, or right.
Number Counting
From Number Value, you can set the number that you want to showcase.
You can use Animation Starting Number Value, Number Gap For Animation, and Time Delay in Animation Gap to create an animated number counter.
Extra Option
In the Symbol field, you can add a symbol like $,%, etc., in the counter.
Then, from the Symbol Position dropdown, you set the symbol position before or after the number counter.
Icon
From the Select Icon dropdown, you can select and add an icon to the number counter. Here you’ll find five options –
- None – To display the number counter without any icon.
- Icon – Allows you to add a standard icon to the counter from the Icon Font dropdown.
- Image – Lets you choose and display an image from the Choose Image section.
- SVG – Allows you to add a custom SVG icon to the counter.
- Lottie – Lets you add animated icons using a Lottie file.
Based on your selection, you’ll find different options to add the number counter.
From the Icon Font dropdown, you can select and add an icon based on the chosen Icon Type. Here you’ll find three options:
- FontAwesome – To add classic icons, from the FontAwesome icon library.
- FontAwesome 5 – To add modern icons, from the FontAwesome 5 collection.
- Icons Mind –To add clean and minimal icons, from the Icons Mind library.
Based on your selection, you’ll find different group controls for an Icon Type.
From the Choose Image section, you can select an image for the number counter.
The Image Resolution dropdown allows you to select the appropriate image size.
From the SVG Select Option dropdown, you can select an SVG icon based on the chosen Svg type. Here you’ll find two options:
Custom Upload – Allows you to add a custom SVG icon to the counter from the Only SVG section.
Pre Built SVG Icon – Allows you to add a pre-defined SVG icon to the counter from the Select SVG Icon dropdown.
From the Lottie URL section, you can add a Lottie animation to the number counter using a Lottie file URL.
Then, in the Link field, you can add a link to the icon in the number counter.
How to Style Number Counter in Elementor?
To style the Number Counter, you’ll find all the options in the Style tab.
Icon – From here, you can manage the icon style. You can change the icon style, size, and color, and add a hover effect.
Title – From here, you can manage the title style. You can change the title typography, title color, and add a hover effect.
Digit – From here, you can change the digit typography, digit color, and add a hover effect.
Background Option – From here, you can customize the number counter background border and add a hover effect.
Extra Option – From here, you can add box padding and a box hover effect.
On Scroll View Animation – This is our global extension available for all our widgets, which adds scrolling animation as the widget comes into the viewport. You can learn more about this from here.
Advanced options remain common for all our widgets; you can explore all their options from here.
