The Countdown Timer block is a powerful tool designed to create a sense of urgency and drive conversions by highlighting time-sensitive offers, events, or deadlines on your website.
Features #
1. Flexible Timer Modes #
- Fixed Countdown: Set a specific target date and time. This is perfect for product launches, seasonal sales (like Black Friday), or upcoming events.
- Evergreen Timer (Pro): Creates a unique countdown for every individual visitor. The timer starts the moment they first land on your page, making it ideal for personalized limited-time offers.
2. Multi-Level Data Storage #
Control how your timer data is shared across your site:
- Block Level: The timer is unique to this specific block instance.
- Post/Page Level (Pro): The timer state is synchronized across the entire post or page.
- Site Level (Pro): Create a global timer that stays consistent for a visitor no matter which page they visit on your site.
3. Smart Expiry Actions #
Choose what happens automatically when the timer hits zero:
- Keep at Zero: The timer remains visible at 00:00:00.
- Hide Content: Automatically hide the timer or other specific elements on your page to prevent users from seeing expired offers.
- Auto-Redirect: Instantly send visitors to a new page (like a “Sale Ended” or a different promotion page) once the time is up.
4. Evergreen Restart (Pro) #
Ensure your promotions stay fresh. You can configure Evergreen timers to automatically reset after a certain period, allowing you to run recurring automated campaigns without manual intervention.
Design & Customization #
Professional Typography #
- Full control over font sizes, line heights, and weights for both the numbers and the labels.
- Support for custom text transforms (Uppercase, Lowercase, etc.) to match your brand’s voice.
Advanced Item Settings #
- Custom Spacing: Adjust the internal padding of individual timer units (Days, Hours, etc.) to create modern, card-style layouts.
- Border Controls: Apply custom borders, colors, and corner roundness to each timer unit.
- Label Styling: Separately style the labels (e.g., “Days”, “Hours”) from the countdown numbers for a more polished look.
Responsive Design #
- The block is fully responsive and looks great on desktops, tablets, and mobile devices.
- Built-in support for core WordPress spacing and color tools for seamless integration with your theme.
How to Use: A Step-by-Step Guide #
Step 1: Add the Block #
Open the WordPress editor on any Post or Page. Click the (+) Block Inserter and search for “Countdown Timer”. Click the icon to add it to your content.
Step 2: Choose Your Timer Type #
In the right-hand sidebar under Timer Settings, choose your preferred mode:
- Fixed Date: Use the calendar picker to select exactly when your promotion ends.
- Evergreen (Pro): Set the amount of time (Hours and Minutes) each new visitor will see when they first arrive.
Step 3: Configure Storage & Scope (Pro) #
If you want the same timer to show up on multiple pages or different areas of the same page, adjust the Data Storage Level:
- Select Block Level for a one-off timer.
- Select Site Level if you want the countdown to follow the visitor as they navigate your website.
Step 4: Set Expiry Actions #
Decide what happens when the clock hits zero under the Expiry Action dropdown:
- To redirect users, select Redirect and paste your target URL.
- To hide the timer, select Hide (you can even specify other elements on the page to hide along with it).
Step 5: Customize the Look #
Head over to the Style tab (the half-moon icon) to refine the design:
- Typography: Adjust the size and font of your numbers and labels.
- Item Settings: Add padding and borders to create a “card” effect for each timer unit.
- Colors: Set your brand colors for text and background to make the timer pop.
Pro Tip: Testing Evergreen Timers #
When testing an Evergreen timer, use the “Restart Evergreen for Me” button in the editor sidebar. This clears your local browser data and lets you see the timer start fresh as if you were a new visitor.
