Counter

Before setting up the Counter Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Counter Widget—completely free! You can also explore both free and pro widgets using the filter options.

Introduction

The Counter Widget displays animated numbers—perfect for highlighting stats or milestones with customizable styles.

Key Use Cases for the Counter Widget in Elementor:

• Use the Counter widget to highlight statistics, milestones, or achievements dynamically.
• Display real-time data with engaging animations to enhance user interaction.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Activate the Counter Widget?

• Go to Animation Addons → Elements in your WordPress dashboard.
• Find the Counter Widget in the list.
• Toggle it on to enable the widget.

How to Add the Counter Widget in Elementor:

• Open the page where you want to add the Counter Widget.
• Launch the Elementor editor.
• In the Elementor panel, search for “Counter Widget“.
• Drag the widget to your desired section.

The Counter Widget is now ready for customization!

How to Configure the Counter Widget in Animation Addons:

• In the Elementor panel, search for the “Counter Widget”.
• Drag and drop the widget into the desired section.
• Customize the counter settings using the available options in the Elementor panel.

Your Counter Widget is now ready to use! Use the tabs to personalize number style, animation, and layout for a visually engaging result.

Configuring the Counter Widget in Animation Addons: A Step-by-Step Guide

The Counter Widget in Elementor offers three main tabs: Content, Style, and Advanced, allowing you to customize the number format, animation style, and layout.

Content Settings

Content

In the Content section, you’ll find the following settings:

• Starting Number: The initial value of the counter.
• Ending Number: The final value the counter will reach.
• Number Prefix: Adds text before the number (e.g., “$”).
• Number Suffix: Adds text after the number (e.g., “%”).
• Animation Duration: Sets how long the counter animation lasts.
• Thousand Separator Toggle: Enables or disables the comma separator for large numbers.

• Separator: Defines the character used as a separator (e.g., comma).
• Title: Adds a title to your counter.
• Direction: Controls whether the counter counts up or down.
• Gap: Adjusts the spacing between numbers.
• Separator Button: Enables separator for thousands in large numbers.
• Alignment: Aligns the counter text (left, center, right).

Style Settings

The Style section consists of three parts: Number, Suffix/Prefix, and Title. Let’s explore how to customize each setting.

Number

Customize the font, size, color, weight, and letter spacing for the counter number.

Prefix/Suffix

Adjust the font, size, color, and weight for the number prefix and suffix.

Title

Style the title text, including font, size, color, and weight to match the overall design.

Advanced Settings 

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve now learned how to configure the Counter widget in Elementor to effectively customize and display dynamic counters on your website.

If you need further assistance, feel free to reach out to our support team!