Numbers convince faster than sentences: 5.5K notifications delivered, 120M video views. The Counter Up widget in Master Addons for Elementor puts those stats in a row of cards that count up from zero as visitors scroll to them, each with an icon, a suffix like K+ or M+, and its own styling.
This guide builds a four-stat section from scratch: items, numbers, icons, layout, and the card styling, ending with the finished counters on the live page.
What the Counter Up widget does #
One widget holds a set of counter items. Each item is a stat: a number that animates from zero when it scrolls into view, a prefix or suffix around it, a title beneath it, and an optional icon or image on top. The widget arranges the items in columns and styles them as a group, so a stats band stays consistent without per-card fiddling.
Before you start #
- WordPress with Elementor installed and active.
- Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
- The Counter Up widget enabled in the Master Addons option panel, under Basic Widgets.
- Your real numbers. A stats section with invented figures does more harm than no stats at all.
How to add the Counter Up widget #
In the Elementor editor, search the Elements panel for Counter Up and drag it onto the page. It loads with sample items already counting on the canvas, so the animation is visible from the first second.
Set up each counter item #
Open Counter Up Content and click an item in the list. Each one carries the full set of per-stat controls:
- Type: none, icon, or image on top of the stat. Icon opens the Elementor library; image opens the media library.
- Title: the label under the number, like “Notifications Delivered”.
- Number Prefix and Suffix: text around the number. A “$” prefix or a “K+” suffix turns 5.5 into $5.5 or 5.5K+.
- Number: the value the counter climbs to. Decimals work, so 5.5 with a K+ suffix reads 5.5K+.
- Background: a per-item card color, for when one stat should stand out.
The suffix trick keeps big numbers short: instead of animating to 120,000,000, the demo counts to 120 with an M+ suffix. Faster animation, cleaner card, and nobody counts the zeros to check.
The per-item Background colors just that card. Useful for highlighting a headline stat, or skip it and let the shared box style handle all four:
Choose columns and content position #
Below the item list, Columns sets how many counters share a row, with a responsive toggle per device. Content Position places the title relative to the number: top, left, right, or bottom. The demo tries 2 columns with side-by-side number and title, then settles back on 4 columns stacked.
Tune the icons #
The Icon Settings section controls the icon block on every card: Icon/Image Position (left, top, or right of the stat), Icon Size, and Icon Circle or Image Size for the colored disc behind the glyph. The demo runs 30 pixel icons on 86 pixel circles.
Style the cards #
In the Style tab, Counter Up Box Style covers the shared card look: Background Color, Padding, Margin, Border Type, Border Radius, and Box Shadow. The demo lands on soft pink cards with 20 pixel padding and margin, which separates the four stats without hard borders.
Style the numbers, titles, and icons #
The Content Style section splits into four groups, one per element on the card:
- Icon Style: the glyph color and the circle color behind it. The demo turns the circles deep purple with white icons.
- Number Style: color and typography for the stat itself, the biggest text on the card.
- Number Prefix: its own color, typography, size, and margin, so a currency symbol can sit smaller than the number.
- Title Style: color, typography, and margin for the label.
The result on the page #
On the live page the numbers spin up from zero as the section scrolls into view, then settle on the final values. Here is the finished band:
Common use cases #
- Company stats bands: customers served, projects delivered, years in business.
- SaaS proof sections: users, uptime, integrations.
- Portfolio numbers: campaigns run, revenue generated, hours of editing.
- Nonprofit impact: meals delivered, volunteers, funds raised.
- Course and community pages: students, lessons, reviews.
Tips for better counters #
- Use suffixes for big numbers. Counting to 120 with an M+ suffix animates faster and reads cleaner than counting to nine digits.
- Keep the set to three or four stats. Six counters compete; four get read.
- Lead with the strongest number. Visitors read left to right and may not finish the row.
- Match icon circles to your palette. The circle color is the most visible style choice on the card; the demo’s purple-on-pink works because both come from one palette.
- Check the mobile column count. Four columns on a phone squeezes the numbers; the responsive Columns control fixes it in one click.
Video Tutorial #
If you’d like to see the Counter Up widget in action, this video walks through the full setup, from the first item to the animated stats band on the live page:
Frequently Asked Questions #
What is the Counter Up widget in Master Addons?
It is an Elementor widget for animated stat sections. Each item holds a number that counts up from zero on scroll, plus a prefix, suffix, title, and an optional icon or image. Columns, icon sizing, and card styling are shared across the set.
How do I show 120M+ instead of 120000000?
Set the Number to 120 and the Number Suffix to M+. The counter animates to 120 and displays 120M+. The same works for K+ thousands and decimal values like 5.5 with a K+ suffix.
Can each counter have its own icon and color?
Yes. Every item picks its own icon or image through the Type control, and each item has its own Background color. Shared icon size, circle size, and card styling come from Icon Settings and the Style tab.
When does the counting animation start?
The numbers animate when the widget scrolls into the viewport, counting from zero to the value you set. Visitors arriving at the section see the count-up play once.
Can I change how many counters sit in a row?
Yes. The Columns dropdown in Counter Up Content sets the row count and carries a responsive toggle, so a four-column desktop band can drop to two columns on tablets and one on phones.
Wrapping up #
The Counter Up widget turns plain numbers into a stats band that moves: per-item icons, prefixes, and suffixes, shared columns and card styling, and a count-up animation that draws the eye exactly once. Browse the full set of Master Addons widgets and extensions to see what else ships with the plugin, and check the pricing page for Pro extras like patterns.
