Gutenberg Counter Block Tutorial

Introduction

Take complete control of your website’s data presentation with Gutenberg Counter Block by Premium Blocks. This remarkably flexible Gutenberg block delivers precision customization for every aspect of your counters. Go beyond simple numbers by embedding other Gutenberg blocks like text, images, icons, or even additional blocks directly within your counters. Create richer context, provide additional visual cues, and enhance the impact of your statistics.

Visit Demo Page

Free Download

Requirements

To get this Gutenberg block on your WordPress website, make sure to install and activate the following plugin(s).

Premium Blocks for Gutenberg – The Free WordPress Plugin.
Recommended* Kemet Full-Site-Editing WordPress Theme.

How to Use Gutenberg Counter Block?

Insert the Premium Counter Block into your Gutenberg editor.

Gutenberg Counter Block Support Inner Blocks. You have the option to add more fields, including various types such as:

If you want to preview more information from your visitors, you can easily add extra fields to the counter block. Just click on the “+” icon and pick the type of field you want to include.

Gutenberg Counter Block Container Settings

Background Type: Select the type of background for the container, such as solid, gradient, or image.
Box Shadow: Control to add and customize a shadow effect around the container.
Border: Settings to define the style of the container’s border, including options like solid, dotted, or dashed lines.
Border Radius: Adjustments for the radius of the container’s corners, allowing customization for each corner (top, right, bottom, left).
Padding: Control to set the space inside the container between its content and borders, configurable for each side and in units of pixels (PX), ems (EM), or percent (%).

Gutenberg Digit Block

Gutenberg Digit Block is used within the counter block to preview the counter numbers with prefix and suffix options.

General Settings

Prefix and Suffix: Toggle these options on or off to display a prefix or suffix with the counter. For example, you can add a “$” as a prefix for currency or “k” as a suffix for thousands.
Counting Time: Set the counting duration in milliseconds. For example, entering “1000” will make the counter reach its final number in 1 second.
Delay: Set the delay between increments in milliseconds. For example, entering “10” will make the counter update every 10 milliseconds.
Alignment: Choose the alignment of the counter text (left, center, or right).

Styling Options

Gutenberg Digit Block styling options for Number, Prefix and Suffix.

Customize the font size, weight, and style of the number that the counter displays.
Number Color: Set the color of the counter number to match your site’s design.
Margin: Adjust the margin around the counter, providing spacing between the counter and other elements. You can set different values for the top, right, bottom, and left margins.
Padding: Set the padding inside the counter area, controlling the space around the number within the counter box.

Gutenberg Digit Block styling controllers. — Gutenberg Digit Block – Styling Controllers.

Conclusion

Gutenberg Counter Block by Premium Blocks is an adaptable tool for any WordPress website owner who needs to showcase numbers, statistics, and milestones. Whether you’re highlighting customer satisfaction rates, growth over time, or key accomplishments, the Counter Block’s customizability, animations, and seamless block integration make it a powerful and user-friendly addition to your Gutenberg toolkit.

Need Further Help?

Have a question or need assistance? Our dedicated support team is here to help! Explore our contact options to ensure you get the support you need. We’re committed to making your Gutenberg website-building experience seamless and resolving any queries you may have.

Contact Support

Facebook Group

Gutenberg Counter Block Tutorial

Table Of Content

Introduction

Requirements

How to Use Gutenberg Counter Block?

Gutenberg Counter Block Container Settings

Gutenberg Digit Block

General Settings

Styling Options

Conclusion

Need Further Help?

About Leap13

Help Center

Global Features

Join Our Newsletter