Counter
Show the numbers that prove your track record.
A number that counts up in view — as a stat, a badge, a progress circle, a skill bar or a fun-fact box with an icon.
Gutenberg block
Requirements
- The block editor (Gutenberg)
- WordPress 6.5 or newer
- PHP 7.4 or newer
- Licence: Pro ($2 / year) — add it to the cart in Moduly
Add it to a page
- Open the page or post in the block editor.
- Click + (Block Inserter) and search for Counter — it is in the Moduly category.
- Insert it, then fill in its content on the canvas. Ready-made presets appear when you insert it, and later under Transform to in the block toolbar.
- Adjust it in the right sidebar: the Block tab holds the settings below, and the Styles tab its colours, typography and spacing.
Settings
General
| Setting | What you can set |
|---|
| Number | Text |
| Number | Colour |
Number
| Setting | What you can set |
|---|
| Maximum (the full circle / bar) | 1–10000 |
| Prefix | Text |
| Suffix | Text |
| Thousands separator | , or . |
| Decimal point | . or , |
Count-up
| Setting | What you can set |
|---|
| Start from | 0–10000 |
| Count up when scrolled into view | On / off |
| Duration (ms) | 0–10000 |
| Delay (ms) | 0–5000 |
| Easing | out, inout, linear, expo or back |
| Count again each time it comes into view | On / off |
Layout
| Setting | What you can set |
|---|
| Label tag | p, h2, h3, h4, h5 or div |
| Label position | below, above or right |
| Badge | none, circle, rounded, square, pill, hexagon or blob |
| Badge size (px) | 40–300 |
| Progress ring around the badge | On / off |
| Ring fill (%) | 0–100 |
| Circle size (px) | 60–400 |
| Ring thickness | 1–30 |
| Ring ends | round or butt |
| Gradient ring | On / off |
| Label inside the circle | On / off |
| Text position | outside, inside or side |
| Value | end, bubble or none |
| Fill | solid, gradient or striped |
| Moving stripes | On / off |
| Bar height (px) | 2–60 |
| Bar corner radius (px) | 0–99 |
| Media | icon, image or none |
| Media position | top, left or right |
| Icon / image size (px) | 12–120 |
| Icon background | circle, rounded, square or none |
| Divider under the number | On / off |
| Hover effect | none, lift, grow, border or icon |
| Label & text | Colour |
| Accent (ring, bar, icon, suffix) | Colour |
| Gradient end | Colour |
| Track | Colour |
| Icon background | Colour |
| Badge | Colour |
Counter text
| Setting | What you can set |
|---|
| Counter style | Text |
| Number size (px) | 0–160 |
| Label size (px) | 0–60 |
Styles tab: colours, typography, spacing, borders and shadow, from WordPress's own design tools.
Tips
- Visitors who ask their device for reduced motion get a calmer, still version automatically.
- Not sure where to start? Insert one of its presets and edit from there.
Troubleshooting
- A change not showing on the live site is almost always a page cache — clear your caching plugin or host cache.
- Works well with: Facebook Feed, Image Stack, Instagram Feed.
