Number Counter

Number counter is creative simple UI widget 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 widget in our add-ons list, go check it out. Number counter is a simple widget 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.

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 widgets panel.

After placing the widget 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

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.

2. Style

The Style tab is used for customising the appearance of all the Number Counter widget components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. 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 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.

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.

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.

3. Advanced

Advanced Tab Options are common across all the widgets. 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?