Countdown Element
The Countdown Element counts down the days, hours, minutes and seconds to a date and time you choose. It is useful for product launches, events, sales that end on a set date, or a website opening. The numbers update every second in the visitor’s browser, so the page does not need to be reloaded.
Besides the counter it can show a heading, a subheading and a link, all inside a box with its own background color or image. You decide whether the timer uses the site’s timezone or the visitor’s, whether weeks are shown, and what happens when the date has passed.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Countdown Element
Add the Countdown Element to a column and set Countdown Timer End with the date picker. Choose the Timezone: Timezone of Site ends the countdown at the same moment for everyone, Timezone of User reads the end time as local time in each visitor’s timezone. Then pick the Layout, turn on Show Weeks for long countdowns and choose the Label Position. Add a Heading Text, Subheading Text and a link if you need them.
On the Design tab set the spacing, background, border, radius and padding of the counter boxes, and the font sizes and colors of the numbers, labels, heading, subheading and link. The Background tab styles the box around the whole element with a color or an image.
Display When Inactive decides what happens after the end date: Show keeps the element on the page with the counter at zero, Hide removes it. With Label Position set to Text Flow the labels are short (Hrs, Min, Sec); the other positions use the full words.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
Options left on Default take their value from Tirenoa → Options → Tirenoa Builder Elements → Countdown. Change them there to style every Countdown at once.
General
| Heading | Description |
|---|---|
| Countdown Timer End | Set the end date and time for the countdown time. Click the calendar icon to use the date picker. Use SQL time format: YYYY-MM-DD HH: MM: SS. For example 2016-05-10 12:30:00. |
| Timezone | Choose which timezone should be used for the countdown calculation. |
| Layout | Select the layout of the coundown element. |
| Show Weeks | Select “yes” to show weeks for longer countdowns. |
| Label Position | Select the position of the date/time labels. |
| Display When Inactive | Choose if the element should be shown when inactive. |
| Heading Text | Choose a heading text for the countdown. |
| Subheading Text | Choose a subheading text for the countdown. |
| Link URL | Add a url for the link. For example http://example.com. |
| Link Text | Choose a link text for the countdown. |
| Link Target | Controls how the link will open. |
| Margin | In pixels or percentage, for example 10px or 10%. |
| Radius | Choose the radius of outer box. In pixels (px), for example 1px. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Counter Box Spacing | Controls the space between the counter boxes. Enter value including any valid CSS unit, for example 20px. |
| Counter Box Background Color | Choose a background color for the counter boxes. |
| Counter Box Border Size | In pixels. |
| Counter Box Border Color | Controls the border color for the counter boxes. |
| Counter Box Border Radius | Controls the border radius for the counter boxes. In pixels (px), for example 1px, or “round”. |
| Counter Box Padding | Set the padding for the counter boxes. Enter values including any valid CSS unit, for example 4%. |
| Counter Font Size | Controls the font size for the countdown timer. Enter value including any valid CSS unit, for example 20px. |
| Counter Text Color | Choose a text color for the countdown timer. |
| Counter Label Font Size | Controls the font size for the countdown label. Enter value including any valid CSS unit, for example 20px. |
| Counter Label Text Color | Choose a text color for the countdown timer labels. |
| Heading Font Size | Controls the font size for the countdown heading. Enter value including any valid CSS unit, for example 20px. |
| Heading Text Color | Choose a text color for the countdown heading. |
| Subheading Font Size | Controls the font size for the countdown subheading. Enter value including any valid CSS unit, for example 20px. |
| Subheading Text Color | Choose a text color for the countdown subheading. |
| Link Text Color | Choose a text color for the countdown link. |
Background
| Heading | Description |
|---|---|
| Background Color | Choose a background color for the countdown wrapping box. |
| Background Image | Upload an image to display in the background. |
| Background Position | Choose the position of the background image. |
| Background Repeat | Choose how the background image repeats. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Use Timezone of Site for events that start at one fixed moment, such as a live stream. Timezone of User suits things like a sale that ends at midnight wherever the visitor is.
- Check the timezone in Settings > General before you rely on Timezone of Site.
- Hide under Display When Inactive is decided when the page is built. On a site with page caching the countdown can stay visible until the cached page is refreshed.
- The end date is required. Without one the counter shows zero from the start.
- Keep the heading short and put the details on the page the link points to.