Kadence Gutenberg Blocks provides the Countdown block to display countdowns in your content. You can use a countdown to tell your customers how much time they have to take advantage of a sale. A countdown may be helpful to draw attention to an upcoming event. There are plenty of use cases for Kadence’s Countdown block and many ways to configure your timer using block settings.

Adding the Countdown block to your content is easy using the Gutenberg WordPress editor.

General

Countdown Configuration

To create a countdown, you can adjust the expiration date and time in the block settings. When the timer reaches zero, it will expire. With the pro addon, you have the option to set an Evergreen timer and an expiration action. Simply use the settings panel to specify the desired time and date.

Action on Expire

There are several actions available when the timer expires. The free version only allows you to show the timer at zero when it expires. The pro addon provides additional actions at expiration, explained in the Pro Addon section below.

You can customize the timer even further with settings for the Countdown Layout, Number Settings, Label Settings, and more. You can add pre-text and post-text to timers, change the colors and sizes of your font, and add borders.

The Countdown Alignment justifies the timer to the left, center, or right. This setting can be adjusted for desktop, tablet, and mobile devices by clicking on the appropriate icons.

There are two layouts: block and inline. The block layout allows a divider, whereas the inline layout makes the countdown look like a line of text.

Countdown pre text adds text before the timer, and post text adds text after the countdown. You can also label the days, hours, minutes, and seconds.

Style

Count Item Settings

The count item settings have settings for the background color, border color, border width, border radius, and padding for the count items. Some settings, like the border color and padding, allow different settings for desktop, tablet, and mobile devices when the appropriate icon is selected.

Number, Label, Pre Text, and Post Text Settings

The number, label, pre text, and post text settings let you adjust settings for the parts inside of the count items. You can adjust the color, font size, line height, font family, font weight, and letter spacing for each part of the item.

Pro Addon

The pro addon comes with some extra features for you to enjoy. An Evergreen Countdown is an individual counter based on a user’s browser. The traditional countdown has an expiration date that is the same for anyone who visits the site. However, an Evergreen timer will be triggered for a user when they first enter the page. You can repeat this timer after it expires for a user, and it helps impart a sense of urgency, perhaps for a limited-time offer.

Instead of setting a specific time to expire, an evergreen timer lets you set a number of hours and minutes. When the countdown ends, the evergreen timer resets after the set amount of days to wait.

The pro addon also allows you to adjust the action at expiration. Upon expiration, the timer could be set to hide, be replaced with alternative content, or redirect the user to another URL.

Replacing the time with content provides another block called the Countdown Content block, which lets you add content which will display when the timer expires.