How to Use the Counter Element

The Counter element is a great way to display statistics, achievements, milestones, or dynamic values on your website. It automatically animates from a starting number to an ending number, making it eye-catching and interactive.

1. Adding a Counter

1. Open the Elements Panel on the left.
2. Find Counter under "Basic Elements."
3. Click, hold, and drag it to your desired position on the page.

2. Configuring the Counter

Basic Settings

1. Click on the Counter to open the settings panel.
2. Set the starting value (e.g., 0 or 500,000).
3. Set the ending value (e.g., 1,000 or 1,000,000).
4. Adjust the duration (1–2 seconds is ideal for visibility).

3. Adding Prefix & Suffix

• If displaying currency, add a prefix (e.g., "$1000").
• For percentages, add a suffix (e.g., "80%").
• Adjust the thousand separator (comma, dot, or space).

4. Choosing a Counter Style

Standard Number Counter

• Displays a simple number animation from start to end.
• Works well for stats like sales, customers, downloads, etc.

Circular Progress Counter

• Displays a pie chart-style progress bar.
• Set the percentage (e.g., 65%) for progress-based visuals.
• Increase the progress width to control thickness.

Line Progress Counter

• Displays a horizontal progress bar.
• Adjust the bar thickness and color for a modern look.

Pie Chart Counter

• Shows a circular graph without text.
• Change the background color and progress color for styling.

5. Styling & Customization

Size & Alignment

• Drag the handles to resize the counter manually.
• Go to Settings → Adjust width & height in pixels or percentage.
• Align to left, center, or right based on your layout.

Color & Effects

• Change progress color, background color, and shadow effects.
• Enable hover effects to make it interactive.

6. Optimizing for Mobile & Tablet

• Check the counter display on tablet & mobile views.
• Resize & adjust alignment for better readability.
• Ensure the duration is not too long, so users see the effect before scrolling past.

Why Use the Counter Element?

Engaging & interactive way to display key statistics.

Customizable styles (number, progress bar, pie chart).

Dynamic animation grabs attention.

Perfect for milestones, stats, and achievements.

The Counter element is a simple yet powerful tool to visually enhance your website with dynamic statistics.