Number counters help you display statistics, milestones, and achievements in a way that draws attention to the numbers that matter. Whether you are showcasing clients served, products sold, or projects completed, a number counter presents key metrics clearly on any page.
With the Number Counter block from Nexter Blocks, you can highlight key numeric milestones on your WordPress website.
Best Used For:
- Agency and SaaS sites that want to display client count, years of experience, or projects completed in hero or about sections
- WooCommerce stores that need to highlight products sold, active customers, or order milestones in campaign sections
- Nonprofit and portfolio sites that display grants received, volunteer hours, or other impact numbers with animated counters
Required Setup
- Make sure the default WordPress Block editor is active.
- You need to have the Nexter Blocks plugin installed and activated.
- Make sure the Number Counter block is activated. Go to Nexter → Blocks, search for Number Counter, and toggle it on.
Learn via Video Tutorial
How to activate the Number Counter Block?
To activate the block:
- Go to Nexter → Blocks.
- Search for Number Counter and toggle it on.
Key Features
- Animation – The block counts up from an initial number to a final number with a smooth animation. You can control the speed via the Number Gap and Time Delay settings.
How to Use the Number Counter Block?
Add the Number Counter block from Nexter Blocks to the page.
Click the Design from Scratch button to start with a blank layout.
Note: By clicking on the Import Pre-Designed Template button, you can import a preset template and customize it as per your requirements.
Content
From the Style section, you can select a style.
- Style 1 – The icon, number, and text are centered.
- Style 2 – The icon appears inline with the number and text.
You can align the content of the number counter from the Alignment section.
In the Title field, you can add a title to the counter.
In the Link field, you can add a link to the number counter.
From the Icon Type section, select the icon type. You will find four options:
- None – No icon is added to the number counter.
- Icon – Adds a standard icon to the number counter.
- Image – Adds an image to the number counter.
- SVG – Adds a custom SVG to the number counter.
Select the option that fits your design.
From the Select Icon section, you can add an icon.
Digit
In the Initial Number field, set the starting number for the counter.
In the Final Number field, set the final number the counter will count up to.
In the Number Gap (Animation) field, set the gap between each number change. In the Time delay (Animation) field, set a delay between each change.
From the Numeration Type dropdown, select the numeration type. You will find three options:
- Default – Numbers display without commas.
- Indian – Commas are placed per the Indian number system.
- International – Commas are placed per the international number system.
In the Add Symbol/Content section, place a symbol before, after, or on both sides of the number.
In the Symbol field, add a symbol such as $, %, or any custom character.
Note: When the Both option is selected, you’ll see an additional symbol field.
Accessibility
In the Aria Label field, add text for the Aria Label to improve accessibility.
How to Style the Number Counter Block?
To style the Number Counter, go to the Style tab.
Main Title – Controls title typography, color, and spacing for normal and hover states.
Digit – Controls counter number typography, color, and spacing for normal and hover states.
Icon – Available when Icon is selected as the icon type. Controls the icon style.
Image – Available when Image is selected as the icon type. Controls the image style.
SVG Icon – Available when SVG is selected as the icon type. Controls the SVG style.
Background Options – Customize the container background, border, and box shadow for normal and hover states.
Extra Options – Adds padding to the counter container.
Advanced options are common across all Nexter Blocks. View Advanced tab tutorial.
To display numeric data with a visual fill effect instead of an animated count, see How to Add a Progress Bar in WordPress. For circular stat displays, see How to Create Circle Progress Bar in WordPress.
