Timers

Countdown timers are a powerful tool to create urgency and encourage immediate action from your email recipients. This guide explains how to add and configure a dynamic countdown timer.

Adding a Timer Element

1. Access the Content Tab: Ensure the Content tab is selected in the right-hand sidebar.

2. Drag and Drop:

   • Locate the "Timer" element (often represented by a clock icon) in the sidebar.

   • Click and drag the "Timer" element onto your email canvas, placing it within a column or content area.

   Upon dropping, a placeholder timer (often showing default numbers or a static image) will appear on the canvas. Its specific properties will load in the right-hand sidebar under the "Content" tab, usually labelled "Countdown."

Configuring the Countdown Timer

With the timer element selected, use the options in the right-hand sidebar to set its end point and customize its appearance.

Countdown Settings

• End Time: This is the most critical setting.

  • Date: Click the date field to open a calendar and select the date when the countdown should end (e.g., July 18, 2025).

  • Time: Click the time field to open a time selector (or type directly) and set the exact time the countdown should end (e.g., 3:15 PM).

• Timezone: Select the appropriate timezone for the end time from the dropdown list (e.g., "America/Los_Angeles", changed to "America/Lima"). This ensures the countdown is accurate for all recipients regardless of their location relative to the event's timezone.

• Language: Choose the language for the labels (Days, Hours, Minutes, Seconds) from the dropdown (e.g., "English"). This allows you to localise the timer display.

• Labels (Show/Hide):

  • Toggle the "Labels" switch on or off.

  • On: Displays labels like "Days," "Hours," "Minutes," "Seconds" below the corresponding numbers.

  • Off: Hides these textual labels, showing only the numbers. (

Styling the Timer

Customise the visual appearance of the timer components.

• Background Colour: Select a background colour for the entire timer block using the colour picker.

• Digits Colour: Select the colour for the numbers (digits) of the countdown using the colour picker (e.g., a bright red #FF0000 ).

• Labels Colour: Select the colour for the text labels (Days, Hours, etc.) using the color picker (e.g., a bright blue #0000EE selected).

• Digits Font: Select a font family for the numbers from the dropdown (e.g., "Open Sans" changed to "Comic Sans MS").

• Digits Font Size: Adjust the size of the numbers in pixels (e.g., 40px changed to 44px).

• Labels Font: Select a font family for the text labels from the dropdown (e.g., "Open Sans" changed to "Courier New").

• Labels Font Size: Adjust the size of the text labels in pixels (e.g., 16px changed to 27px).

Image Settings (Fallback/Underlying Image)

• Width:

  • Auto On: The timer image width adjusts automatically.

  • Auto Off: Allows manual control of the width using a slider.

• Align: Align the timer image (Left, Center, Right) within its container.

• Alternate Text: Provide descriptive alt text for the timer image (e.g., "Countdown timer for sale," "SALE ENDS"). This is crucial for accessibility.

Action (When Timer is Clicked - Optional)

You can make the entire timer image clickable.

• Image Link: Choose an action type from the dropdown (e.g., Open Website, Send Email, Dial a Phone).

• URL / Target: If linking to a website, provide the URL and specify the target (New Tab or Same Tab).

General (Container Padding)

Controls padding around the entire timer block.

• Container Padding:

  • All Sides: Set equal padding (e.g., 10px).

  • More Options: For individual side padding.

Responsive Design

Manage visibility on different devices.

• Hide on Desktop: Hide the timer on desktop views.