Add a Countdown Timer on a WordPress Website

The flexible settings of the Countdown Timer allow you to manage and configure the countdown and each of its elements in accordance with your goals. There are available two types of timing: until a certain date and an evergreen timer. Select Block or Inline view type and time units to be displayed on the counter. The widget comes with five digital animations to make the item more interesting and unique. Once the time expires you can select one of the further actions like display your message/button to visitors, enable redirection to another page, or just hide the countdown.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor to add the countdown timer. You will find the widget at the end of the general section.

Drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content Tab

On the Content section, you can manage the basic settings of the Countdown Time such as time units, display types, timezone, separator, expire actions, etc.

General

View

Select one of the countdown view types: Block, Inline

View block
View Inline
Type

Select the count timing type: Due Date, Evergreen Timer

Due Date – the counter will count down to the specified date and time. When choosing this type following options are available:

  • Countdown align – manage the current block alignment (left, center, right, justify).
  • Due Date – select the end date for the counter using the calendar.
The counter type Due Date

Evergreen Timer – it is known as a dynamic countdown timer, unique to every visitor. It starts from the moment a user visits your site. When choosing this type following options are available:

  • Countdown align – manage the current block alignment (left, center, right, justify).
  • Years, Months, Weeks, Days, Hours, Minutes, Seconds – fields for entering custom countdown time.
  • Reset on page refresh after expire – a toggle to enable counter reset on page refresh after the time expires.
The counter type Evergreen Timer
Time Zone
  • WordPress Default – the countdown is based on the time zone selected in the WordPress site via Settings>General>Timezone.
  • User Local Time – the countdown is based on the time set on the computer.
Time Units

A field where you can remove or add units to the counter.

Counter Time Units
Changing digits animation

Select one of the available digital animations: Flip clock, Circle, Fade, Roll digits, Glowing. Select None to disable the animation.

Flip clock
Circle
Custom labels

The option allows you to enter a custom title for counter labels.

Custom labels

Separator

  • Show digits separator – a toggle to enable/disable the separator between digits.
  • Digits separator – a field to enter the separator

Expire action

You can add one of the available actions to be done after the time expiration.

Message

The option allows you to display custom messages before and after after the countdown expiration time. When the option is selected a new Countdown message section with additional settings will be displayed in the current Content tab.

Redirection Link

The option allows you to set redirects to another page after the countdown expiration time.

Redirection link after the time expiration
Hide

The option allows you to hide the counter after the countdown expiration time.

Button

The option allows you to display a custom button before and after the countdown expiration time. When the option is selected a new Countdown button section with additional settings will be displayed in the current Content tab.

Countdown message

The settings section is available when the Message is selected in the Expire action option.

  • Before countdown message align – manage the message alignment (left, center, right) that will be displayed before the countdown expiration time.
  • After countdown message align – manage the message alignment (left, center, right) that will be displayed after the countdown expiration time.
  • Before countdown expire message – a text field for entering a custom message what will be displayed before the countdown expiration time.
  • After countdown expire message – a text field for entering a custom message what will be displayed after the countdown expiration time.
Countdown message settings

Countdown button

The settings section is available when the Button is selected in the Expire action option.

  • Before expire button align – manage the button alignment (left, center, right) that will be displayed before the countdown expiration time.
  • After expire button align – manage the button alignment (left, center, right) that will be displayed after the countdown expiration time.
  • Before countdown text – a text field for entering a button text what will be displayed before the countdown expiration time.
  • After countdown text – a text field for entering a button text what will be displayed after the countdown expiration time.
  • Countdown before expire button link – a field for entering a link that will be applied for the button before the countdown expiration time.
  • Countdown after expire button link – a field for entering a link that will be applied for the button after the countdown expiration time.
Countdown button settings

Style tab

On the style tab, you can manage the element styles of the countdown timer like colors in different states, size, typography, borders, padding/margin, etc.

Items

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Container width – specify the container width of each digit in different units(px, %) for desktops, tablets, or phones.
  • Space between items – specify the space between items in different units(px, %) for desktops, tablets, or phones.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER

The counter digits style settings for different states.

  • Digits Color– specify the font color and opacity of the digits using the color picker.
  • Label Color– specify the font color and opacity for the label text using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Separator

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER

The separator style settings for different states.

  • Color– specify the font color and opacity of the digit separator using the color picker.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Flip animation digit block

The section with settings is available if the Flip animation is selected in Changing digits animation option of the Content Tab.

  • Digit width – specify the width of the counter digits in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
  • Digit height – specify the height of the counter digits in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
NORMAL/HOVER

The counter style settings with flip animation for different states.

  • Separator color– specify the font color and opacity of the separator using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Circle animation

The section with settings is available if the Circle animation is selected in Changing digits animation option of the Content Tab.

  • Radius – specify the circle radius using the slider
  • Circle line width – specify the line width of the circle in different units(px, %).
  • Rounded stroke linecap – a toggle to enable/ disable the rounded stroke.
  • Circle color – specify the font color and opacity of the circle using the color picker.

Before expire message/After expire message

The sections with settings is available if the Message is selected in Expire action option of the Content Tab.

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER

The message style settings for different states.

  • Color – specify the font color and opacity for the text of the current block using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Countdown before expire button/Countdown after expire button

The sections with settings is available if the Button is selected in Expire action option of the Content Tab.

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
  • Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER

The button style settings for different states.

  • Color – specify the font color and opacity for the text of the current block using the color picker.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Border Radius – specify the radius of the current block for all devices or separately for desktops, tablets, or mobiles.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Was this article helpful to you?