Skip to main content

Number Counter

After Turning on Blocks from Grigora's Kit Dashboard.

We can use Number Counter Block in Site Editor/Blog/Page from Toggle Block Inserter.

Insert Number Counter from listed Blocks.

Once Number Counter is inserted, select the Number Counter.

After selecting Number Counter , Go to block settings, in block settings we see Geenral, Styles and Advanced of settings and we'll be exploring them one by one.

General

Counter Start and End : In a number counter, we get the Start Value, which indicates where the counter will begin, and the Stop Value, which indicates where it will end. Only numbers may be entered as values.

Time : The counter's time can also be adjusted from 0.5 to 20 seconds.

Auto-format Number : Numbers will be converted to compact notation automatically. For eg. 1100 will become 1.1K.

Number Prefix : Number Prefix will place text or numbers before the counter.

Number Suffix : Number Suffix will place text or numbers after the counter.

Thousands Separator : Commas (,) or dots (.) can be added as separators using the thousand separator.

Styles

Color

Color : Using the Colorpicker or Color Palette, we can change the color of the text.

Typography

Size : The font size can be modified by sliding the slider back and forth.

  • Minimum Value 0px
  • Maximum Value 100px
  • Default Value 50px

Line Height : Line Height can be modified by sliding the slider back and forth.

  • Minimum Value 10px
  • Maximum Value 300px
  • Default Value 10px

Letter Spacing : Letter Spacing add the space between letters by Dragging Slider Back and Forth.

  • Minimum Value 0px
  • Maximum Value 150px
  • Default Value 0px

Word Spacing : Word Spacing add the space between words by Dragging Slider Back and Forth.

  • Minimum Value 0px
  • Maximum Value 150px
  • Default Value p0x

Transform : Transform font to Uppercase (All Letters Capital), Lowercase (All letters small) and Capitalize (First letter of word is capital).

Style : Text can be styled in a variety of ways here.

Decoration : Text decoration applies decorations like Overline (adds line above text), Line Through (adds line through text), Underline (adds line below text), and Underline OverLine (Adds line Above and Below text).

Weight : Weight adds text weights ranging from 100 to 900.

Advanced

Text Shadow

Text Shadow : Text Shadow casts a shadow across the text.

  • Color : Text shadow color can be changed using the Colorpicker or Color Palette.

  • Blur : Text shadow can be blurred with Blur effect. Value entered uses pixels as its unit.

  • Horizontal : Text shadow can be applied Horizontally. Value entered uses pixels as its unit.

  • Vertical : Text shadow can be applied Vertically. Value entered uses pixels as its unit.

Transforms

  • Perspective :

  • Rotate : Counter can be rotated in the x, y, and z axis. Entered value has degree as unit.

  • Skew : Skew tilts the Counter in x axis and y axis. Value entered uses as its unit.

  • Offset : Offset shifts the Counter in x axis and y axis. Value entered uses pixels as its unit..

  • Scale : Scale increases or decreases the scale of Counter. Here value can be changed from 0 to 2.