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

Elementor Countdown Widget
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.
Elementor Countdown Widget Styles
Elementor 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.
  • 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.
Countdown Widget For Elementor Countdown Settings
Countdown Widget For Elementor Countdown Settings

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

Elementor Countdown Widget Default Expire Type
Elementor Countdown Widget Default Expire Type

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

Add an Expire Message For  Countdown Widget for Elementor
Add an Expire Message For Countdown Widget for Elementor

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.

Add an Expire Link For Countdown Widget for Elementor
Add an Expire Link For Countdown Widget for Elementor

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).
Elementor Countdown Widget Strings Translation
Elementor Countdown Widget Strings Translation

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.
Digits Customization Options For Countdown for Elementor
Digits Customization Options For Countdown for Elementor

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”.
Premium Countdown Widget For Elementor Units Customization Options
Premium Countdown Widget For Elementor Units Customization Options

3. Separator

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

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 20+ Elementor Widgets Totally Free of charge.