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.

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

• Countdown
• Expire
• String Translations

Elementor Countdown Widget

1. Countdown

Style

Select between “Block” and “Inline” styles:

• Block: will show the time unit below the countdown values.
• Inline: will show the time unit next to the countdown values.

• 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.
• Digits Separator: Enable or disable digits separator.
  • Separator Text: Set the text of the separator.
• Alignment: Align the countdown to the left, center, or right.

2. Expire

Expire Type

There are three Expire Types to choose from:

A. Default: Default option will show the expiration message as Digits [00:00:00].

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

C. 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.

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).

---

Style

• Digits
• Units
• Separator

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.
• Box Shadow: Add a shadow around the container by controlling the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position:
    • Outline
    • Inset
• 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.

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”.

3. Separator

• Size: Set the size of the separator.
• Color: Set the color of the separator.
• Margin: Adjust the margin in pixels, em or %.