Who This Is For / When to Use
Use the Number Counter element if you want to:
Highlight key performance metrics or milestones
Add animated visual emphasis to important numbers
Display statistics in a grid or single-metric layout
Reinforce credibility using social proof or business data
This element is commonly used on homepages, landing pages, funnel steps, and about pages.
What the Number Counter Element Does
The Number Counter element animates numbers from a starting value to an ending value when the element scrolls into view.
Each counter can include:
A numeric animation
A caption or label
An optional image or icon
Optional prefix and suffix text
Multiple counters can be displayed within a single element.
Key Features
Multiple Counters in One Element
Add unlimited counters inside a single Number Counter element
Display one metric or a grid of multiple metrics
Start and End Values
Each counter can start and end at different values
Useful for growth metrics or percentage-based visuals
Prefix and Suffix Support
Add symbols or text before or after numbers
Common examples include
$,%,+, orK
Automatic Number Formatting
Large numbers are automatically abbreviated
Example:
2,500,000displays as2.5M
Counter Images
Optional image or icon per counter
Helps visually reinforce meaning (e.g., users, awards, revenue)
Layout and Grid Controls
Choose how many counters display per row (1–5)
Adjust spacing between counters
Control image size and alignment
Viewport-Based Animation
Counters animate only when visible on screen
Prevents unnecessary motion and improves performance
How to Add a Number Counter to a Page
Open a funnel or website in the builder.
Click the + (Add Element) icon.
Select Number Counter from the Elements list.
Drag the element onto your page.
How to Configure Counters
Add a Counter
Open the General tab in the Number Counter settings.
Click Add Counter.
Repeat for each metric you want to display.
Set Counter Values
For each counter:
Set the Start Value
Set the End Value
Enter a Caption (label text)
Each counter operates independently.
Add Prefix or Suffix
Use Prefix to add text before the number (e.g.,
$)Use Suffix to add text after the number (e.g.,
%)
These apply per counter.
Add an Image (Optional)
Upload or select an image for the counter
Adjust image size using the Image Size control
Layout and Animation Settings
Counter Layout Options
Number of columns (1–5)
Space between counters
Image size per counter
Animation Controls
Set animation duration (in seconds)
Animation triggers when the element enters the viewport
Styling Options
Under the Styles tab, you can customize:
Number typography and size
Caption typography and size
Text colors
Background colors
Borders and box shadows
All styling applies without affecting other page elements.
Common Issues and Fixes
Counter does not animate
Ensure the element is visible in the viewport.
Preview or publish the page to test animation behavior.
Numbers appear too large
Reduce number font size or use automatic abbreviation.
Consider using a suffix like
KorM.
FAQ
How many counters can I add to one element?
You can add unlimited counters within a single Number Counter element.
Can counters start from numbers other than zero?
Yes. Each counter has its own Start Value and End Value.
Can I control how fast the numbers animate?
Yes. You can adjust the animation duration from 1 to 15 seconds.
Do counters animate on page load?
No. Counters animate only when they scroll into view.
Can I display counters in a grid layout?
Yes. You can display between 1 and 5 counters per row.
Can I add symbols like currency or percentages?
Yes. Use the Prefix and Suffix fields for each counter.