The Countdown widget lets you create countdown timers directly on your webpage. This widget is customizable and can be tailored to fit different needs, whether it’s for a specific event or a recurring reminder.
Adding Countdown widget
- Find the Countdown widget under the Elementor section of your 10Web Builder page.
- Drop the widget onto your preferred location on the canvas.
Content tab
Type:
- Due Date: Set a precise ending date and time for the countdown.
- Evergreen Timer: This option allows you to specify the duration of the countdown in hours and minutes.
Layout: Opt between Squares, Circles or Inline display.
Time: You can choose to display or hide Days, Hours, Minutes, and Seconds.
Hide counter after expiry: Specify a message to display once the countdown ends or disable it so the countdown will automatically be hidden once the target time is reached.
Description: Write a description of the countdown to be placed at the top of the containers.
Show Labels: Toggle the visibility of labels for each time unit, and customize the text with the Custom Labels option.
Custom Labels: Modify the text of the labels associated with the countdown timer.
Note:
The Evergreen Timer ensures that each visitor experiences the same countdown duration as set, regardless of when they access the page.
Style tab
Boxes
- Container Width: Adjust the width of the container that holds the countdown.
- Background Color: Select a background color for the countdown boxes.
- Border Type: Choose from various border styles including none, solid, double, dotted, dashed, or grooved to frame the countdown boxes.
- Border Radius: Modify the border-radius to customize the roundness of the corners.
- Space Between: Manage the spacing between individual countdown boxes.
- Padding: Define the padding inside the boxes to control the space between the content and the edges, affecting readability and design.
Content
- Description: Choose the color of the description and adjust the typography settings for it.
- Digits: Customize the color of the numerical digits and select typography options for the numerical digits.
- Label: Choose the color of the label text and adjust the typography settings for the label text.
- Expiry Text: Pick a color for the Expire Message text that ensures visibility and modify the typography options for the Expire Message to enhance readability.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.