The Countdown widget helps you display a time counter on your landing page, featured page, menu, or popups if you are trying to run a time-based offer or similar things. The widget makes it easy for you to quickly change the timer settings and appearance to meet your needs.

Let’s explore the content of the Countdown widget below.

Inserting widgets

First of all, find the Countdown widget in the widget menu inside the Elementor page editor and drag it inside the page to start. Note that you need both Elementor and Element Pack installed before proceeding.

Introducing the Content Tab

The Content tab holds the fundamental settings to determine and customize the widget’s features. Basically, the base settings of a widget are found inside this tab.

The settings are broken into several sections to give you the maximum flexibility in design. Let’s start with the first section.

Layout section

Go to Content > Layout

In this section, you will find a Skin option for the widget that’s set to Default. The Due Date field lets you specify a due date, so the counter will roll the timer until that specified date & time.

You may choose Tiny countdown from the skin option that transforms the counter into a much smaller scale.

Clicking on the due date field will open a calendar-like interface where you can specify both the date and time to stop the countdown.

There is a Loop time switcher at the bottom. Turning on the switcher will replace the Due Date field with an Input Loop Time (Hours) field where you can adjust the time for the loop in the countdown widget.

Count Layout settings

Go to Content > Count Layout

You can change the countdown lineup from this section using the count column option (from 1 to 4). Then you can change the gaps between the counters.

Also, you may adjust the gap between the Number and Label using the scrollbar. There is a text alignment option available.

At the bottom, you can change the container width directly with a scrollbar instead of configuring it through the section settings. The last alignment option works on the whole content of the countdown widget.

Additional Options

Go to Content > Additional Options

In this section, the countdown can display the counter and label in block view or inline view (currently switched to inline view) from the View setting.

The switchers below can show or hide certain elements from the display, such as the days, hours, etc. Turning off the switchers here will hide parts of the counter with the corresponding label.

Turning on the Custom Label switcher will generate the label fields for the counters, and you can edit the labels here.

Lastly, you can add a separator between the countdown timers by turning on the Show Separator switcher and inserting a separator symbol down in the field.

End Action

Go to Content > End Action

If you want the Countdown widget to take action after the countdown ends, this section provides the options to configure the end action.

There are a total number of 5 options.

None type

Selecting the none option will not trigger any action after the countdown ends.

Message type

Selecting the message option will provide an additional field to insert a custom message that will show up once the countdown is finished.

Redirection link

You can select the redirection link option and set a custom link in the next field, along with a delay configuration. After the countdown ends, visitors on that page will be redirected to the given link automatically.

Coupon code

You can choose the coupon code option to integrate the countdown widget with a coupon code type widget and reveal the code when the countdown ends.

An example of this type is given below.

On trigger

Selecting on trigger option will let you link up the countdown widget with any element on the web page and trigger a program click action once the countdown is finished (like an automatic remote).

End Action feature example – Coupon Code

Appearance customizations through the Style tab

Element Pack is known for providing so many awesome styling options for the widget, and people loved how easy and feature-rich these options are.

For the Countdown widget, we will now begin the style customizations below.

Items Style section

Go to Style > Items Style

The very first section under the Style tab lets you customize some of the aspects of all items. (considering each countdown timer part, i.e., hour, minute; as an item)

From the top, you can turn on the Glassmorphism switcher and adjust the blur level to create a glass-like texture on the countdown backgrounds.

Then you can choose a border type to add a border around the counters. You can customize the border width either for all sides or for specific directions to add a nice touch. Also, the border color, border radius, padding, and box-shadow are applicable on the counters.

But turning on the Individual Style removes the generalized controls and creates control sets for each counter item separately.

Number section

Go to Style > Number

In this section, you will get color (text & background), border, padding, text shadow, and box shadow options for the numbers, along with a typography option for font customizations.

With the Text Shadow option, it is possible to create a LED digital clock-style interface for the countdown widget.

Special Note:- Numbers can be changed with a massive number of potential design factors. Check the Typography option for that.

Label section

Go to Style > Label

For the Label, you will get similar sets of options to customize. Like how the color, border, and padding options. There’s is an additional margin option here. You can configure the text shadows the same way as before to make the texts awesome.

Separator section

Go to Style > Separator

This section lets you customize the separator between the counters. You can change its color, adjust its size, and reposition the separator using the offset settings.

Video Assist

Watch the video tutorial to get a clear visual on the usage of the Countdown widget. You can also access the demo page here.

Powered by BdThemes.