The “Countdown” and “Countdown Evergreen” elements are useful tools if you want to add a countdown campaign to your page. If you already know how to use the element and its options, feel free to check out the blog post we have created about adding an evergreen countdown timer to your pages.
This article will go through the process of how to add the elements to your page and how to use them.
Countdown Element
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 the countdown to end.
Add the Element to the Post/Page
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:
After you add the element to your page, you will be able to choose a countdown type from the template lightbox:
Depending on the animation type you want for our countdown, you can choose between – “Flipping Countdown”, “Sliding Countdown” and “Static Countdown”.
Choose the Template
The first available option from the left sidebar is the template library one, from where you can change the template of the countdown. Whenever you click it, you will be taken to the template lightbox from where you initially chose the design:
Note: If you are using Thrive Ultimatum on your website, then you will be able to use additional templates for creating multiple types of campaigns.
Use the Main Options of the Element
Next, you can start using the left sidebar’s “Main Options” to further customize the element:
Edit Design
The first thing you can do in the “Main Options” sidebar is to customize the design of the countdown by clicking on the “Edit Design” button:
This will open another set of options in the sidebar, from where you can, once more, access the templates lightbox and also the visibility options of the countdown tiles:
You can opt out of seeing the “days”, “hours”, “minutes” or “seconds” tiles, just by clicking on the corresponding option.
If you click, for example, on the “Days” option, then the day tile will disappear from the countdown, and the remaining number of days will automatically be converted to hours:
If you don’t want to see the seconds, then just click on the “Seconds” option, and the corresponding tile will disappear from the countdown:
Another option you can use in this sidebar is the “Enable tiles separator”, from where you can add or remove the separator between the tiles of the countdown:
If you click on either of the items available within the countdown timer (digits, text, separators, etc.), you will enter the “Group Styling” editor:
-
Active State
Before bringing any changes to the element, you should decide which state of the countdown you would like to edit first, from this option located at the bottom side of the screen:
In the “Active” state you will be able to customize the default design of the element, for when the timer counter is running:
From here you will be able to edit various items of the countdown, depending on what you select from the drop-down list:
You can edit the label (1), tiles (2), digits (3), and separators(4).
The “Grouped Styling” feature will basically allow you to edit the design of the countdown items as a group. This means that any change you make will be applied to all the items pertaining to that group.
If you select, for example, the “Grouped countdown labels”, then you can edit the labels just like you would do with any other text element, as the corresponding options will appear in the left sidebar:
However, should you wish to edit each label individually you just have to select the one that you want to apply the change to, and then click on the green lock option located next to the item, or in the sidebar:
Once clicked, the lock will turn red, and you will be able to bring changes only to the selected item:
The second option available in the dropdown, ”Grouped countdown tiles” lets you edit the whole tile, not just a particular item:
From the “Grouped countdown digits” you can edit the actual digits of the timer:
Note: Keep in mind that the “Grouped countdown digits” might have different options, depending on the template you have chosen for the countdown:
The above template has a divider line, which is running across the timer. The divider can be customized from the same left sidebar options.
You can change the color of the divider:
You can also choose between three different types of dividers:
And lastly, you can change the size:
From the “Grouped countdown separators”, besides the usual formatting options already showcased above, you can also change the actual symbol of the separator
Once you are done editing the countdown items, click on “Exit Grouped Styling” to go back to the “Main Options” sidebar:
-
Expired State
The “Expired” state is what the user will be seeing on screen after the countdown has ended. You can select it from the panel located in the lower part of the screen:
From the left sidebar options, you will be able to access once more the templates lightbox:
Also, you can choose to activate the “Display expired countdown” toggle, which means that even after the timer has ended, it will still be visible on the screen:
If not, the user will see a message letting him know that he missed out on the offer or promotion for which you have set up the countdown timer:
If you want to customize the timer whilst the “Expired” state is selected, you can do so by adding elements to the template.
You can use the right sidebar to drag and drop elements to your template, as you best see fit, and use them just like you would use any other Thrive Architect element:
When you are ready to return to the “Main Options” sidebar, click on “Done”:
In the “Main Options” sidebar, there are still several options you can choose to further customize the “Countdown” element:
Inherit page smart colors
If you have added the countdown timer on a landing page, then you’ll have the option to “Inherit page smart colors”:
You can read more information about the “Smart Color Management” options in this article linked here.
Note:
This option will not be available if you are using a basic page:
If you don’t want to use the smart colors, you can deactivate the toggle, which will automatically enable the color field, from where you can adjust the color as you want:
You can use the color picker until the desired color is reached, or use a HEX/RGB code instead. Once done, click on “Apply”:
You can also choose one of the already existing colors from the “My Colors” and “Theme Colors” sections.
After you are done, don’t forget to click on the “Apply” button to make sure all your changes have been saved.
Title Size
Next, you can adjust the size of the countdown tile, by dragging the slider from left to right, or by inserting a numerical value in the corresponding field:
End date and Time
The next available options are related to time settings:
You can set the “End date” for the countdown, by clicking on the date field and selecting a day:
The countdown will display automatically the remaining number of days until the set date:
If you want to be even more specific regarding the end date, you can add a number of hours and minutes in these two fields, meaning that the “end date” will be increased with the number of hours and minutes added by you:
Important!
There might be instances in which you want to run a short campaign or promotion that would last only several hours.
If so, then you first have to make sure that you set the timer to the current date (in this example, 27th of April):
And then, in the “Time” field, insert the hour until the campaign should run. So if the current time is 10 AM, and you’d want your campaign to run for 1 hour only, this means that the campaign should end at 11 AM (so the number inserted into the hour field should be 11).
You are basically inserting a value that represents the actual time when the campaign would end:
Timezone
The timezone details can be viewed in the following section of the sidebar, and cannot be edited from here as they are taken from the “General” section of your WordPress Admin Dashboard:
If you want to read more about how to set up the timezone details in Thrive Ultimatum, you can check out this article.
Visible countdown tiles
From the next option you can set which of the tiles you want to have displayed in the countdown, and has already been explained earlier in the article:
Enable tile separator
Lastly, from the “Enable tile separator” toggle, you can show or hide the separators between the tiles:
Countdown Evergreen Element
The “Countdown Evergreen” element is another type of countdown that you can add to 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 to the Post/Page
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 template library lightbox, from where you can choose the desired template:
Choose the Template
The first available option from the left sidebar is the one allowing you to change the template of the countdown:
Use the Main Options of the Element
The “Main Options” can be used just as in the case of the “Countdown” element
All the available options and features have been explained earlier in this article, so make sure to read those guidelines if you want to learn how to use them.
Going forward, we will explain the options which are specific to the “Evergreen Countdown” element.
Time
From the left sidebar options, 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:
Starts again after
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 corresponding fields:
This will mean that after the countdown ends, it will start again automatically as per the time you have set for it.
Use the Rest of the 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 🙂