Counter Up
Numbers tell a powerful story – especially when they animate right before your visitors eyes. The Counter Up element turns your key statistics into engaging, dynamic displays. Showcase your happy clients, projects completed, or any important metric with a smooth counting animation that starts from zero and rolls up to your final number. Arrange multiple counters in a clean grid, add icons or images, and style every detail to match your brand. It’s the proven way to build trust, highlight achievements, and add a touch of modern interactivity to any section of your site.
Flexible Multi-Column Grid Layouts
Don’t just show one stat – showcase a suite of achievements. Add multiple counter items, then arrange them in a responsive grid. Choose from 1 to 6 Columns to perfectly fit your layout, whether in a tight footer or a spacious hero section. The grid automatically adjusts and stacks beautifully on mobile, ensuring your stats look great on every device. This structure is perfect for creating those classic “Milestones” or “Fun Facts” sections.
- Responsive Grid System: Arrange counters in up to 5 columns for desktop, with automatic stacking on tablet and mobile.
- Unlimited Counters: Add as many counter items as you need -clients, projects, hours, cups of coffee, anything.
- Balanced Spacing: The grid maintains consistent spacing and alignment for a professional, balanced look.
Smooth Animated Counting
The magic is in the motion. Instead of showing a static number, the counter starts at 0 and smoothly animates up to your target number (like 6000+). This subtle animation grabs attention, emphasizes growth, and makes the statistic feel more significant and earned. You control the final number, prefix/suffix (like the “+” symbol), and the pacing of the count for the perfect dramatic effect.
- Attention-Grabbing Motion: The rolling count naturally draws the visitor’s eye to your key metrics.
- Customizable Format: Add prefixes (like “$”) and suffixes (like “K” or “+”) to your numbers.
- Controlled Duration: Influence the speed of the counting animation to match your site’s pace.
Complete Visual Customization
Your counters should look like an integral part of your design. Style the overall Counter Box with background colors, padding, margins, borders, and shadows. Then, customize each component: the Icon/Image (size, position, background), the animated Number (color, typography), and the Title below it. You have independent control over colors, fonts, and spacing for every part, allowing for endless creative combinations.
- Individual Component Styling: Style the icon, number, and title independently with separate colors and typography.
- Icon & Image Flexibility: Use icons from any enabled library or upload custom images as visual anchors for each stat.
- Professional Framing: Use box shadows, border-radius, and background colors to make each counter item pop.
Frequently Asked Questions For Counter Up
Does the counting animation replay every time someone scrolls past it?
Typically, the animation triggers once when the element first comes into the viewport during a page load. If the user scrolls away and back, it usually won’t replay unless the page is refreshed. This prevents the animation from becoming repetitive and distracting.
Can I use images instead of icons for the counter graphics?
Yes! In the Icon Settings, you can choose to upload a custom image instead of selecting an icon. You can then control the image size and positioning, allowing you to use logos, custom illustrations, or photos to represent each statistic.
Will having multiple counters with animations slow down my page?
The animation is lightweight and uses efficient JavaScript. Having 4-5 counters on a page has a negligible impact on performance. However, as with any page element, if you have dozens of counters, it’s good practice to test your page speed. The main performance factor is always your image/icon optimization.
What’s a good use case for a single-column counter layout?
A single-column layout is perfect for sidebars, narrow sections, or when you want each counter to be a major focal point on its own line, perhaps with a larger icon and more detailed description below the title.
Can I make the counter start from a number other than zero?
The classic and most engaging effect is counting from 0 to your target number, as it visually emphasizes the growth or accumulation. The settings shown are focused on that effect. For starting from another number, you might need to explore custom code or check for an advanced setting in the widget.
Are the counters compatible with Elementor's dynamic data?
The Counter Up element is primarily designed for manually entered, static numbers that represent a fixed milestone or achievement. For displaying dynamic data that changes automatically (like a live visitor count), you would typically need a different, more specialized widget or integration.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
Post/Page Duplicator
