Content · Elementor
Smooth Counter widget for Elementor
A number that counts up when it enters the viewport — stats, not a live dashboard.
Get King Addons
This page describes the PHP/JS for this widget — not a renamed stub. Install the free plugin from WordPress.org.
What it actually does
A number that counts up when it enters the viewport — stats, not a live dashboard.
How to add it in Elementor
- Install King Addons. Install Elementor and King Addons. Get King Addons from WordPress.org.
- Edit with Elementor. Open a page and click Edit with Elementor.
- Insert the widget. Search the panel for “Smooth Counter”. Typing “king” lists every King Addons widget.
- Set inspector controls from this widget’s PHP. Configure “Start Number”, “Finish Number”, “Animation Speed”, “Format”. Style and Content tabs are listed on this page.
When to use it
- “Projects shipped” on an about page.
- Fundraising totals.
- A hero metric.
Inspector controls from this widget’s PHP
| Control | What the code does |
|---|---|
| Smooth Counter — Start Number | Numeric value used in this widget’s render/JS (default 100). |
| Smooth Counter — Finish Number | Numeric value used in this widget’s render/JS (default 999). |
| Smooth Counter — Animation Speed | Numeric value used in this widget’s render/JS (default 600, min 50). |
| Smooth Counter — Format | The chosen value is read in render() and applied on the front end. |
| Smooth Counter — Before Text/Symbol | Printed in the widget HTML from render(). |
| Smooth Counter — After Text/Symbol | Printed in the widget HTML from render(). |
| Smooth Counter — Title | Printed in the widget HTML from render(). |
| Number — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-smooth-counter-number`. |
| Number — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Number — Align | Writes CSS `justify-content` onto the widget’s front-end markup. Options: Start; Center; End. |
| Number — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Before Text/Symbol — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-smooth-counter-before-text`. |
| Before Text/Symbol — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Before Text/Symbol — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| After Text/Symbol — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-smooth-counter-after-text`. |
| After Text/Symbol — Color | Writes CSS `color` onto the widget’s front-end markup. |
| After Text/Symbol — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Title — Typography | Elementor typography group: family, size, weight, transform, style, decoration, line-height, letter-spacing. Selector: `{{WRAPPER}} .king-addons-smooth-counter-title`. |
| Title — Color | Writes CSS `color` onto the widget’s front-end markup. |
| Title — Align | Writes CSS `text-align` onto the widget’s front-end markup. Options: Start; Center; End. |
| Title — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Whole Counter — Background | Elementor background group: classic color/image or gradient on the selector. Selector: `{{WRAPPER}} .king-addons-smooth-counter`. |
| Whole Counter — Padding | Writes CSS `padding` onto the widget’s front-end markup. |
| Whole Counter — Margin | Writes CSS `margin` onto the widget’s front-end markup. |
| Whole Counter — Box Shadow | Elementor box-shadow group for the selector. Selector: `{{WRAPPER}} .king-addons-smooth-counter`. |
| Whole Counter — Border | Elementor border group: type, width, color, and radius when the group includes it. Selector: `{{WRAPPER}} .king-addons-smooth-counter`. |
| Whole Counter — Border Radius | Writes CSS `border-radius` onto the widget’s front-end markup. |
Content and Style tabs from this widget’s PHP, including repeater fields and group controls (typography, background, border, shadow). Elementor’s Advanced tab is core Elementor and is not listed here.
FAQ
What does Smooth Counter actually change on the page?
A number that counts up when it enters the viewport — stats, not a live dashboard. Inspector labels from this widget’s PHP include “Start Number”, “Finish Number”, “Animation Speed”, “Format”.
How do I add Smooth Counter in Elementor?
Install King Addons and Elementor, edit a page, search the panel for “Smooth Counter”, drag it onto the canvas, then set Content and Style.
Do I need Elementor Pro?
No. King Addons runs on free Elementor. Some King Addons options (for example template-in-accordion, extra popup conditions, parts of the template catalog) need King Addons Pro — not Elementor Pro.
Related content widgets
Timeline Post/Story
A vertical or horizontal timeline for events, history, or a changelog.
Accordion
Collapsible panels for FAQs, policies, and long answers. One heading per panel; the body stays hidden until the visitor opens it.
Advanced Blog Posts Carousel
A carousel of blog posts with image, title, and meta — lighter than a full magazine grid.
Advanced Callout Box
A note, tip, or warning box with an icon and optional button.
Advanced Card Carousel
A carousel of cards you fill yourself (image, text, button) — not a post query.
Charts
Bar, line, pie, or radar charts from values you enter in the widget.
Get King Addons
One free plugin. 80+ Elementor widgets, 650+ templates, and 4,000+ sections. Search for Smooth Counter after you activate it.