No results found. Try again with different words?

Search must be at least 3 characters.

Introducing the CountDown Block

The countdown block is the best way to display a timer on your website. You can control every aspect of the timer while using the countdown block. In this document, we will explain the features that you can control using the countdown block. This feature is available with the Spectra plugin version 2.3.0 and above and with the free version of the plugin as well.

Installing and configuring

To use this block simply install and activate the Spectra plugin. You can either install the Spectra plugin via your WordPress store or you can download it from here and upload it to your website.

Spectra install

Once you have installed the Spectra plugin, please navigate to the page where you would like to add the countdown timer on your website. Simply add a new block and add the countdown block.

Spectra countdown block

The countdown timer will be added to your page with default settings of one year. For example, if you are adding the countdown block in the year 2024, the default time would be set for 1st January 2025.

Spectra-countdown block-timer
General Settings:

You can change the settings from block settings>general. You can change the end time and the end date of the timer by simply clicking on the settings. Please note that the end date should be as per the site’s timezone settings.

Spectra-countdown block-timer-settings
Hiding days, hours, and minutes

You can choose to display days, hours, minutes or just seconds on the Countdown Timer block with just one click. To hide the days from the timer, simply click on the radio button next to the “Show Days” button under general settings. Once the days are turned off, you will get an option to hide the hours and so on.

Hiding days, hours and minutes

You can also turn off the label or change them to anything else as per your requirement.

Spectra-countdown block-timer-labels

You can change the separators by clicking on the separators. As of now, there are only two types of separators that are available. You can either choose a colon or a line as the separator.

Spectra-countdown block-timer-separators
Style Settings:

Style settings give you more options to design your CountDown block as per your needs. Here are a few important settings that you should be aware of.

Box Settings:

Square Shaped Box: You can turn this option on to change the shape of the countdown block to square from the default settings of rectangle.

Square shaped box

Overall Alignment: This lets you control the alignment of the countdown box to either left, right, or central.

Inner Alignment: Let you control the alignment of the numbers within the inner boxes to either left, right or central.

Countdown timer allignment

Label Position: With this option, you can choose whether the labels appear horizontally or vertically with the timer.

Label Vertical Alignment: If you choose the horizontal appearance of the labels, this option lets you choose the vertical position of the labels with respect to the timer. Here is an example:

Label Vertical Alignment

Background Type: You can either leave the background of the numbers transparent or choose a color based on your need using this option.

Box Width: Let you adjust the width of the countdown timer boxes by using the slider next to this option.

Box width

Gap Between Boxes: This option lets you increase or decrease the gaps between each of the boxes.

Spectra countdown block gap between boxes

The gap between digits and labels: This option lets you adjust the gap between the labels and the digits by adjusting the slider.

gap between digits and labels

Border: You can create a border around the countdown block using this option.

Spectra-countdown block-timer-border

Width, Radius, and Padding:  You can control the width, radius, and padding of the countdown block using the respective options.

Digit Settings:

This setting allows you to change and modify the digits as per your needs. You can change the color of the digits, select a different font using the typography option or put a margin around the digits using this option.

Spectra-countdown block-timer-digit

Similarly, you can change or modify the labels using the labels settings option.

Spectra-countdown block-timer-label-settings

You can also change how the separators appear in your countdown block by clicking on the separator settings option. This will let you change the color, typography, right spacing, and top spacing of the separators.

Spectra-countdown block-timer-separator-settings

Box Shadow: You can select a shadow for the timer blocks using this option. You can either select a shadow from the 6 different presets or you can adjust the shadow manually by using the manual handles below.

box shadow

Finally, you can change the Padding and the Margin under the Spacing options.

Spectra-countdown block-timer-spacing

If you are looking for more options, check out the documentation of the Countdown Pro to unlock more features.

Was this article helpful?

Did not find a solution? We are here to help you succeed.

Related Docs
Build Ultra High Performance
Websites, Without Coding

Whether you are a beginner, marketer, or professional, Spectra has the tools and resources you can rely on to succeed

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.