Countdown Widget Tutorial

Intro

Premium Countdown Widget is a very useful element for any type of events, under construction pages, time sensitive marketing campaigns etc. You can use it with Elementor Page Builder and customize it with no coding required. Select from different time zones and translate the units into your language directly in the widget settings.

Click here to check Premium Countdown Widget demo.

Key Features

  • Countdown
  • Expire
  • String Translations

1. Countdown

Style

Select between “Block” and “Inline” styles.

  1. Block will show the time unit below the countdown values.
  2. Inline will show the time unit next to the countdown values.
Countdown Widget Styles
Due Date

Select the countdown due date from the date picker. The formats are yyyy/mm/dd and hh:mm:ss.

Time Zone

Select the current WordPress time setting or the user’s local time.

Time Units

Select the time units that you want to display in the countdown timer. The available units are [Years, Month, Week, Day, Hours, Minutes, Seconds]. You can remove or re-add any of them as you want.

Alignment

Align the countdown to the left, center, or right.

Premium Countdown Widgets Settings

2. Expire

Expire Type

There are two Expire Types to choose from:

A. Message: By selecting this option, you will be able to add a statement that will appear when the countdown is finished.

Message as an Countdown Expire Type

B. Redirection Link: This option will enable you to add a URL that will automatically redirect the user to another webpage when the countdown is finished.

Redirection Link as an Countdown Expire Type

3. Strings Translation

The Strings Translation option makes it easy to translate the Time Unit values to a different language, but the option can also be used to customize the time units. The following strings can be changed:

  • Day (Singular) Days (Plural).
  • Week (Singular) Weeks (Plural).
  • Month (Singular) Months (Plural).
  • Year (Singular) Years (Plural).
  • Hour (Singular) Hours (Plural).
  • Minute (Singular) Minutes (Plural).
  • Second (Singular) Seconds (Plural).
Countdown Strings Translation

Style

  • Digits
  • Units

1. Digits

  • Color: Select a text color for the digits in the countdown.
  • Typography: Adjust font settings.
  • Background: Select a background color and adjust the color opacity behind the digits.
  • Background Size: Select a background-size between the values 1 and 400.
  • Border Type: Select between the following border types, as well as the color and the width of the border on each side of the section:
    • None
    • Solid
    • Double
    • Dotted
    • Dashed
    • Groove
  • Border radius -Increasing the border radius will add circular corners to the area with the background behind the digits. You can adjust the border radius in pixels, % or em.
Digits Customization Options

2. Units

  • Color: Select a text color for the units.
  • Typography: Adjust font settings.
  • Background Color: Select a background color behind the units.
  • Spacing in Between: Adjust the space to the left and right of the units. Select a value between 0 and 200. The default is “40”.
Units Customization Options