Number Counter Element in Funnels & Websites

Number Counter Element in Funnels & Websites

The Number Counter element allows you to turn raw statistics into eye-catching, animated highlights that capture attention and reinforce your brand’s successes. Whether showcasing revenue milestones, client satisfaction metrics, or social-proof statistics, this widget adds a dynamic element to your pages. By presenting your achievements in a visually engaging way, it helps to create more compelling content that grabs visitors’ attention and enhances user experience.

Key Features and Benefits:

• Multiple Counters, One Element: Easily add as many counters as needed—whether it’s a single statistic or a full grid of achievements.
• Smart Number Formatting: Automatically abbreviates large numbers (e.g., 2,500,000 becomes 2.5 M) for clean, easy-to-read metrics.
• Prefix & Suffix Controls: Add currency symbols, percentages, or custom text before or after your numbers for added clarity and context.
• Counter-Specific Images: Attach images like icons or logos to counters for immediate visual context and recognition.
• Layout Customization: Control how many counters appear per row, adjust spacing, and ensure perfect alignment with pixel-perfect gap control.
• Viewport-Aware Animation: The animation only triggers when the counter comes into view, ensuring smooth performance without wasting motion.
• Complete Styling Suite: Customize colors, borders, box shadows, and backgrounds to match your brand’s aesthetic.

How to Use It:

1. Add the Element: Navigate to Sites on the left > Funnels/Websites at the top and open the builder. Drag the Number Counter element onto your page from the element menu (+ icon).

2. Add Counters: Click “Add Counter” for each statistic you want to display. You will find it in the ‘General’ view.

3. Set Values: Enter the starting and ending numbers, then add any desired prefix or suffix. You will find it in the ‘General’ view.

4. Attach Images: Optionally add an image (like an icon or logo) to each counter and adjust the size using the image size slider.

5. Customize Layout: Set the number of counters per row (1–5) and adjust the spacing between counters.

6. Style Your Counter: Use the color pickers for number, caption, counter background, and container background. Apply border and box-shadow options as needed.

7. Tune Animation: Adjust the duration of the animation and verify the viewport trigger to ensure smooth performance in the preview.

Pro Tips:

• Focus on Key Metrics: Use the counter to highlight your most important numbers, such as revenue milestones or key achievements, ensuring they grab attention.
• Optimize for Visual Appeal: Choose images that complement your statistics and reinforce your message for better impact.
• Keep It Simple: Avoid overwhelming your users with too many counters. Select the most significant statistics to create a clear and focused message.

FAQs

Question: How many counters can I add to the widget? Answer: You can add as many counters as needed for your story, whether it’s a single stat or a grid of achievements.

Question: Can I customize the size of the counter images? Answer: Yes, you can adjust the size of the images using the image size slider to ensure they fit perfectly within the layout.

Question: What kind of numbers can I display in the counters? Answer: You can display any numeric values, and the widget will automatically format large numbers into easy-to-read abbreviations (K, M, B, etc.).

Question: Can I control the animation speed of the counters? Answer: Yes, you can set the duration of the animation from 1 second to 15 seconds for each counter.

Question: Will the counter animation play when the page loads? Answer: No, the animation starts only when the counter scrolls into the user’s view, ensuring smooth performance and enhancing user experience.

Question: Can I make the counters start from different numbers instead of zero? Answer: Yes, you can set unique starting values for each counter, allowing for more flexible animations that match your data story.

Question: Can I display my numbers in a grid layout? Answer: Yes. You can configure the element to show between 1 and 5 counters per row. This is ideal for creating a “Milestones” section where you can showcase three or four key statistics side-by-side to build immediate credibility with your visitors.