With Countdown, create a creative countdown before your website goes live, or a countdown for a new product or upcoming event easily.
Using Countdown Widget #
Use the Countdown widget fully by following the steps mentioned below.
Video Instruction #
Step 1 #
From the menu bar on the left-hand side, select Countdown. Drag and drop the widget on the area you want it to be.
Step 2 #
Once the widget is on place, you can add the contents in the countdown widget. You can select the style you want to display from the Preset option. Pick the preset that matches with your preference.
Step 3 #
In the next step of the Countdown tool, select the due date you want to display from the Select Due Date Time option. Click on the calendar and pick the due date. You can see the real time change on the countdown as well.
Step 4 #
From the Set Settings option, you can pick the item text you want to keep visible. By navigating through the button you can turn on or off the texts below the numbers.
Step 5 #
The next step is Action After Expire. From this option you can set what will happen after the countdown expires. You can choose from three options.
None: Nothing will happen after the countdown expires.
Message: You can select a specific message to appear after the countdown is over.
Redirection Link: You can put a link to which the visitors will be redirected to after the countdown is over.
Step 6 #
From the Style section of the widget you can modify the style and display of the elementor. From here you have two options for modification, General and Digit & Number.
From the General section you can select the background type, color of the widget. You can also add images on the background of the widget. You can choose whether you want to use a plain background or apply gradient on the color of the background.
If you include the image on the background, you will get additional features such as the position, attachment, repeat style and size of the image.
Digit & Number #
From the Digit & Number section, you can customize the design and style of the digit and number easily. You can customize the typography, color and labels of the numbers.
The typography option will allow you to customize the font with tons of variations. You can select family font, size, style, transform, decoration and more.
Step 7 #
In the advanced section of the widget, you will have the flexibility to add margin and padding to the widget. You can also modify the Z-index to customize the widget more.
You will also get the chance to edit and customize the following options:
- Motion Effects
- Background, Border
- Positioning, Responsive
- Custom CSS.
Motion Effects #
From the Motion Effects option, you can add different effects such as fading, zooming, bouncing, sliding, rotating, attention seeking motion, lightspeed, and more effects to make your widget look different.
If you want to customize the Background with specific color, gradient or images, you can do that from the advanced settings as well.
If you want to add any line, box, dots and other design variations as borders of the widget, you can do it from here. You can also customize the size and insert shadow effects if you want to.
This feature will allow you to fix the positioning of the widget. From the width section you can select if the position will be full width, inline or customized. And you can set the position as absolute or fixed as well from these settings.
You can check the responsiveness of the widget if you toggle through the available options. However, the change of the widget will be only visible on the live page or preview, not in the Elementor.
With Attributes, you can add custom HTML attributes to any elements. However, this feature is only available with the pro version of the Droit Elementor Addons.
Custom CSS #
Custom CSS lets you add CSS code to any widget, and see it render live right in the editor. However, this feature is only available with the pro version of the Droit Elementor Addons.