Countdown

Countdown is a backward counting to display the remaining time before some event is going to happen.

You are launching your new business and your business website is going to go live say after 3 days. You can simply create a landing page with some welcome and coming soon text that’s okay. But what’s going to grab the attention would be some visual creation. Then this widget comes into picture.

Pro tip
Use countdown for sale / special offer on your product. Who knows that product sale can lead you to be the next Elon Musk and you would be using our countdown for your Rocket launch !

Configuration for Countdown

Countdown is basically a clock. Adjust your countdown time, say after 5 days, choose your style, make some design tweaks and there you are ready to roll.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add countdown 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 countdown after “/” sign, eg.“/countdown”, 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

Countdown selection

Select a countdown strategy suitable for your needs. Normal & Number countdown is there to serve you. Click Here(Page-link) to check out our demo page for visual  & functional differences between them.

Normal Countdown Style

Select your preferred layout for normal countdown here. We provide 3 unique styles for countdown which includes Minimal, Flip down & Progressive one.

Scarcity Counter

Enabling the Scarcity counter will give you the ability to fake it. On each refresh your counter will get reseted. So you can create a fake scarcity for your purposes.

Inline style (Style-1)

Inline style will align all the boxes of countdown into an inline design pattern. Checkout demo page to get visual ideas.

Date Picker

Date picker allows you to set a date & time on which counter is going to expire.

Numbers Counter

Change type

Change type is a drop down selection for your fake number counter sequence. Increasing & Decreasing are two options for the number counter to use accordingly.

Initial Number

Input of initial number from where counter will start.

Final Number

Input of final number on which counter will expire or end.

Number Range

Input of Number range from 0 – “Your Input”. Using this our algorithm will generate a random number between this number range and add/subtract according to change type selection.

Change Interval

Input for refresh interval to increase/decrease count in number counter in seconds.

Countdown Completed

On Countdown Expiry

A selection to replace the countdown after it’s expired. Three choices are given which includes Message display, page redirection and showing reusable blocks from the block library.

Expiry Message

Text to show when countdown expires.

Page Redirection URL

Enter the page link where you want to take the user after the countdown ends.

Templates

Selection of reusable blocks from the block library to display after countdown expiry.

Label

Show Label

Toggle switch to display labels of days, hours and so.

Days/Hours/Minute/Second Text

Input for label text to display along with the counter digits. Input can be in any language.

2. Style

The Style tab is used for customising the appearance of all the Countdown 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

Counter Styling

Counter Font Color

A color picker to assign suitable color to the element.

Typography

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

Label Typography

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

Text Color (Day/Hour/Min/Sec)

A color picker to assign suitable color to the text.

Border Color (Day/Hour/Min/Sec)

A color picker to assign suitable color to the border of an element.

Background (Day/Hour/Min/Sec)

Apply suitable background like color, gradient, image or video to an element.

Padding

Put-in some inner space to an element.

Margin

Put-in some outer space to an element.

Border

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

Box Shadow

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

Expiry Message

Message Font Color

A color picker to assign suitable color to the message text.

Message Typography

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

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

Note : ⭐ Symbol as a suffix displays a Pro feature field.
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?