Skip to main content

Countdown timer

Counts down to a date: a launch, an offer, an event or a price change. It's a nestable element, so its days, hours, minutes and seconds are ordinary Bricks blocks you style like anything else. The end date can come from dynamic data.

See it live

Four boxes showing days, hours, minutes and seconds left Live demo: the same countdown with four block styles (Boxes, Plain, Compact, On dark).

Add it​

  1. In Bricks › Fancy Bricks, turn on Nestable countdown with dynamic data.
  2. In the builder, add Fancy Countdown (category fancy-bricks).
  3. Set the Target Date.

It's nestable. It comes with four blocks, each with a number and a label:

BlockNumberLabel
Days BlockDays Number (00)Days Label ("Days")
Hours BlockHours Number (00)Hours Label ("Hours")
Minutes BlockMinutes Number (00)Minutes Label ("Minutes")
Seconds BlockSeconds Number (00)Seconds Label ("Seconds")

Style each block, number and label from its own panel. Edit the labels' text freely; the numbers are filled in by the countdown.

Settings​

Fancy Countdown in the Bricks panel: the date settings, the layout of the boxes, and the Days, Hours, Minutes and Seconds blocks in the structure panel The real Bricks panel. From left to right: Date Source and Target Date, the layout of the blocks, and the four blocks in the structure panel.

All the settings are in the Content tab.

ControlWhat it doesDefault
Date SourceDate Picker to pick a date by hand, or Dynamic Field to read it from dynamic data.Date Picker
Target DateThe date and time to count to. With Date Picker.One week from when you add it
Dynamic Date FieldThe dynamic data tag that holds the date, for example an ACF date field. With Dynamic Field.—
TimezoneThe timezone of the target date, as a UTC offset (UTC−12:00 to UTC+14:00).Your site's timezone
Expired MessageReplaces the blocks when the countdown reaches zero.Time expired!
DirectionThe direction of the blocks (row or column).Row
Justify Content, Align ItemsHow the blocks line up.—
Items GapSpace between blocks.1rem

The date from dynamic data​

  1. Set Date Source to Dynamic Field.

  2. In Dynamic Date Field, type the dynamic data tag that holds the date, such as a date field from ACF or from WooCommerce. For an ACF field named event_date, the tag is:

    {acf_event_date}

  3. Set Timezone to the timezone the date is written in.

The countdown reads the common date formats, including:

  • 2024-12-31 23:59:59, 2024-12-31 23:59 and 2024-12-31
  • 31/12/2024 23:59 and 21/06/2025 11:15 pm (the ACF format)
  • 12/31/2024 11:59 PM
  • 31-12-2024
  • December 31, 2024 11:59 PM and 31 December 2024
  • a Unix timestamp

The date is read in the Timezone you set.

note

Write an Expired Message that still makes sense after the date: when the countdown reaches zero, it replaces the blocks.

Tips​

  • One countdown per card. In a query loop, each card can count to its own date field: events or webinars, each with its start time.
  • Sales and early-bird prices. Put it in a hero or a CTA band with the deadline, or on the pricing page counting to the price change, and write an Expired Message that still makes sense after the date.