Background Image

It is possible to create a countdown clock to match any style, brand or design of your choice.

To create a branded countdown timer in the Kickdynamic platform, simply create a timer background image for the design you want to use. As best practice, we recommend to include the timer labels (days, hours, minutes, seconds) in the design too. Once you’ve designed the background image you want to use, you are ready to begin.

Top Tip: we recommend to build the timepart titles into your template.

Here’s some examples of a timer background image:

 

 

Check out our Countdown Timer do’s and Don’ts page for best practice information and tips.

 

Getting started:

In your account,navigate to the templates section and select Countdown Clocks. 

 

In the template section, click on the ‘Countdown Clock’ section. Here you will see all of your countdown timer templates. You can create a new template by clicking on ‘+ new template’.

 

 

Note: If you wish to edit a template created on or before 13th January 2017 you will see the original template editor. For how to help for the old editor, click here

You can now start building your template. Name the template in the description space and click on the canvas to select it.  Once the canvas is selected, using the menu options on the right upload your background image.

 

 

Click on ‘upload image’ to upload your background image. The template editor will automatically inherit the dimensions of the background image you have uploaded. If you wish to change the dimensions you can do so on the layout section on the right hand side:

 

Tip: Ensure that you input the correct image size. You can create a retina image by uploading an image that is twice the size required and then scale it back in the email html.

 

Adding the time parts

Once you have determined the image size, the next step is to add the timeparts.

To add a timepart element to your template, click on the ‘+’, drag and drop them into position. You can then format individual timeparts using the editor on the right. 

Each time part will automatically default to seconds. 

Top tip: For speed, we recommend formatting the first timepart box and then duplicating it.

On the right hand ‘Inspector’ you have the ability to format the timepart.

Firstly, alter the time part to show the correct sec/mins hrs etc. Add each timepart to the image. You can change the font size, colour, positioning and more in the platform under the general tab. 

Click on each box and use the layout section to make them uniform size and alignment. You will notice ‘snap-to-grid’ lines appearing. These can be used for easy alignment.

Advanced formatting:

With the advanced editor, you can build the timeparts as separate single digits within each timepart. For example, the seconds can be split into two separate boxes to accommodate designs (as per the yellow example above).

https://img.kickdyn.com/5328/NG3N3vjNqpGrbrsT7ylB/imgancnt.png

To do this, you would select ‘seconds digit1’ ‘Seconds digit 2’ on the right hand side in the timepart drop down.

Tip: Ensure that element of the timer has the correct timepart associated with it as the platform automatically assigns the timepart as seconds. Select the correct time part from the drop down list.

 

The new release also provides the option to go into triple figures, for example you could have a countdown timer showing '100 hours to go'. 

In this case you would need to add three time parts and then select ‘Hours first digit’ for the first box, ‘Hours second digit’ for the second box, and ‘Hours third digit’ for the third box.

 You can also select the option to include a ‘circular’ ring around the time part. This will visually show the time remaining until the timer expires over a circle around the timepart. You can add the circle outline and assign it a time part. You can then add the timeparts as required.

You can preview the timer in action by sliding the toggle in the top left of the countdown clock editor:

 

Once you are satisfied with the design, click ‘save changes’. You have now successfully created a countdown timer template.

You can now create a campaign based on this Template. Click here to find out how to create a countdown clock campaign.