Countdown

Use the Countdown module to display a live timer that counts down to a target date and time.

Usage

The Countdown module outputs a live timer that ticks down to a specific date and time. Each time unit — days, hours, minutes, and seconds — displays as a labeled number block. Choosing the Numbers + Circles layout wraps each unit in an animated SVG circle that fills as the unit's time progresses.

Use the Countdown module to build urgency for limited-time offers, event registrations, product launches, or sale deadlines. The optional redirect setting automatically sends visitors to a new URL once the countdown reaches zero, so the page responds to the event end without manual updates.

Module Settings

The Countdown module settings control the target date and time, redirect behavior, and visual styling of the timer.

General tab

The General tab sets the target date, time, time zone, and optional post-countdown redirect.

Date Supports: Field Connections

Sets the target date the countdown counts down to.

Time

The Time section sets the time of day and time zone for the countdown target.

Time settings

Time Default: 01:00; Supports: Field Connections

Sets the time of day for the countdown target.

Time Zone Default: UTC

Sets the time zone used to interpret the target date and time.

Redirect Default: Disabled

Controls whether the page redirects after the countdown reaches zero.

• Disabled: No redirect occurs after the countdown ends.
• Once After Countdown End: Redirects the visitor once when the countdown reaches zero.
• Always After Countdown End: Redirects on every visit after the countdown has ended.

URL

URL Supports: Field Connections

The destination URL used when Redirect is set to Once After Countdown End or Always After Countdown End.

Link settings

Link settings control the URL, link target, nofollow behavior, download behavior, and other link attributes where available.

Style tab

The Style tab controls the countdown layout, alignment, number and text appearance, and layout-specific visual options.

Layout Default: Numbers

Selects whether the countdown displays numbers only or numbers with animated SVG circle progress indicators.

• Numbers: Displays each time unit as a labeled number block.
• Numbers + Circles: Wraps each time unit in an animated SVG circle that fills as the unit progresses.

Numbers Settings

Backgrounds

The Backgrounds section controls the background color and corner rounding of each number block. Available when Layout is set to Numbers.

Backgrounds

Number Background Color Supports: Field Connections

Sets the background color applied behind each countdown number block.

Number Border Radius Default: 0

Sets the corner rounding of each number block in px.

Separator

The Separator section controls whether visual separators appear between time units. Available when Layout is set to Numbers.

Separator settings

Show Time Separators Default: No

Shows or hides separators between countdown time units.

Separator options

Separator Type Default: Line

Sets the style of the separator displayed between time units when Show Time Separators is set to Yes.

• Colon: Displays a colon character between time units.
• Line: Displays a vertical line between time units.

Colon settings

Separator Size (Colon Only) Default: 15

Sets the font size of the colon separator in px. Available when Separator Type is set to Colon.

Separator Color Supports: Field Connections

Sets the color of the separators between time units.

Numbers + Circles Settings

Circle Styles

The Circle Styles section controls the appearance of the SVG circle indicators. Available when Layout is set to Numbers + Circles.

Circle Styles

Circle Foreground Color Default: f7951e; Supports: Field Connections

Sets the stroke color of the animated foreground arc on each circle.

Circle Background Color Default: eaeaea; Supports: Field Connections

Sets the stroke color of the static background track on each circle.

Circle Size Default: 200

Sets the diameter of each circle indicator in px.

Circle Stroke Size Default: 10

Sets the stroke width of both the foreground arc and background track in px.

Alignment Default: center; Supports: Responsive

Sets the horizontal alignment of the countdown timer.

Numbers and Text

The Numbers and Text section controls the color, typography, and spacing of countdown numbers and time unit labels.

Numbers and Text

Number Color Supports: Field Connections

Sets the color of the countdown numbers.

Number Typography Supports: Responsive

The font settings for the countdown numbers.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Text Color Supports: Field Connections

Sets the color of the time unit labels beneath each number.

Text Typography Supports: Responsive

The font settings for the time unit labels.

Typography settings

Typography settings control font family, size, weight, line height, letter spacing, text transform, and responsive text styling where available.

Horizontal Padding (Numbers Only) Default: 10

Sets the left and right padding inside each number block in px. Available when Layout is set to Numbers.

Vertical Padding (Numbers Only) Default: 10

Sets the top and bottom padding inside each number block in px. Available when Layout is set to Numbers.

Number Spacing Default: 10

Sets the horizontal margin between each countdown unit in px.

Advanced tab

The Advanced tab includes all the standard settings for margins, visibility, animations, and advanced HTML configurations.

See the Advanced tab section for more information.