If you want the customers to know about your upcoming sale or a product launch, the Countdown Timer widget can be of a great use. It is a creative way of keeping your visitors engaged about the upcoming happenings in your business.
How to use the Countdown Timer Widget of The Plus Addons For Elementor
The Countdown widget is very easy to use. Just add the launch date and time and you are good to go. Let’s understand how to use this widget in the tutorial below.
Search for the Countdown widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.
Click to set your launch date and time on the calendar. The date is set according to your timezone settings in the WordPress Admin Dashboard – Settings > General > Timezone.
Slide the toggle to ON to enable inline styling. It will basically display the counter in one single line.
Slide the toggle button to YES to enable this option.
Days Section Text
Edit the Days Section Text here.
Hours Section Text
Edit the Hours Section Text here.
Minutes Section Text
Edit the Minutes Section Text here.
Seconds Section Text
Edit the Seconds Section Text here.
Set the styling options for your counter in this section.
Counter Font Color
Set the counter font color.
Set the font options for your countdown here.
Label Typography, Color, and Background Options
Set the typography for Days, Hours, Minutes, and Seconds. You can also set the text and border color. We have also provided Background Options to add a image, color or gradient background.
Padding and Margin
Add your padding and margin for the countdown timer here. The value should be in pixels.
Border, Box Shadow and Border Radius
Set your border style, box shadow and border radius options here.
On Scroll View Animation
On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View On Scroll View Animation Tutorial