Creating a Countdown Timer Template
It is possible to create a countdown clock to match any style, brand or design.
In order to create a branded countdown timer, first create a background image for the design needed for the timer. Here is an example background image:
Top Tip - It's best practice to include the timer labels (days, hours, minutes, seconds) in the design. For best practice information and tips, please check out our Best Practices page
Navigate to Templates and select the tab Countdown Clocks. You can access all of the previously created countdown clock templates here as well as created new ones.
To create a new countdown clock select + New Template.
Name the template before clicking on the canvas to select it. Then use the Inspector on the right-hand side to upload the previously-created background image.
The template editor will automatically inherit the dimensions of the uploaded image. If needed, the dimensions and the background colour can be changed using the layout section on the right-hand side.
Top Tip - Ensure the correct image size is used. It is advised to use a retina image by uploading an image that is twice the size requested which can then be scaled back in the email's html.
To begin, add the first block by selecting 'Add Block' button. The new block will then appear in the centre of the canvas.
How to add a block
Drag the time part into the correct position and begin editing. Once selected, the formatting editor will appear where there is the option to apply any brand colour, custom fonts already uploaded (see Uploading Fonts) as well as sizing and alignments.
Top Tip - For speed and uniformity, we recommend formatting the first time part before then duplicating.
Formatting tool for all text blocks
How to duplicate a block
Top Tip - Adjust the size of the time part so that it can fit all digits require, otherwise the second number will drop to another line.
To change the unit of time, navigate to Time Part within the Inspector and select the correct time part for each corresponding label defined in the background image.
To create uniformity in alignments, select all the time parts to be able to align them on the left/right/top/bottom or ensure they are centrally aligned either horizontally or vertically.
With the advanced editor, the time parts can be built as separate single digits. To do this, select 'Days First Digit' and 'Days Second Digit' like in the example below. This can be made into triple digits e.g. '100 hours to go' by including all three digits from the Time Part menu.
Another feature to utilise, is to include a ring around the time part by selecting 'Circular' in the Inspector. This will visually show the time remaining until the time expires over a circle around the time part. Add the circle outline and assign a time part, before adding the time parts as required.
Preview the timer to see the design.
Last modified 2yr ago