The Count Up block is an interesting way of showcasing notable stats on your page. You can display facts and figures attractively with animated counters.
How To Add The Count Up Block #
- 1.Open a page or a post and click on the plus icon to add a new block and look for the Count Up or you can search for it if it doesn’t pop up quickly for you.
- 2.By default, you’ll get the below design-
%20(1).png?alt=media&token=89089b29-0e86-49fc-a383-194617a66bf3)
How To Configure The Count Up Block #
To configure the content of your Count Up block, switch to the ‘Content’ tab.
General #
Alignment – Choose left, center, or right as the alignment of the text.
Columns – Decide the number of columns to display.
%20(1).png?alt=media&token=0534457b-5e69-4eaf-ae22-aefa9a1c5a32)
Content #
Under this tab, you can hide or display the title, number, description, and icon for the block.
%20(1).png?alt=media&token=6911cc27-be78-4309-9d6f-46d53375a3bb)
How To Style The Count Up Block #
Icon #
If you have chosen to display the icon, this tab will appear with the following options:
Select Icon – Choose an icon for an individual item from a number of options.
Icon Color – You can choose a color for the icon from here.
Design – Choose Plain, Shaped, Outlined as the design for icons.
If you have chosen Shaped or Outlined as the design, the following options will appear:
Icon Shape / Outline Color – Choose a color for the selected icon design.
Shape / Outline Border Radius – Set the border radius for corner roundness.
Shape / Outline Padding – Set the padding for the design.
Outline Width – Customize the design by selecting the required width.
%20(1).png?alt=media&token=0d39f748-3c89-43e5-9148-1b9f7590dbd9)
Typography #
Under the Typography tab, options for font family, font size, font-weight, and line-height are available for Number, Description, and Heading.
You can now set the responsive font size of Heading, Description, and Number for Mobile and Tablet view.
%20(1).png?alt=media&token=10d51f0d-f416-4e6f-a9da-2458060c5a6d)
Spacing #
The spacing tab offers options to customize the Content Padding and bottom spacing for Icon, Title, Number & Description.
Color Settings #
Under the Colors tab, color options are available for Title, Text, Number, and Background. The Opacity option is also available for background color.
%20(1).png?alt=media&token=6e9807d2-8ebd-4681-a361-ee61e19919b4)
Border #
Border Style – You can select the style of the border as solid, dotted, rigged, double, dashed, etc. You can also choose to hide it.
Border Width – Set a width for the border from here.
Border Color – You can give color to the border from here.
Border Radius – You can give a border radius to the box from here.
