---
title: "Number Counter: Settings Overview"
url: https://theplusaddons.com/docs/number-counter-settings-overview/
date: 2024-03-18
modified: 2026-04-09
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/Number-Counter_-Settings-Overview-1024x536.jpg
word_count: 803
---

# Number Counter: Settings Overview

## Key Takeaways

- Number Counter widget from The Plus Addons for Elementor showcases figures dynamically with engaging animations.
- Users can set the number value and customize animation settings like Animation Starting Number Value and Time Delay in Animation Gap.
- The widget allows adding symbols, icons, images, or Lottie animations to enhance the number counter display.
- Style options for the Number Counter include managing icon style, title typography, digit color, and background customization.

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.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/number-counter/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Freemium widget. To unlock the extra features, you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Number Counter widget is activated. To verify this, visit The Plus Addons → Widgets → and search for Number Counter and activate. 

## Learn via Video Tutorial:

https://youtu.be/QdlEv0BTkRc?si=wzKceSqrvoTfsz2T

## How to Activate the Number Counter Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle**.**
**

![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-Number-Counter-Activate-3-1024x341.png)

## Key Features

- **Animation** - You can easily [add an animated number counter.](https://theplusaddons.com/docs/animated-number-counter-for-elementor/)

## How to Add a 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.

![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-Number-Counter-Layout-1.png)

In **Style 2**, the icon is placed inline with the number & text.

In the **Title** field, you can add a title to the counter.

![](https://theplusaddons.com/wp-content/uploads/2024/03/Number-Counter-Styles-1.png)

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.

![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-Number-Counter-Number-Counting-1.png)

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.

![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-Number-Counter-Extra-Option.png)

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** **(Pro)** – 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 icon 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** **(Pro)** –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.

![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-Number-Counter-Icon.gif)

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

![](https://theplusaddons.com/wp-content/uploads/2024/03/Tpae-Number-Counter-Style-1.png)

**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 box hover effects (Freemium).

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

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

![](https://theplusaddons.com/wp-content/uploads/2024/03/Number-Counter-Demo-1.gif)

## Frequently Asked Questions

**Q: How do I activate the Number Counter widget in The Plus Addons for Elementor?**
A: To activate the Number Counter widget, go to The Plus Addons u2192 Widgets, search for 'Number Counter', and toggle it on. This step is crucial to ensure the widget is available for use on your pages.

**Q: What are the key features of the Number Counter widget?**
A: The Number Counter widget offers several key features, including the ability to add animated number counters, customize the number value, and include symbols like $, %. These features enhance the visual appeal and functionality of your numeric displays.

**Q: What settings work best for styling the Number Counter in Elementor?**
A: For optimal styling of the Number Counter, adjust settings in the Style tab, including icon size, title typography, and digit color. These adjustments help ensure the counter aligns with your site's overall design and enhances readability.

**Q: Why might my Number Counter not display correctly?**
A: If the Number Counter isn't displaying, ensure that both the Elementor plugin and The Plus Addons for Elementor are installed and activated. Additionally, check that the widget is toggled on in the widgets section.