How to Configure & Style Countdown #
Countdown helps you bring your Elementor website to life with a dynamic, animated countdown with an evergreen timer. This element is perfect for creating hype about a new product launching, or for Coming Soon pages. It comes with tons of cool customization options so you can add your own unique touch, and even lets you choose an Expiry Action for when your countdown is over.
How to Activate Countdown #
To activate this Sastra Addons element, find the ‘Countdown’ element from the ‘Search’ option under the ‘ELEMENTS’ tab. Drag and drop the element anywhere on the page.
After you have dragged and dropped the element into any empty section of your page, you should be able to see it on your site like this by default.
How to Configure the Content Settings #
After activating the Countdown element, switch to the ‘Content’ tab and you will see several options like ‘General’, ‘Content’, and ‘Expire Actions’.
General #
From the ‘General’, you can choose the timer type as ‘Due Date’.
If you choose the ‘Due Date’ option, you will be able to set your ‘Countdown Due Date’ by choosing a specific date from the drop-down calendar. After that, you have the option to set the appearance of your countdown’s label by selecting either the ‘Block’ option or the ‘Inline’ option from the Content.
Content #
From the ‘Content’, you can adjust the appearance of your evergreen countdown’s label by selecting either the ‘Block’ option or the ‘Inline’ option from the Label Position settings.
Besides, you can select which labels you want to display. You can also set custom labels here. If you want, you can add a countdown separator and set the positioning for it too.
Expire Actions #
From the Expire Actions you can choose the expire type for your countdown. You can choose to hide timer, hide element, display a personalized message, or redirect your visitors to a different page or even add any saved template if you have them.
Click to See Live Demo #
How to Style Countdown #
To style your Countdown click on the ‘Style’ tab and play around with the settings there.
General #
From here, you can customize the look of your countdown by enabling a gradient background, or simply sticking to a solid color background if that’s your preference. If you want you can also add an image as your countdown background.
Besides, you can tweak the space between the boxes in your countdown, adjust the space below the countdown container, and change the margin and padding. Moreover, you can add a border type and set the border radius, and also add a box shadow as well.
Content #
You can set countdown digit colors and the countdown typography colors. You can also change the font size and font type from these settings. You can also choose the alignment of your countdown from here and separator border radius and separator color.
Final Outcome #
By following these basic steps and changing these settings, you can create an eye-catching countdown for your Coming Soon pages or Product Launch pages with Countdown.
By using Countdown, this is how you can create a stunning countdown to get your visitors excited and increase your conversion in the process.
If you require any help, feel free to contact our support for further assistance.
