---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/countdown-timer'
title: 'Adding a Countdown Timer | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:28:51+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Date countdown'
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adding a Countdown Timer'
      description: 'Date countdown'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:28:51+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/countdown-timer'
      articleSection: 'Data and motion'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/countdown-timer'
      description: 'Date countdown'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Data and motion](/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Adding a Countdown Timer.

Date countdown

 Learn DXPR BuilderBuild pagesAdd contentData and motion

   ## In this guide

 Related guides

- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

You get a live clock that counts down to your event, deadline or offer end. Use it when a date matters and you want visitors to act before it passes.

## Add a countdown timer

Open your page while logged in: the builder controls appear when you hover the content area. [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page) shows the basics.

1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **Countdown timer**. It lands at the top of the column and its settings dialog opens.
2. Choose a **Countdown style**, for example **3D flip**.
3. Keep **Date / Time Limitations** on its default, Specify date only, and set the **Date** the countdown ends.
4. **Display options** has all five units ticked. Clear the ones you don't need; here we clear **Show remaining years**.
5. Click **Save** in the dialog. Then click **Save** in the toolbar at the top of the content area to store the page.

  ## What you see

The clock counts down to the date you picked, in the style and units you chose. In the video, a 3D flip clock shows days, hours, minutes and seconds to a date three months ahead. Visitors see it once you save the page and it is published.

## Set up your countdown timer

Hover the element and open **More > Settings** in its control bar. Options:

- **Countdown style:** the look of the clock: Plain, Grid, 3D flip, Disc, Airport style or Transparent.
- **Date / Time Limitations:** what the clock counts to. Pick Specify date only (the default), Specify date and time, Specify time only (repeating every day) or Resetting counter (set interval up to 24 hours).
- **Date:** the day the countdown ends. It ends at midnight as that day starts, in each visitor's own time zone. The other modes show **Date / Time** or **Time** instead.
- **Reset in hours:** with **Reset in minutes** and **Reset in seconds**, the interval of a resetting counter.
- **Page referrer:** a page that opens when the time runs out. It shows for the repeating and resetting modes.
- **Automatic restart:** starts a resetting counter again when it reaches zero.
- **Display options:** the units the clock shows, from Show remaining years to Show remaining seconds. All five are ticked by default.

## If you don't see it

- **Countdown timer is not in the Content tab.** Your user profile hides it. Ask an administrator to tick **Countdown** under **Elements** in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **It is gone after you reload.** The page was not saved. Add it again and click **Save** in the toolbar at the top of the content area.
- **All digits show zero.** The target date is in the past. Hover the element and open **More > Settings**, then set a future **Date**.
- **There is no Date field.** **Date / Time Limitations** is set to another mode. Pick Specify date only, or fill in the **Date / Time** or **Time** field that mode shows.
- **The clock starts over every day.** **Date / Time Limitations** is set to Specify time only (repeating every day). Pick Specify date only for a one-off event.

## What's next?

[Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change spacing and background for your countdown timer.