Back to DigiBlocks

Countdown Block

The Countdown Block creates dynamic countdown timers that display the time remaining until a specific date and time. This block is perfect for product launches, event announcements, special offers, sales deadlines, or any time-sensitive content where you want to create urgency and engagement.

Adding a Countdown Block

To add a Countdown Block to your page:

  1. Click the + (Add Block) button in the editor
  2. Search for “Countdown” or navigate to the DigiBlocks category
  3. Click on the Countdown block to insert it

Once added, the block will display a preview countdown with default settings showing days, hours, minutes, and seconds.

Basic Configuration

Setting the End Date and Time

The most important setting for your countdown is the target end date:

  1. In the block sidebar, navigate to the Options tab
  2. Locate the End Date & Time setting
  3. Click on the date/time picker to set your target date
  4. Choose both the date and specific time (including AM/PM)
  5. The countdown will automatically calculate and display the remaining time

Choosing Time Units to Display

You can control which time units appear in your countdown:

  • Show Days: Toggle on/off to display the days remaining
  • Show Hours: Toggle on/off to display hours
  • Show Minutes: Toggle on/off to display minutes
  • Show Seconds: Toggle on/off to display seconds

Note: At least one time unit must be enabled for the countdown to display properly.

Customizing Labels

Each time unit can have a custom label:

  • Days Label: Default is “Days” – customize to your preference
  • Hours Label: Default is “Hours”
  • Minutes Label: Default is “Minutes”
  • Seconds Label: Default is “Seconds”

You can use any text for these labels, including other languages or abbreviated forms like “D”, “H”, “M”, “S”.

Expired Message

Set what displays when the countdown reaches zero:

  1. In the Expired Message field, enter your custom text
  2. Default message is “Time’s up!” if left empty
  3. This message will replace the entire countdown display once the target time is reached

Styling Options

Countdown Styles

The block offers two main visual styles:

Boxes Style

Creates individual containers around each time unit:

  • Default: Simple text display
  • Filled: Colored background boxes
  • Outlined: Border-only boxes
  • Pill: Rounded oval boxes
  • Rounded: Slightly rounded corner boxes
  • Circle: Perfect circular containers

Simple Style

Displays time units as plain text without containers, ideal for minimal designs.

Label Positioning

Control where the time unit labels appear:

  • Bottom (default): Labels appear below the numbers
  • Top: Labels appear above the numbers
  • Inside: Labels appear within the same container as the numbers (boxes style only)

Box Customization (Boxes Style Only)

When using the boxes style, you can customize:

Equal Width Boxes

Enable this option to make all countdown boxes the same width, creating a uniform appearance regardless of the number of digits.

Box Colors

Configure colors for both normal and hover states:

  • Digit Color: Color of the countdown numbers
  • Box Background: Background color of the boxes
  • Label Color: Color of the time unit labels
  • Border Color: Color of box borders (outlined style only)

Box Styling

  • Border Radius: Customize corner rounding
  • Border Width: Set border thickness (outlined style only)
  • Padding: Adjust internal spacing within boxes
  • Margin: Control external spacing around the entire countdown

Box Shadow

Add depth with customizable shadows:

  1. Enable Box Shadow toggle
  2. Configure shadow settings for normal and hover states
  3. Adjust horizontal/vertical offset, blur, spread, and color

Separators

Add visual separators between time units:

  1. Enable Show Separators
  2. Choose separator type:
    • Colon (:) – Most common for time displays
    • Hyphen (-) – Clean, minimal appearance
    • Slash (/) – Alternative separator style
    • Dot (•) – Subtle separator option

Configure separator colors for normal and hover states in the Colors section.

Typography

Customize the text appearance with two typography controls:

Digit Typography

Controls the appearance of countdown numbers:

  • Font family, size, weight, and style
  • Text transformation (uppercase, lowercase, etc.)
  • Line height and letter spacing
  • Responsive font sizes for desktop, tablet, and mobile

Label Typography

Controls the appearance of time unit labels:

  • Independent typography settings from digits
  • Typically smaller and lighter than digit text
  • Responsive sizing options

Spacing Controls

Fine-tune the layout spacing:

Items Spacing

Controls the gap between individual countdown items (days, hours, etc.):

  • Range: 0-100px
  • Responsive settings for different screen sizes
  • Default: 20px

Label Spacing

Controls the distance between numbers and their labels:

  • Range: 0-50px
  • Applies when labels are positioned top or bottom
  • Default: 5px

Alignment

Use the alignment toolbar in the block controls to position your countdown:

  • Left: Align countdown to the left
  • Center: Center the countdown display
  • Right: Align countdown to the right

Advanced Settings

Animation Effects

Add entrance animations to make your countdown more engaging:

  1. Navigate to the Advanced tab
  2. Select an Animation Effect from the dropdown
  3. Choose from various options like fade-in, slide-in, bounce, etc.
  4. Use the Preview Animation button to test the effect

Animations trigger when the countdown first becomes visible in the viewport.

Visibility Controls

Control when the countdown appears on different devices:

  • Hide on Desktop: Countdown won’t show on desktop screens (992px+)
  • Hide on Tablet: Hidden on tablet screens (768px-991px)
  • Hide on Mobile: Hidden on mobile screens (up to 767px)

Note: In the editor, hidden elements appear with reduced opacity for easy editing, but are completely hidden on the frontend.

HTML Anchor

Create a unique page anchor for direct linking:

  1. Enter a short, descriptive anchor ID (no spaces)
  2. This creates a direct link to this countdown section
  3. Useful for navigation menus or external links
  4. Example: launch-countdown creates yoursite.com/page/#launch-countdown

Additional CSS Classes

Add custom CSS classes for advanced styling:

  1. Enter class names separated by spaces
  2. Use these classes in your theme’s CSS or Additional CSS section
  3. Allows for custom styling beyond the built-in options

Best Practices and Tips

Choosing Appropriate Time Units

  • Long-term events (weeks/months away): Show days, hours, and minutes
  • Same-day events: Show hours, minutes, and seconds
  • Very short deadlines: Show only minutes and seconds
  • Product launches: Include all units for maximum impact

Performance Considerations

  • Seconds display updates every second, which requires more processing
  • For better performance on content-heavy pages, consider hiding seconds
  • The countdown automatically stops updating when it reaches zero

Design Tips

  • Use contrasting colors for better readability
  • Consider your overall page design when choosing box vs. simple style
  • Larger digit typography creates more visual impact
  • Equal width boxes create a cleaner, more professional appearance

Mobile Optimization

  • Test countdown appearance on all device sizes
  • Consider using smaller font sizes for mobile devices
  • Reduce spacing on smaller screens to fit comfortably
  • Ensure touch-friendly sizing if the countdown links to other content

Accessibility

  • Use sufficient color contrast for readability
  • Provide meaningful expired messages
  • Consider users with motion sensitivity when choosing animations
  • Ensure countdown content is descriptive enough without visual context

The Countdown Block provides extensive customization options to create compelling, time-sensitive content that drives engagement and action from your visitors. Experiment with different styles and settings to find the perfect match for your design and messaging needs.

Similar Articles

Back to DigiBlocks