The Countdown Timer module allows you to display a live countdown to a specific date and time. It is perfect for product launches, sales deadlines, events, offers, webinars, and coming‑soon pages.
You can control the target date/time, layout style, spacing, typography, and even dynamically loop countdowns based on posts.
Key Features
- Countdown to a specific date and time
- Optional title above the timer
- Flexible layout styles (Flex/Grid based)
- Control Days, Hours, Minutes, Seconds visibility
- Dynamic Loop support (Post‑based countdowns)
- Full design customization for numbers, labels, separators
- Responsive controls for desktop, tablet, and mobile
Content Tab Settings
1. Text Settings
- Title
Enter a heading above the countdown (e.g. “Offer Ends In”).
Leave empty if you don’t need a title.
2. Date & Time
- Date Selector
Choose the target date from the calendar. - Hour & Minute
Set the exact time when the countdown ends.
✅ The countdown updates automatically based on the visitor’s browser time.
3. Link
- Optional link for the module.
Useful if you want to redirect users after clicking the countdown (e.g. to an offer page).
4. Elements
Control which countdown parts are visible:
- Days
- Hours
- Minutes
- Seconds
- Separators (
:)
5. Background
Set a background color, gradient, or image behind the countdown container.
6. Loop (Advanced Use)
The Loop option allows the Countdown Timer to work dynamically with posts.
Available options include:
- Query Type (Post Type)
- Include / Exclude specific posts
- Order & Order By
- Post Offset
- Ignore Sticky Posts
✅ Useful for scenarios like:
- Countdown for multiple events
- Countdown per post or campaign
- Automated landing pages
If you don’t need dynamic content, keep Loop disabled.
7. Order
Control the display order of countdown elements when multiple modules are used.
8. Admin Label
Rename the module inside Divi Builder for easy identification
(e.g. “Countdown – Black Friday”).
Design Tab
1. Layout
- Layout Style: Flex
- Horizontal Gap: Space between countdown items
- Vertical Gap: Space between rows (if wrapped)
- Layout Direction: Row / Column
- Justify Content: Alignment along the main axis
- Align Items: Vertical alignment
- Layout Wrapping: Enable/disable wrapping for smaller screens
2. Text
Controls general text appearance.
- Font family, size, weight etc.
3. Title Text
Typography and color for the countdown title:
- Font family, size, weight
- Text color
- Alignment
4. Numbers Text
Controls the large countdown numbers:
- Font size (recommended: 36–64px desktop)
- Font weight (bold works best)
- Color
✅ Use high contrast for better readability.
5. Separator Text
Style the colon (:) separators:
- Size
- Color
- Spacing
6. Label Text
Controls labels like Days, Hours, Minutes, Seconds:
- Font size
- Color
- Letter spacing (slight spacing looks clean)
7. Sizing
- Width / Max Width
- Height / Max Height
- Alignment (Left / Center / Right)
8. Spacing
- Margin: Space around the module
- Padding: Space inside the countdown container
9. Border
Add borders with:
- Width
- Color
- Radius
Rounded corners work well for modern designs.
10. Box Shadow
Add subtle depth for a premium look.
Recommended: soft shadow with low opacity.
11. Filters
Optional visual adjustments:
- Brightness
- Contrast
- Saturation
✅ Use lightly to maintain clarity.
12. Transform
Micro‑interactions:
- Scale
- Translate
- Rotate
Best used on hover for subtle effects.