---
title: Counter Block
description: How to use the free Ultimate Blocks Counter block to add animated number counters with a prefix, suffix and label to WordPress posts and pages.
url: "https://ultimateblocks.com/docs/how-to-use-the-counter-block/"
updated: "2026-11-07"
category: "Engagement & Conversion Blocks"
---

# Counter Block

The **Counter** block in Ultimate Blocks lets you show an animated number that counts up (or down) from a starting number to an ending number when visitors scroll to it. Add a prefix, a suffix and a label, such as 10,000+ Happy Customers, to highlight stats and milestones on any WordPress post or page. The block is free, with no Pro only settings.

| **Block name in the editor** | Counter |
| --- | --- |
| **Plan** | Free |
| **Best for** | Stats sections, landing pages, About pages, portfolios and fundraising pages |
| **Live demo** | [See the Counter block in action](https://ultimateblocks.com/counter-block/) |

## What you can use it for

- Show business stats, such as customers served, projects finished or years in business.
- Highlight milestones, such as downloads, active installs or subscribers.
- Show percentages or prices with a prefix or suffix, such as 99% or 49 USD.
- Build a stats row by placing several Counter blocks inside a Columns block.
- Show fundraising or goal progress on a campaign page.

## How to add the Counter block

1. Open the post or page in the WordPress block editor.
2. Click the **+** (Block Inserter) button.
3. Search for **Counter** and click the block to add it.
4. Click *Add a Label* under the number and type a label, such as Products Sold.

![Adding the Counter Block](https://ultimateblocks.com/wp-content/uploads/2024/10/Add-the-Counter-Block-copy.webp)

**Tip:** To show three or four counters side by side, add a Columns block first and place one Counter block in each column.

## Settings tab

Select the block and open the block sidebar on the right. The **Settings** tab (gear icon) has a **General** panel:

![Configure general settings of the counter block](https://ultimateblocks.com/wp-content/uploads/2024/10/Configure-general-settings-of-the-counter-block.webp)

- **Starting Number:** the number the animation starts from (default 0).
- **Ending Number:** the final number visitors see (default 500). If it is lower than the starting number, the counter counts down.
- **Prefix:** text before the number, such as a currency sign or a plus sign.
- **Suffix:** text after the number, such as %, +, K or M.
- **Animation Duration (Seconds):** how long the count takes, from 1 to 20 seconds (default 2).
- **Label Alignment:** show the label on the **Top** or **Bottom** of the number (default Bottom).

![Configue animation for the Counter block](https://ultimateblocks.com/wp-content/uploads/2024/10/Configue-animation-for-the-Counter-block.webp)

The counter uses whole numbers and starts counting when the block scrolls into view, so visitors always see the animation. Use the alignment buttons in the block toolbar to align the counter left, center or right (default center).

## Styles tab

Switch to the **Styles** tab (half-circle icon) to change the look of the block:

### Color

- **Counter Color:** the color of the number.
- **Label Color:** the color of the label.
- **Background:** a solid or gradient background for the block.

![Stylize the Counter block](https://ultimateblocks.com/wp-content/uploads/2024/10/Stylize-the-Counter-block.png)

### Typography

The number and the label have separate settings, so you can make the number large and bold and keep the label small:

- **Counter Font Family** and **Label Font Family**.
- **Counter Font** and **Label Font:** font size (defaults 48px and 16px).
- **Counter Appearance** and **Label Appearance:** font weight and style.
- **Counter Line Height** and **Label Line Height**.
- **Counter Letter Spacing** and **Label Letter Spacing**.
- **Counter Decoration** and **Label Decoration:** underline or strikethrough.

![Stylize Typography for the Counter block](https://ultimateblocks.com/wp-content/uploads/2024/10/Stylize-Typography-for-the-Counter-block.png)

### Dimension Settings

- **Padding** and **Margin:** space inside and around the block.
- **Gap:** the space between the number and the label.

![Configure the Dimension Settings](https://ultimateblocks.com/wp-content/uploads/2024/10/Configure-the-Dimension-Settings.png)

## Extensions you can use with this block

- [Visibility Control](https://ultimateblocks.com/docs/visibility-control/) (Pro): show the block only to certain users or on a schedule.
- [Animation](https://ultimateblocks.com/docs/animation/) (Pro): animate the block when it comes into view.
- [Responsive Control](https://ultimateblocks.com/docs/responsive-control/): hide the block on desktop, tablet or mobile.
- [Custom CSS](https://ultimateblocks.com/docs/custom-css/): add your own CSS to this block only.
- [Saved Styles](https://ultimateblocks.com/docs/how-to-save-a-style/) (Pro): save your design and reuse it on other posts.

**Animation:** add an entrance effect to the whole block on top of the counting animation.

![Add animation to the Counter block](https://ultimateblocks.com/wp-content/uploads/2024/10/Add-animation-to-the-Counter-block-copy.webp)

**Responsive Control:** hide a counter on desktop, tablet or mobile.

![Configure responsiveness settings for the Counter block](https://ultimateblocks.com/wp-content/uploads/2024/10/Configure-responsiveness-settings-for-the-Counter-block.webp)

## Frequently asked questions

**How do I add an animated number counter in WordPress?**

Install the free Ultimate Blocks plugin, add the Counter block in the block editor, and set the Starting Number, Ending Number and a label in the General panel.

**When does the counter animation start?**

It starts when the block scrolls into view, so visitors who scroll down still see the numbers count up.

**Can I add a plus sign, percent sign or currency to the number?**

Yes. Use the Prefix field for text before the number and the Suffix field for text after it, for example + or %.

**Can the counter use decimal numbers?**

No. The counter animates whole numbers only. For a value like 4.9, show it as plain text, for example with the Heading (UB) block.

**How do I show several counters in a row?**

Add a Columns block and place one Counter block in each column. Give them the same styles for a clean stats section.

**Is the Counter block free?**

Yes. The Counter block is part of the free Ultimate Blocks plugin.

## Related docs

- [Progress Bar block](https://ultimateblocks.com/docs/progress-bar-block/)
- [Star Rating block](https://ultimateblocks.com/docs/star-rating-block/)
- [Testimonial block](https://ultimateblocks.com/docs/testimonial-block/)
- [Countdown Timer block](https://ultimateblocks.com/docs/countdown-block/)
- [Animation extension](https://ultimateblocks.com/docs/animation/)