---
title: Countdown
description: "## Overview The **Countdown widget in SiteCraft** allows you to display a live countdown timer to highlight upcoming events, launches, or deadlines. It creates urgency and engagement by showing days, hours, minutes, and seconds ticking down in real time. ---…"
url: "https://sitecraft.themeshala.com/docs/countdown/"
updated: "2026-04-19"
category: Creative Widgets
---

# Countdown

## Overview

The **Countdown widget in SiteCraft** allows you to display a live countdown timer to highlight upcoming events, launches, or deadlines. It creates urgency and engagement by showing days, hours, minutes, and seconds ticking down in real time.

---

## Key Features

- Live countdown timer
- Custom target date and time
- Multiple display styles *(if available)*
- Label customization (Days, Hours, Minutes, Seconds)
- Optional title or message
- Alignment control
- Smooth responsive layout
- Fully responsive design

---

## How to Enable the Widget

Before using the Countdown widget, make sure it is enabled.

**Steps:**

1. Go to **SiteCraft → Dashboard → Widgets**
2. Find **Countdown Widget**
3. Toggle to enable it
4. Click **Save Changes**

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/countdown-switcher.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/countdown-switcher.png)

---

## How to Add the Widget in Elementor

1. Open your page with **Elementor Editor**
2. Search for **“Countdown”** under SiteCraft widgets
3. Drag and drop it into your section
4. Set your date and customize design

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/countdown-el-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/countdown-el-scaled.png)

---

## Content Settings

Configure countdown timing and labels.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/countdown-el-content-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/countdown-el-content-scaled.png)

**Options:**

- **Due Date & Time** – Set target event date
- **Labels** – Customize text for:
  - Days
  - Hours
  - Minutes
  - Seconds
- **Title/Message** – Optional heading above countdown
- **Alignment** – Left, Center, Right

---

## Style Settings

Customize the appearance of the timer.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/countdown-el-style-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/countdown-el-style-scaled.png)

**Available Controls:**

- **Number Typography** – Font, size, weight
- **Label Typography** – Styling for time labels
- **Number Color** – Countdown digits
- **Label Color** – Text under each unit
- **Box Styling** – Background, padding, border, shadow
- **Spacing** – Control gaps between units
- **Separator Style** *(if available)*

---

## Advanced Settings

Fine-tune layout and responsiveness.

[![](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/countdown-el-advanced-scaled.png)](https://sitecraft.themeshala.com/wp-content/uploads/2026/04/countdown-el-advanced-scaled.png)

**Includes:**

- Margin & padding
- Responsive visibility
- Motion effects
- Positioning
- Background & border

---

## Use Cases

Perfect for:

- Product launches
- Event countdowns
- Sales deadlines
- Coming soon pages

---

## Result

You can now create engaging real-time countdowns using the **SiteCraft Countdown Widget**, helping increase urgency and user interaction.