> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.dorik.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Countdown Timer Element

# Getting Started

You can add a countdown timer in your website’s empty section from the elements option. The countdown timer can be used for many purposes because of its many customizing options built to suit your needs. This article will cover how you can add a countdown timer to your website and start customizing it.


# Adding a Countdown timer

Start adding a countdown timer to your website; refer to the **steps** or the **GIF** provided below:

- Click on the `+` button labeled **Add Element or Container** within an empty container
- Choose the **Countdown timer** from the **Elements** tab
- A countdown timer will appear on your website!


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2024-05-09-at-60_68axhg.gif)


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_3sb440.png)


![Countdown timer after it is added](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_z3xsk7.png)
 

---

# Adjusting and Stylizing the Countdown Timer

The Countdown timer element has multiple stylizing options. You can set the following:

- End Date & Time
- Time Options
- Counter Style
- Background

…of the Countdown timer element! Let us see these settings one by one:

## End Date & Time

You can set the settings from the End Date & Time option. Refer to the picture below:

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/image_v6j1cu.png)


- Add a finishing date for the countdown
- Add the time of the deadline
- Choose the timezone
- Choose a text that will appear when the countdown is finished

## Timer Options

The timer options setting lets you stylize your countdown timer. You can change the size of the numbers and the texts on the counter set a separator, and give them colors of your choice to suit your preferences.

Refer to the **GIF** below to see the settings in action:


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-31-at-45_wvlcj4.gif)

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-31-at-45_ka3wnb.gif)

![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-31-at-45_1c7n96o.gif)

---

## Counter Style

The counter style setting lets you customize your counter’s overall width, give it an alignment and make other changes.

Refer to the **GIF** below to see the settings in action:


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-31-at-50_1hpvi4.gif)


![](https://storage.crisp.chat/users/helpdesk/website/cf1fc9cc00911000/gif-recording-2022-08-31-at-50_1w2690h.gif)

---


**How to add Countdown Timer Element on your website using Dorik Website Builder. Please check following video to know about this.**


${youtube}[Dorik Countdown Timer Element](SCaD3P4Fhvs)


---

---


# Related articles

[Counter Circle](/en/article/counter-circle-19wld1x/)

[Image](/en/article/image-8z2fmm/)