This article will show you how to use the new Number Counter Widget to highlight your most important metrics in a bold, animated way! From revenue milestones to happy clients and social-proof stats, the Number Counter transforms plain numbers into dynamic visuals that grab attention and reinforce your brand story.

TABLE OF CONTENTS

• What is the Number Counter Widget?
• Key Benefits of the Number Counter Widget
• How To Use the Number Counter Widget
• Important Notes
• Frequently Asked Questions
• Next Steps

What is the Number Counter Widget?

The Number Counter Widget is a fully customizable element you can add to any page to animate important numbers. By turning static data into moving visuals, you create an engaging, professional impression that showcases your biggest wins at a glance.

Key Benefits of the Number Counter Widget

Animated numbers do more than decorate your page — they help capture attention and instantly communicate credibility. Here’s why this widget is a game-changer:

• Visually highlight your most important metrics and milestones.
  
  

• Boost trust and social proof with real-time stats in an engaging format.
  
  

• Flexible design options to fit minimalist or bold branding.
  
  

• Animation triggers only on scroll, ensuring smooth performance and user experience.
  
  

• Save time — no code needed!
  
  

How To Use the Number Counter Widget

Follow these easy steps to create your animated metrics section:

1. Drag the Number Counter Widget onto your page from the widget library.
   
   

2. Add Counters:
   
   

   • Click “Add Counter” for each stat you want to highlight.
     
     

3. Configure Values:
   
   

   • Set the start and end number for each counter.
     
     

   • Add a prefix (e.g., $, +) or suffix (e.g., %, M) to match your metric style.
     
     

4. Attach Images (Optional):
   
   

   • Upload an icon, logo, or badge for each counter to add context.
     
     

   • Use the Image Size Slider to adjust image dimensions.
     
     

5. Customize Layout:
   
   

   • Choose the number of counters per row (1–5).
     
     

   • Adjust gap control to fine-tune spacing between counters for a polished look.
     
     

6. Style Your Widget:
   
   

   • Choose colors for the number, caption, counter background, and container background.
     
     

   • Add borders and shadows to align with your brand aesthetic.
     
     

7. Set Animation Options:
   
   

   • Define animation duration (1 s – 15 s) to control how quickly numbers count up.
     
     

   • Use the viewport trigger so numbers animate only when scrolled into view.
     
     

8. Preview and Publish:
   
   

   • Check animations and layout in preview mode to ensure everything looks perfect.
     
     

Important Notes

• Numbers are auto-formatted (e.g., “2500000” becomes “2.5 M”) to keep large stats clean and easy to read.
  
  

• Images are optional and can be toggled on or off per counter.
  
  

• The animation triggers only once per page load to maintain smooth performance.
  
  

Frequently Asked Questions

Q: Can I add different colors to each individual counter?
 Currently, global styles apply to all counters for consistency. You can adjust background or container color globally.

Q: Can counters include decimals?
 Yes! You can include decimal points in start and end numbers.

Q: Will the animation restart if I scroll back up?
 No. The counters animate once when they first enter the viewport.

Q: Do I have to use images for each counter?
 No. Images are completely optional and can be added only where needed.

Next Steps

• Add the Number Counter Widget to your pages to showcase your key achievements.
  
  

• Experiment with layout and animation settings to match your brand’s energy.
  
  

• Use the widget in about sections, sales pages, and client showcase areas for maximum impact.
  
  

• Preview and fine-tune to ensure smooth, engaging animations before publishing.