Countdown

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 block 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 !

How to use the Countdown Block of The Plus Addons For Gutenberg

This block is used to display Timer, Countdown, etc. Let’s understand how to use this block in the tutorial below.

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 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

Countdown Options

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.

Countdown Setup

Select your preferred countdown setup. We provide 3 unique setup for countdown which include Normal, Scarcity & Fake Numbers.

Countdown Style

Select your preferred layout for a normal countdown here. We provide 3 unique styles for countdown which include Simple, Flipdown & Progressive.

Total Seconds

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

Type

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

Initial Number

The input of the initial number from where the counter will start.

Final Number

The input of the final number on which counter will expire or end.

Number Range

The input of the 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 the count in number counter in seconds.

Inline style (Style-1)

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

Date Picker

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

Countdown Completed

Countdown Expiry

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

Expiry Message

Text to show when the countdown expires.

Templates

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

Page Redirection URL

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

Label

Show Labels

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 customizing the appearance of all the Countdown 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

Counter Styling

Counter Font Color

A color picker to assign a suitable color to the element.

Typography

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

Label Typography

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

Text Color (Day/Hour/Min/Sec)

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

Border Color (Day/Hour/Min/Sec)

A color picker assigns a 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.

Border Radius

Set the radius curve of the element corner.

Box Shadow

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

Expiry Message

Message Font Color

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

Message Typography

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

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

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?
Please submit the reason for your vote so that we can improve the article.