How to Use the Countdown Block

The Stackable Countdown block is a timer that counts down to a specific date and time.

Using this block will allow you to build anticipation among your website visitors by letting them know about an upcoming event, or create a sense of urgency by notifying them how long they have left until a certain event or offer ends.

Using the Countdown Block

First, add the Countdown block to your post or page.

Once you’ve added the block, you will see a timer for days, hours, minutes and seconds. This can be adjusted depending on the timezone, end time, end date, and more.

Adjusting the Timezone

After adding the Countdown block, navigate to the Style tab in the inspector and open the General panel. Scroll down to find the Timezone settings where you can select from various options in the dropdown.

If you pick Local Timezone, the countdown’s end date and time will depend on the local time of the reader. If you want to have all your website visitor’s to have a synchronized countdown, you’ll need to pick a specific timezone.

Setting the End Date and Time

You can set the countdown’s end date and time in the General panel in the Style tab. Manually input the time and select the date through the dropdown or calendar.

The timer will adjust accordingly.

Other Settings

There are other various settings you can use to set up the block. For example, you can choose between Due Date or Recurring.

When picking Recurring, you can set the countdown to restart the countdown again after a delay.

You also have the option to choose the Action on Expiration, whether you want to hide the block, display a message, or do nothing once the timer ends.

You can also enable Double Digit, adjust the Box Gap and Label Top Margin.

In the Digits panel in the Style tab, you can customize the Typography of the digits in the Countdown block. Here you can change the digit's size, color and other font settings.

Changing the Labels

In Labels panel in the Style tab, you can adjust the labels displayed in the Countdown block. You have the option to toggle on or off certain labels

and rename them accordingly.

You will also find the Typography settings below such as the font, text size, text color and more.

How to Design the Countdown Block

Just like other blocks, you can design the Countdown block and style it like you normally would with any Stackable block. You will find the same Layout, Style, and Advanced tabs in the inspector once you select the block.

On the Style Tab, you will find the Separator and Background Color panel.

When you toggle on the Separator, you have the option to add a colon or a line between your labels.

Here you can adjust the size, top offset, and color of the colon or line.

In the Background and Borders & Shadows panel, you can add a background color and border settings to your block to make it stand out 🤩

Changing the Size of the Countdown Block

You can set the size and layout of the Countdown block in the Layout tab.

Here you can control the block height, content width, and the alignment settings.

And this is how you can use and design the Stackable Countdown block! 🎉