Intro
Advanced Countdown & Content Reveal System
Create powerful countdown experiences, build urgency, and control content visibility based on time, all directly inside Elements.
Whether you're launching a product, running a limited offer, or revealing content at a precise moment, Countdown gives you full control over timing, layout, and what happens when the timer reaches zero.
Countdown is more than a timer. It is a complete timing system for interactive layouts, letting you display remaining time and dynamically change content when the countdown ends. Use it to create urgency, unlock content, hide sections, or trigger alternative layouts automatically — no code required.
ⓘ Build urgency and timed experiences. Countdown is ideal for: product launches and pre-orders, limited-time offers and promotions, Black Friday and seasonal sales, webinar and event registrations, coming soon pages, content unlock systems, membership or gated content releases, and marketing landing pages with urgency triggers.
Countdown Options
Countdown
✓ The countdown is based on a single essential value: the Target Date. This value defines the exact moment when the countdown reaches zero and must be entered in the following format:
Month DD, YYYY HH:MM:SS, Example: December 31, 2030 23:59:59
End Actions
✓ Area 1 – This panel defines what happens when the countdown reaches zero and connects the Countdown component with dynamic content behaviors inside Elements.
✓ Area 2 – Dropzone to Hide + Dropzone to Show.
Expired State Content: Defines what happens at expiration by hiding or revealing content blocks. This allows you to switch page sections at the exact moment the countdown ends, creating a clear before/after state.
Countdown Style
✓ Flexible structure for any design
Data Style
✓ Countdown integrates deeply with the Elements design system, giving full control over every visual detail:
Label Style
✓ Fully customizable design system, countdown integrates deeply with the Elements design system:
Text Token
✓ Countdown values can be used as dynamic tokens inside any text component, inserted directly into natural language phrases that update in real time. This enables time-based messages that adapt automatically as the countdown progresses.
Demo Mode
✓ Demo Mode lets you simulate the full countdown flow without waiting in real time. It allows you to preview both the active countdown and its expiration state directly in the editor.
Background
Background
An optional container background with color, opacity, and shadow. Disable it to inherit the background from the parent element instead
Spacing
✓ Standard Elements margin and padding controls for the component container. Enable to activate, disable to let the surrounding layout handle spacing.
Borders
✓ Add a border and rounded corners to the Countdown Area
Advanced
✓ Fine-tune visibility and extend the component with custom classes for edge cases and advanced layouts.