---
title: Counter
description: "The Counter Block displays animated numerical statistics on your website. You can set starting and ending numbers, add prefixes and suffixes, choose animation styles, display an optional icon and title, and customize the counter’s layout and appearance. ## How to…"
url: "https://shapekode.com/product/shapeblock/docs/counter/"
updated: "2026-10-18"
category: Showcase Block
---

# Counter

The Counter Block displays animated numerical statistics on your website. You can set starting and ending numbers, add prefixes and suffixes, choose animation styles, display an optional icon and title, and customize the counter’s layout and appearance.

## How to Add a Counter Block

### Step 1: Add the Counter Block

1. Open the page or post where you want to display the counter.
2. Click the **+ (Add Block)** button in the Gutenberg editor.
3. Search for **Counter**.
4. Select the Counter Block to insert it into your page.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-98.png)

### Step 2: Configure the Counter Block

Select the Counter Block and open the block settings panel in the editor. The available tabs are:

- **Settings:** Configure the counter values, animation, prefix, suffix, icon, and title.
- **Layout:** Adjust the positioning, alignment, and spacing of the counter elements.
- **Style:** Customize the number, prefix, suffix, title, and icon appearance.
- **Advanced:** Configure the block’s spacing and background.

## Settings Tab

### 1. Counter

Configure the counter’s content and animation behavior.

- **Ending Number:** Set the final number the counter will display.
- **Starting Number:** Set the initial number from which the counter begins counting. This option is available when the **Normal** animation style is selected.
- **Number Prefix:** Add text or a symbol before the number, such as `$` or `+`.
- **Number Suffix:** Add text or a symbol after the number, such as `%`, `+`, or `K`.
- **Animation Duration (ms):** Set how long the counter animation takes in milliseconds.
- **Separator:** Choose how thousands are separated in the displayed number.
  - **Default:** Use the default number formatting.
  - **Comma:** Separate thousands with commas.
  - **Dot:** Separate thousands with dots.
  - **Space:** Separate thousands with spaces.
  - **Underline:** Separate thousands with underscores.
- **Animation Style:** Choose the counter animation effect.
  - **Normal:** Animate the number from the starting value to the ending value.
  - **Odometer:** Display a rolling-digit animation.
- **Show Icon:** Enable or disable the icon beside the counter content.
- **Icon:** Choose the icon to display. This option appears when **Show Icon** is enabled.
- **Title:** Enter the title or description to display with the counter.
- **Title Tag:** Choose the HTML tag for the title, including H1–H6, P, DIV, or SPAN.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-99.png)

## Layout Tab

### 1. Positioning

Control the arrangement, alignment, and spacing of the counter elements.

- **Title Position:** Choose where the title appears relative to the number: Top, Bottom, Left, or Right. This option appears when a title is entered.
- **Content Gap (px):** Set the spacing between the number content and the title.
- **Content Vertical Align:** Adjust the vertical alignment of the content when the title is positioned to the Left or Right. Available options include Default, Start, Center, and End. This control supports responsive settings.
- **Prefix/Suffix Gap (px):** Set the spacing between the number and its prefix or suffix. This control supports responsive settings.
- **Icon Position:** Choose where the icon appears: Left, Top, Bottom, or Right. This option appears when **Show Icon** is enabled.
- **Icon Gap (px):** Set the spacing between the icon and the counter content. This control supports responsive settings and appears when the icon is enabled.
- **Icon Vertical Align:** Adjust the icon’s vertical alignment when it is positioned on the Left or Right. Available options include Default, Top, Middle, and Bottom.
- **Alignment:** Set the overall counter alignment to Default, Left, Center, or Right. This control supports responsive settings.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-100-1024x494.png)

## Style Tab

### 1. Number

Customize the appearance of the main counter number.

- **Color:** Set the number text color.
- **Typography:** Customize the number’s typography, including font settings. This control supports responsive settings.
- **Stroke Width (px):** Set the thickness of the number’s text outline. This control supports responsive settings.
- **Stroke Color:** Choose the outline color of the number.
- **Text Shadow:** Customize the number’s text shadow, including horizontal and vertical offsets, blur, and shadow color.

### 2. Prefix

This panel appears when a number prefix is entered.

- **Color:** Set the prefix text color.
- **Typography:** Customize the prefix typography, including font settings. This control supports responsive settings.
- **Text Shadow:** Customize the prefix’s text shadow, including offsets, blur, and shadow color.

### 3. Suffix

This panel appears when a number suffix is entered.

- **Color:** Set the suffix text color.
- **Typography:** Customize the suffix typography, including font settings. This control supports responsive settings.
- **Text Shadow:** Customize the suffix’s text shadow, including offsets, blur, and shadow color.

### 4. Title

This panel appears when a title is entered.

- **Color:** Set the title text color.
- **Typography:** Customize the title typography, including font settings. This control supports responsive settings.
- **Text Alignment:** Align the title text to the Left, Center, Right, or Justify, or use the Default setting. This control supports responsive settings.
- **Text Shadow:** Customize the title’s text shadow, including offsets, blur, and shadow color.

### 5. Icon

This panel appears when **Show Icon** is enabled.

- **Color:** Set the icon color.
- **Background:** Set the icon background color or gradient.
- **Box Size (px):** Set the dimensions of the icon container.
- **Icon Size (px):** Set the icon size.
- **Border Radius:** Adjust the roundness of the icon container’s corners.
- **Padding:** Set the inner spacing around the icon. This control supports responsive settings.
- **Border:** Customize the icon container’s border.
- **Box Shadow:** Add and customize a shadow around the icon container.

![](https://shapekode.com/product/shapeblock/wp-content/uploads/2026/10/image-101.png)

## Advanced Tab

### 1. Spacing

Control the spacing around the entire Counter Block.

- **Padding:** Set the inner spacing of the Counter Block. Responsive settings may be available.
- **Margin:** Set the outer spacing around the Counter Block. Responsive settings may be available.

### 2. Background

Customize the background of the entire Counter Block.

- **Background:** Set a background color or gradient for the block.