Elementor Countdown Widget Tutorial

Intro

This is a tutorial article on Premium Countdown Widget, designed to guide users with this versatile tool within Elementor Page Builder for various applications like events, under construction pages, or time-sensitive marketing efforts. It highlights the widget’s no-code customization options, including timezone adjustments and language translation for the countdown timer directly within the widget settings, aimed at enhancing user engagement and website functionality.

Click here to check Elementor Countdown Widget demo.

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Make sure that the feature is enabled so you can find it in the Elementor editor.
• Premium Addons Pro is required for:
  • Display Options Style Types
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated.

Key Features

• Countdown
• Display Options
• After Expire
• Strings Translation

Countdown

• Type: Dropdown to select the type of timer, with options such as “Fixed Timer” and “Evergreen Timer”.
• Due Date: A field to set the specific end date and time for the countdown.
• Timezone: Dropdown to select the timezone for the countdown timer, with an option for “WordPress Default” or “User Local Time”.
• Time Units: Checkboxes to select which units of time (Days, Hours, Minutes) to display in the countdown timer.

Display Options

Please note that Style types Cicle, Rotate, or Flip options require Premium Addons PRO installed and activated on your website.

• Style: Choose the overall style of the digits to be default, Featured Units, Circle, Rotate, or Flip.
• Digit Size (px): Adjust the size of the digits.
• Add Units Inside Digits: Choose whether to display the time units (like hours, minutes, seconds) inside the digits.
• Time Units Position: Select the position of the time units relative to the digits whether Block or Inline.
• Digits Separator: Enable or disable a separator between digits.
• Separator Shape: Select the shape of the separator.
• Alignment: Select the alignment of the digital display; options typically include left, center, and right alignment.

After Expire

• Choose Action: Dropdown to select the action that happens after the countdown expires. “Message” is currently selected, implying other options like a redirect link might be available.
• Text: A text editor where you can compose or edit the message that will be displayed when the countdown expires. It offers typical text editing tools such as:
  • Add Media: To insert images or other media into the message.
  • Visual/Text Tabs: To switch between visual (WYSIWYG) and text (HTML) editing modes.
  • Formatting Options: Bold, italicize, underline, and align text, as well as insert links and more.

Strings Translation

• Day (Singular): The field to input the singular form for “day,” with “Day” as the default.
• Day (Plural): The field to input the plural form for “days,” with “Days” as the default.
• Month (Singular): The field to input the singular form for “month,” with “Month” as the default.
• Months (Plural): The field to input the plural form for “months,” with “Months” as the default.
• Year (Singular): The field to input the singular form for “year,” with “Year” as the default.
• Years (Plural): The field to input the plural form for “years,” with “Years” as the default.
• Hour (Singular): The field to input the singular form for “hour,” with “Hour” as the default.
• Hours (Plural): The field to input the plural form for “hours,” with “Hours” as the default.
• Minute (Singular): The field to input the singular form for “minute,” with “Minute” as the default.
• Minutes (Plural): The field to input the plural form for “minutes,” with “Minutes” as the default.
• Second (Singular): The field to input the singular form for “second,” with “Second” as the default.
• Seconds (Plural): The field to input the plural form for “seconds,” with “Seconds” as the default.

Style

Digits

• Color: Customization of the digit color.
• Typography: Options to change the font properties of the digits such as font size, font family, weight, style, etc.
• Background Color: Selection of a background color for the digits.
• Text Shadow: Addition of a shadow to the text for depth or 3D effect.
• Box Shadow: Configuration of a shadow around the entire digit box.
• Border Type: Selection of the border style around the digits (Default, solid, dashed, dotted, etc.).
• Border Radius: Adjustment of the corner roundness of the digit box (measured in pixels).
• Advanced Border Radius: A toggle switch for applying custom radius values to each corner of the digit box.
• Padding: Controls to set the space inside the digit box, around the digits, with individual adjustments for top, right, bottom, and left padding.

Units

• Color: Change the text color of the units.
• Typography: Adjust the font characteristics of the unit text, such as font size, family, weight, and style.
• Background Color: Set a background color specifically for the units area.
• Text Shadow: Apply a shadow effect to the unit text for better readability or visual depth.
• Margin: Customize the space around the units container, with the ability to set different values for top, right, bottom, and left margins.
• Padding: Define the space inside the units container, around the text, with individual control over the top, right, bottom, and left padding.

Separator

• Color: Customize the color of the separator.
• Size: Adjust the thickness or width of the separator line.
• Spacing: Control the amount of space above and below the separator, typically in pixels (px).

Boxes

• Background Color: An option to select a background color for the boxes.
• Box Shadow: A tool to add and customize a shadow effect to the boxes.
• Border Type: A dropdown to choose the style of the box borders, such as solid, dotted, or dashed.
• Border Radius: A slider to adjust the roundness of the box corners.
• Advanced Border Radius: A toggle switch to enable custom radius values for each corner of the boxes.
• Margin: Controls to set the outer space around the boxes, with individual adjustments for top, right, bottom, and left margins.
• Padding: Controls to set the inner space within the boxes, with individual adjustments for top, right, bottom, and left padding.

Expiration Message

• Color: Customize the text color of the expiration message.
• Background Color: Choose a background color for the expiration message area.
• Typography: Access typography settings such as font size, style, weight, and more for the expiration message text.
• Border Type: Select the style of the border around the expiration message (default or custom styles like solid, dotted, dashed).
• Border Radius: Adjust the roundness of the corners of the expiration message box.
• Box Shadow: Add a shadow around the expiration message box to create depth.
• Padding: Set the space inside the border of the expiration message box, with individual adjustments for top, right, bottom, and left sides.
• Margin: Control the outer space around the expiration message box, also with adjustments for each side (top, right, bottom, and left).

Conclusion

Wrapping up, by now you should have a good handle on using Elementor Countdown Widget. We’ve gone through how to set it up, customize it to fit your site, and even what to do when the timer runs out. It’s not too complex, so even if you’re not a pro at this, you should be able to get it working just fine.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.