The user interface of the Thrive editor has been upgraded! Please, check out the changes here, before proceeding.
The “Countdown” and "Countdown Evergreen" elements are useful tools if you want to add a countdown campaign to your page.
This article will go through the process of how to add the elements to your page and how to use it.
As already explained, by using the "Countdown" element you will be able to include a countdown timer in your post or page, and set the time for when you want to the countdown to end.
Add the Element
In order to use the element, you’ll have to first add it to your page. Click on the plus sign on the right sidebar:
Then, look for the element in the list that appears:
Once found, drag and drop the element to your page:
As soon as the element is placed on the page, it will automatically turn to a countdown timer:
Now you can proceed with using the options available in the left sidebar:
Use the Main Options
From the “Main Options” section of the left sidebar you can customize the “Countdown” element in terms of “Style”, “Color”, “End Date”, “Time” and lastly “Text to show on complete”:
The “Style” option will allow you to choose from three different designs for how the countdown will appear on your page. Choose the desired one and then click on “Apply” to save your selection:
Next, you can change the color of the element, from the “Color” section. You can do that either by moving around the color picker until you find the desired color, or by inserting an HEX / RGB code:
You also have the option of choosing a global color or a theme color from an already predefined list:
More information about what these global / theme colors are can be found in these two articles:
Furthermore, you also have the possibility to edit the text displayed within the "Countdown" element just like you would do with any other text:
You can edit the color, font, size, spacing of the text, as well as perform other changes to it from this section. If you need additional information about how you can do that, you can read this article which explains more in depth what each of the options does.
After you decide on the color don’t forget to save your changes by clicking on “Apply”:
The next thing you need to set up is the "End Date" for the countdown. You can choose the date by clicking on the field next to the "End Date" option:
This will open a pop-up with a calendar. Here, select the specific day you wish your countdown to end:
To set the time, simply write the hour and minute for when you want the countdown to end, in the two designated fields:
Lastly, once all these options are set and ready, you have the option to add a customized text to appear when the countdown timer ends. You just have to enter your version in the box underneath the "Text to show on complete":
Countdown Evergreen Element
The “Countdown Evergreen” element is another type of countdown that you can add on your page.
The main difference between the “Countdown” element and the “Countdown Evergreen” element is the fact that the last one can be set to restart itself after a certain time has passed.
Add the element
Just as in the case of any other element, in order to start using the “Countdown Evergreen” element you’ll first have to add it to your page from the right sidebar:
Search for the element in the list either by using the search bar or by browsing the list until you find it:
Then, drag and drop the element to your page where you best see fit:
This will trigger the left sidebar to appear from where you can further customize the element:
Use the Main Options
The first two things you can edit from the “Main Options” section of the left sidebar are the “Style” and “Color”, just as in the case of the “Countdown” element.
Next, you can set the time when you want the countdown to end. You can add in the corresponding boxes the number of days, hours, minutes and seconds:
If you want to create a recurring countdown, which would start again after a predefined number of days and hours, then you can activate the toggle for the next option from the sidebar, called “Starts again after”:
After you switch the toggle on, you will have to insert the number of days and hours, by entering them in the fields:
This will mean that after the countdown ends, it will start again automatically as per the time you have set for it.
Lastly, you can add a text that will appear once the countdown has ended. Just type the desired text in the box underneath the "Text to show on complete":
Use the Rest of the General Options
Under the “Main Option” section of each of the countdown elements, you will also be able to use other general options, such as “Layout & Position”, “Background Style”, “Borders & Corners”, etc.
We have created separate tutorials on each of them, which you can access from our knowledge base.
Hopefully this article about how to use the “Countdown” and “Countdown Evergreen” elements was useful to you.
If so, don’t hesitate to rate it with a smile below :)