Choose a layout and countdown units
Countdown Timer Pro extends a responsive Gutenberg countdown block for deadlines such as a sale ending, a product launch, or an event beginning. Add the block to a post or page in the WordPress Block Editor, or use a shortcode to place the countdown beyond the block workflow. Choose one of four layouts and select whether to show days, hours, minutes, and seconds. Pro adds extra predefined countdown designs.
Style the wrapper, boxes, and timer details
Controls cover the wrapper, countdown boxes, digits, labels, and separators. Set the wrapper width, background, padding, and shadow. Configure box backgrounds, dimensions, borders, and shadows, then adjust the typography and colors of the digits and labels. Separators can be shown or hidden, with options for their type, size, and color.
Place prefix text before the timer and a suffix button after it. Style the prefix presentation and adjust the button typography, color, and padding. Prefix and suffix direction settings control the layout flow around the countdown.
Control what visitors see
- Show custom content after the countdown has elapsed.
- Hide the countdown box when it reaches zero.
- Set visibility separately for mobile and tablet devices.
- Add a dismiss button so visitors can hide the countdown manually.
Use countdowns for campaigns and events
- Count down to the end of a discount or limited-time offer.
- Build anticipation for a product or website launch.
- Show when an event or webinar begins.
- Pair the timer with a call-to-action button for promotional content.
Add a countdown in the editor
- Install and activate Countdown Timer.
- In the Gutenberg editor, add the Countdown Timer block from the Widgets block category.
- Set the target date in the block settings.
- Adjust the design and Pro behavior in the right-side settings sidebar.
- Publish the post or page to display the countdown.