Zion Builder

Appearance

Return to top
On this page

Countdown PRO

Countdown element

General info

This is a PRO element allowing you to add countdowns to your website.

General options

  1. Countdown type - Choose between "Date" or "Evergreen"
    • Date - The countdown will count backwards until the date is reached
    • Evergreen - The countdown will count down backwards from a given time and it will be reset for each user.
  2. Date ( if date countdown type is selected ) - Select the date from which the countdown will start
  3. Days ( evergreen ) - Select the number of days from which the countdown will start counting backwards
  4. Hours - Select the number of hours from which the countdown will start counting backwards
  5. Minutes - Select the number of minutes from which the countdown will start counting backwards
  6. Countdown id - Set an id for the evergreen countdown. This allows you to keep multiple evergreen countdowns in sync
  7. Action after expire - Select an action to perform after the countdown reaches 0
    1. Redirect - Redirect the user to an URL
    2. Show message - Show the user a message
    3. Hide - Hide the countdown element
    4. Restart ( for evergreen timers ) - Restart the evergreen countdown
  8. Block type - Select the layout of the countdown element
  9. Separator type - Select the separator between numbers type
  10. Add label outside block - Move the text label showing the days/hours/minutes outside of the number container. This gives more control over the element style.
  11. Days text - Set the text your want to display for the "days" word
  12. Hours text - Set the text your want to display for the "hours" word
  13. Minutes text - Set the text your want to display for the "minutes" word
  14. Seconds text - Set the text your want to display for the "seconds" word
  15. Time color - Set the desired color for the time numbers
  16. Separator color - Set the desired color for the separator

Style options

TIP

Zion Builder elements allows you to style almost every part of an element. All style options follow the same options structure. You can find more info about style options here

  1. Wrapper - Will style the wrapper of the element.
  2. Inner wrapper - Will apply the styles to countdown elements wrapper
  3. Single block - Will apply the styles to a single countdown

Advanced options

TIP

All the options inside the advanced options tab are the same for all elements. You can find more info about advanced options here