Number Counter

Number Counter

Number counter is creative simple UI Block used to display the numbers, product quantity, cups of coffee consumed and so on.

People so often get confused between number counter and countdown. We have also provided count Block in our add-ons list, go check it out. Number counter is a simple Block which can be used creatively to display numbers which get incremented on view port from initial stated one.

Pro tip
‘Anumeric’ people don’t have numbers in their language. What if one of them will visit your website !!?

Configuration for Number Counter

Number counter asks you to set initial number from which you want to start counting, and will stop at an ending number. Number counting starts when you reach it’s view port only, so every one can see it’s animated move.

How to use the Number Counter Block of The Plus Addons For Gutenberg

The Number Counter block comes in two styles. You can create a standard layout using a customized style option.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Number Counter into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Number Counter after “/” sign, eg.“/Number Counter”, in the content area. Gutenberg also provides drag & drop after opening the list of Blocks panel.

After placing the Block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Style

Select your preferred layout for number counter here.

Alignment

Alignment of component into left, centre or right direction.

Main Title

Title

Title text for the number counter.

Link

Destination which will lead user to another page on click of number counter.

Digit

Final Number

Final or ending number at which counter will stop itself.

Initial Number

Pivot or starting number at which counter will be start counting.

Number Gap

Number gap is a counting jumps which will be made by increasing sequence to reach the final number. Ex. 10, 20, 30 …

Time Delay

Time in milliseconds to jump from one to increment one in number gap.

Prefix/ Postfix

Symbol and Style

Symbol or character to set as a prefix/ postfix for number counter, depends on style you choose.

Icon

Icon Type

Icon type is a selection whether you want an icon or image or nothing.

Select Icon

On selection of Icon in previous drop down, you’ll be displayed whole list of icons provided by the FontAwesome icon library. If you have purchased licence for pro plan and activation has been done then you’ll able to use pro icons too.

Upload Image

On selection of Image in previous drop down, you’ll be asked to choose and upload image, and after uploading image basic styling option for image would be displayed there.

Image Size

Set the image size options.

2. Style

The Style tab is used for customizing the appearance of all the Number Counter Block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the Blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Main Title

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the text.

Above Space

An input to set spacing between box top and title.

Below Space

An input to set spacing between box counter and title.

Digit

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the counting digits.

Above Space

An input to set spacing between title and counter digit.

Prefix/Postfix

Typography

Assign size, weight, spacing and much more to fonts.

Color

A color picker to assign suitable color to the text.

Image

Width

Set the width of the image from here.

Icon

Layout

A select box to choose shape of an icon.

Size

Set icon size from here.

Width

Set width of icon from here.

Icon Color

A color picker to assign suitable color to the icon.

Background

Apply suitable background like color/ gradient to an icon.

Border Color

A color picker to assign suitable border color to the icon.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an icon.

Background Options

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Extra Options

Padding

Put-in some inner space to an element.

Vertical Center

By enabling this option, you can set the icon position vertical center.

3. Advanced

Advanced Tab Options are common across all the Blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.