Introducing Countdown Timer widget

The Countdown Timer widget of Ultimate Addons for Elementor will allow you to add and design beautiful Countdown Timers on your site even if you don’t have the Pro version of Elementor. You will also have the option of creating a Recurring timer among other timers like Fixed, Evergreen Timer using this widget.

Here are key features for the Countdown Timer widget –

• The Countdown Timer widget can display Fixed, Evergreen, Recurring Countdown timers
• Choose the Action after Expiry among Hide, Show Message, Redirect, or None
• Custom Labels fields for Days, Hours, Minutes, Seconds
• Create custom layouts from Circle, Square, Rounded or None
• Display Flash Animation to show urgency before your Countdown is about to expire
• Responsive support for the Timer to display the Countdown in a single column

Below are the settings available for the Countdown Timer widget –

Timer Type

Under the Content Tab, you will see three options –

General

The first option under this field is Type using which you can choose the Type of Timer you want to display on your page. This field also has an option to add the Due Time when your timer will expire.

After Expire

Here you will have the option to choose which action to perform once your timer expires. Based on the Action you will be shown a field below it. For example, if you select the Redirect option you will have the option to enter the URL in the below field. This Redirect URL will redirect the user to the URL provided after the timer expires. Note: These Actions will only work when you are on the front end.

Display Labels

You have the option to display the default labels below your timer or you can add custom Labels or even hide them completely.

Note: UAE gives you the option to translate widget strings with WPML easily. Note that default labels can not be translated as they come embedded in code and they won’t be available with WPML for the translation. While you can translate custom labels added to the timer.

Layout

Under the Layout tab, you will see three options –

• Select Style: Using the option under this setting you can select the Style from Square(default), Circle, Rounded, None
• Separator: This is a toggle field using which you can disable the : separator between the timer digits
• Flash Animation: Need to create a sense of urgency? This field will allow you to enable Flash Animation and a Start Animation Before field below it using which you can enter the minutes before which the Flash Animation will start flashing.

Countdown Items

Under Countdown Items section you will see the following important options –

• Container Width: This option will allow you to set the width for the Countdown Timer items
• Spacing between items: Need to manage the spacing between the items? This option will help you manage the same
• Spacing between digits and labels: To increase the space between digits and labels of the Countdown timer, you can use the slider in this option to increase the same as required
• Responsive Support: Does the Timer digits look a bit too congested? Enabling this option will make your Countdown items in a column on responsive devices

You also have the option here to change the Background Color, Border Style, and Padding of the Countdown Items.

Digits and Labels

These two are different sections and allow the option to add Typography and color for the Labels and Digits of the Countdown Timer fields.

Note: Make a note that the separator color will be inherited by the color of the digits.