Use the Count Up Block to Show Statistics in Gutenberg

The Count Up block is perfect for showcasing a number in the Gutenberg editor. You can use it show how many clients you have, how much money you have raised, how many cups of coffee you've served, or anything else.

Count up statistics block in WordPress

In fact, count up blocks are useful to present any kind of statistics on your side. Showing numbers is useful to present relevant information concisely, thus generating a bigger impact on visitors when scanning over the site.

This tutorial will explain the use of the Count up block of the PublishPress Blocks plugin. 

Keep reading to learn how!


Step #1. Install the Plugin

  • Click Plugins > Add New.
  • Type PublishPress Blocks in the search box.
  • Click Install Now.
  • Click Activate.

Step #2. Create a Post

  • Click Posts > Add New.
  • Write a proper title.
  • Click the ‘+’ symbol or type / to search for the Count Up block.

Count up blocks make sense when they bundled together, usually in a set of 3. 

  • Change the number of columns to 3.
  • Change the Color settings for Header, Count Up, and Description.
  • Decrease the size of the Counter Number to 45.
  • Add the Counter Up symbol.
  • Add proper text and numbers according to the particular data of your site.

The symbol can be placed before or after the number by enabling the toggle below each symbol input.

200923 Advg Count Up 001
200923 Advg Count Up 001
  • Click Publish twice.
  • Click View Post.
200923 Advg Count Up 002
200923 Advg Count Up 002

Step #3. Count Up Default Settings

  • Click PublishPress Blocks > Configuration > Default Blocks Config.
  • Click the cogwheel beside Count Up.
200923 Advg Count Up 004
200923 Advg Count Up 004

Since we already stated that count up blocks make more sense, when grouped in sets of 3, you can change the number of columns here and set it at 3 by default. That way, you will get 3 columns each time you insert a Count Up block. Click Save after you have configured your defaults. You can also configure the default colors here. That way, you can match the colors of all PublishPress Blocks elements with the colors of your own brand.

  • Click Save when you are done with editing.
200923 Advg Count Up 005
200923 Advg Count Up 005

The PublishPress Blocks Count Up block lets users position count up items presenting relevant site/business stats in a fancy and intuitive way. 

I hope you liked this tutorial. Thanks for reading!

If you liked this feature, you find enjoy other PublishPress Blocks features including the contact form block, table of contents, image slider block and testimonials display.

Authors

  • Jorge Montoya

    Jorge lived in Ecuador and Germany. Now he is back in his homeland of Colombia. He spends his time translating from English and German to Spanish. He loves to learn about open source technology.

  • Steve Burge

    Steve is the founder of PublishPress. He's been working with open source software for over 20 years. Originally from the UK, he now lives in Sarasota in the USA. This profile is generated by the PublishPress Authors plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *