The Digi Countdown widget allows you to display a functional timer on your website, perfect for “Coming Soon” pages or limited-time e-commerce offers.
Content Tab #
Layout #
- Gap between boxes: Use the slider to adjust the horizontal spacing (gutter) between the individual time units (Days, Hours, Minutes, and Seconds).
- Alignment: Set the position of the entire countdown timer to Left, Center, or Right within its container.
Countdown #
- End Date/Time: Select the specific fixed date and time for the countdown to expire.
- Display Toggles: Individually show or hide Days, Hours, Minutes, and Seconds.
- Leading Zeros (05): Enable this to maintain a two-digit format even when the value is less than 10.
- Show Unit Labels: Toggle the visibility of the text labels (e.g., “Days”) below the numbers.
- Show Separator: Enable or disable the divider symbol between each time unit.
- When finished: Choose an action (such as “Show message” or “Hide message”) to occur once the timer reaches zero.
- Finish Message: Enter the custom text that will appear after the countdown expires.
Style Tab: Box #
- Padding: Control the internal spacing within each countdown box.
- Background Type: Set a Classic (solid) or Gradient background for the boxes.
- Border Type: Select a border style (e.g., Solid, Double) or keep the default.
- Border Radius: Round the corners of the timer boxes by pixel value.
- Box Shadow: Apply a shadow effect to add depth to the individual boxes.
Style Tab: Number & Label #
- Number Typography & Color: Customize the font properties and color of the countdown digits.
- Label Typography & Color: Adjust the font style and color specifically for the unit text (Days, Hours, etc.).
Style Tab: Separator #
- Opacity: Adjust the transparency level of the separators.
- Horizontal/Vertical Spacing: Fine-tune the positioning gap around the separators.
- Padding & Dimensions: Control the specific Padding, Height, and Width of the separator element.
- Background Color: Set a custom color specifically for the separator.
