Number counters can convey statistics, milestones, or achievements in a visually appealing manner. Whether you are showcasing the number of clients served, products sold, or projects completed, a number counter can succinctly present information while drawing attention to key metrics.
With the Number Counter block from Nexter Blocks, you can easily highlight key numeric milestones on your WordPress website.
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, to verify this visit Nexter Blocks → Blocks → and Search for Number Counter and activate.
How to activate the Number Counter Block?
Go to
- Nexter Blocks → Blocks
- Search the block name and turn on the toggle then click Save Settings.
Key Features
- Animation – You can easily add an animated number counter.
How to Use the Number Counter Block?
Add the Number Counter block from Nexter Blocks to the page.
Content
From the Style section, you can select a style.
.
- Style 1 – In this style, the icon, number and text are positioned at the center.
- Style 2 – The icon is placed inline with the number and text in this style.
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.
Then, in the Link field, you can add a link to the number counter.
From the Icon Type section, you can select the icon type. Here you’ll find four options –
- None – With this, no icon will be added to the number counter.
- Icon – To add a standard icon to the number counter.
- Image – To add an image to the number counter.
- SVG – To add a custom SVG to the number counter.
Select the option as per your requirements, let’s select Icon here.
From the Select Icon section, you can add an icon.
Digit
In the Initial Number field, you have to set the number you want to show initially.
Then in the Final Number field, you have to set the final number for the counter.
In the Number Gap (Animation) field, you can set the gap between each number change.
Then you can set a delay between each number change from the Time delay (Animation) field.
From the Numeration Type dropdown, you can select the numeration type. Here you’ll find three options –
- Default – To show numbers without any comma.
- Indian – To place commas on the number as per the Indian number system.
- International – To place commas on the number as per the international number system.
In the Add Symbol/Content section, you can place a symbol before or after or on both sides.
Then in the Symbol field, you can add a symbol like $,%, etc. in the counter.
Note: When the Both option is selected, you’ll see an additional symbol field.
Accessibility
In the Aria Label field, you can add a text for Aria Label to improve accessibility.
How to Style the Number Counter Block?
To style the Number Counter, you’ll find all the options in the Style tab.
Main Title – From here, you can manage the title typography, title color, and space for normal and hover states.
Digit – From here, you can manage the counter number typography, color, and space for normal and hover states.
Icon – This option will be visible only when you select Icon as the icon type from the Layout tab. From here, you can manage the icon style.
Image – This option will be visible only when you select Image as the icon type from the Layout tab. From here, you can manage the image style.
SVG Icon – This option will be visible only when you select SVG as the icon type from the Layout tab. From here, you can manage the SVG style.
Background Options – From here, you can customize the number counter container background, border, and box shadow for normal and hover states.
Extra Options – From here, you can add padding to the number counter container.
Advanced – This is our global extension available for all our blocks. From here you can add a custom CSS class in the Additional CSS class(es) field. If you know CSS you can use this class to further finetune the style by using your own custom CSS.
Advanced options remain common for all our blocks, you can explore all it options from here.
