Elementor Animated Counter
Updated · MoxKit 1.4.4 · Download free on WordPress.org
The Counter widget is an Elementor animated counter: a number with a title and an optional description and icon that animates when it scrolls into view.
- Widget name MoxKit Counter
- Panel category MoxKit Addons
- Settings 48+
- Requires Elementor 3.25+ (free)
- Price Free
Table of contents
What is the Elementor animated counter?
Choose from ten animations: count up with easing, odometer, slot machine, scramble, typewriter, wave, flip, drop, blur focus or none, and place the icon left, right, top or bottom.
Like every MoxKit widget, the Counter has Content and Style tabs with responsive settings, typography, colors and box styling, and it keeps Elementor's Advanced tab. You can switch it off under MoxKit > Widgets if you do not use it; a disabled widget loads no files.
Key features
- Number with decimals, prefix and suffix.
- Ten number animations with start value, easing, duration and a pulse when finished.
- Icon on the left, right, top or bottom with vertical alignment.
- Styleable content box, number, prefix/suffix, title, description and card.
How to add the Elementor animated counter
Follow these steps to add the widget to a page. You need MoxKit Addons for Elementor installed and Elementor active.
- Open the page in Elementor (Pages > Edit with Elementor).
- In the widget panel, search for "Counter" or scroll to the MoxKit Addons category.
- Drag the Counter widget into a Container.
- Type the Number, suffix (for example "+") and title.
- Choose the Animation and duration.
- Pick the icon and its position.
- Click Update (or Publish) to save the page.
Elementor animated counter settings: Content tab
The Content tab holds what the widget shows and how it behaves. It has 2 sections and about 14 settings. Settings marked per device can have a different value on desktop, tablet and mobile.
Counter
| Setting | Type | Options and notes |
|---|---|---|
| Icon | Icon | |
| Show icon | Toggle | On / Off (default: On) |
| Number | Number | |
| Decimal places | Number | |
| Prefix | Text | |
| Suffix | Text | |
| Title | Text | |
| Title HTML tag | Select | H2, H3, H4, H5, H6, div, p, span (default: p) |
| Description | Text area |
Number Animation
| Setting | Type | Options and notes |
|---|---|---|
| Animation | Select | Count up, Odometer (rolling digits), Slot machine, Scramble / decode, Typewriter, Wave (digits rise in turn), Flip (split-flap), Drop & bounce, Blur focus, None (default: Count up) |
| Start from | Number | |
| Easing | Select | Smooth stop, Linear, Ease in-out, Elastic overshoot (default: Smooth stop) |
| Duration (ms) | Number | |
| Pulse when finished | Toggle | On / Off (default: On) |
Elementor animated counter settings: Style tab
The Style tab controls the look of every part of the widget: 8 sections, about 34 settings. Elementor's own Advanced tab (margin, padding, motion effects, responsive visibility, custom CSS) is available as usual.
Layout
| Setting | Type | Options and notes |
|---|---|---|
| Alignment per device | Choice | Left, Center, Right (default: Center) |
| Content box max width per device | Slider |
Icon
| Setting | Type | Options and notes |
|---|---|---|
| Position per device | Choice | Left, Top, Bottom, Right (default: Top) |
| Vertical alignment per device | Choice | Applies when the icon is left or right of the text. Top, Middle, Bottom (default: Middle) |
| Spacing per device | Slider | |
| Color | Color | |
| Background | Color | |
| Color (hover) | Color | |
| Background (hover) | Color | |
| Size per device | Slider | |
| Padding per device | Slider | |
| Border radius per device | Slider |
Content Box
| Setting | Type | Options and notes |
|---|---|---|
| Background | Group | All the usual Elementor background settings. |
| Border | Group | All the usual Elementor border settings. |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Padding per device | Spacing | |
| Border radius per device | Spacing |
Number
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Bottom spacing per device | Slider |
Prefix & Suffix
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Spacing from number per device | Slider |
Title
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Bottom spacing per device | Slider |
Description
| Setting | Type | Options and notes |
|---|---|---|
| Typography | Group | All the usual Elementor typography settings. |
| Color | Color | |
| Bottom spacing per device | Slider |
Card
| Setting | Type | Options and notes |
|---|---|---|
| Background | Group | All the usual Elementor background settings. |
| Border | Group | All the usual Elementor border settings. |
| Box shadow | Group | All the usual Elementor box shadow settings. |
| Padding per device | Spacing | |
| Border radius per device | Spacing |
Tips and best practices
- Use the odometer or slot animation for a playful feel, count up for a serious one.
- Four counters in a row work well for an "about us" section.
Counter FAQ
When does the counter start?
When it scrolls into view.
Can it show decimals?
Yes. Set Decimal places, for example 1 for 4.9.
Summary
The Elementor animated counter in MoxKit is free, works with the free version of Elementor and loads its files only on pages that use it. Count up, odometer, slot machine, scramble, typewriter, wave, flip, drop and blur effects. Install MoxKit Addons for Elementor from WordPress.org, drag the Counter widget onto a page and start with the settings above.