Skip to main content

Countdown

After Turning on Blocks from Grigora's Kit Dashboard.

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

Insert Countdown from listed Blocks.

Once Countdown is inserted, select the Countdown.

After selecting Countdown , 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​

Date, Month and Year is set using calender. Time can also be set.

Countdown On Complete

  • Do NOthing : After Countdown timer is over it does nothing and countdown stays at 00:00:00:00

  • Hide : After Countdown timer is over countdown gets invisible.

  • Redirect to URL : After Countdown timer is over countdown gets Redirected t URL. URL can be inserted in text box.

  • Show Content : After Countdown is over countdown gets redirected to content.

  • Time Format : Here we can select single digit or double digit time format.

  • Orientation : Here we have two options Inline(In one line) and Block(One below other).

Divider : Toggling on divider we get two divider format ":", "/".

Hide Days : Will hide days and balance time left and its label can also be changed using text input.

Hide Hours : Will remove hours and balance time left and its label can also be changed using text input.

Hide Minutes : Will remove minutes and balance time left and its label can also be changed using text input.

Prefix Text : Text can be added before Countdown.

Suffix Text : Text can be added after Countdown.

Styles​

Text: Text changes color of text in Countdown. We get two options to choose colors i.e. ColorPicker and Color Palette.

Label: It changes label color of Countdown and we get two options to choose colors i.e. ColorPicker and Color Palette.

Typography - Number​

Size : Size changes button font size by Dragging Slider Back and Forth.

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

Line Height : Line Height adds the space between lines by Dragging Slider Back and Forth.

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

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

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

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

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

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 decoration to text like Overline(Adds line above text), Line Through(Adds line through text), Underline(Adds line Below text), Underline OverLine(Adds line Above and Below text).

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

Advanced​

Transform​

Perspective :

Rotate : Countdown can be rotated in the x, y, and z axis.

Skew : Skew tilts the Countdown in x axis and y axis.

Offset : Offset moves the Countdown in the x and y axis.

Scale : Countdown's scale can be increased or decreased using Scale.

Text Shadow (number and label)​

Text Shadow : Text Shadow casts a shadow across the Countdown 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.