The Timer and how you can use it to design your landing page

An exciting countdown always gets you all prepped up for an event, a sale, a reveal and the same applies to your subscribers. Therefore, adding a fully functional timer inside your landing pages helps you inform your subscribers that the clock is ticking.

As soon as you begin defining your landing page structure, you can start adding elements to it. One of the available element types is the Timer.

Let's see how you can add one to your design:

A. Adding a Timer element

1. Click on the Elements button, located on the left side of your Landing Page Designer page.timer_element_landing_1.png

Please note that you first need to add a Structure block in your design in order to add a timer or any other element.


2. Drag and drop the Timer element, from the elements list to an empty container inside the Designer page.timer_element_landing_2.png

Make sure that your container is of the Full Width variety as that is the only container size that can accommodate a timer element.


B. Setting up the Timer

1. Click on the Settings icon, which appears when you hover your mouse over your Timer.timer_element_landing_3.png

Your Timer's Settings instantly appear on the left of your Designer page.

2. Choose a Background Color for the area behind your Timer, out of a color palette.timer_element_landing_4.png

Please note that the background of the countdown timer is an image and therefore it will never have the exact same color as the html color.


C. Selecting a Timer theme

1. Use the Select Theme drop-down menu to choose your Timer's theme.


You have two choices:

  • Normal
    Generates a Timer wherein the countdown is displayed using numbers.
  • Text
    Generates a Timer wherein the countdown is displayed using text.

When opting to use a Text Timer, you have the flexibility of changing the text to whatever you want it to be - just make sure to keep the brackets that contain the text, so that the timer actually works.

To take a peek at what your Text Timer is going to look like, click on Preview mode after you have added it to your design:timer_element_landing_5.png


Once you are in Preview mode, select the device type(s) to check out how your landing page and Text Timer look on each of them.timer_element_landing_6.png

This way, you can make sure that your Text Timer looks great no matter what device it is being viewed on.

D. Setting up the expiration date

This is the heart of the Timer, so it bears looking into in more detail.
1. Click on the Expiration Date area, located on the Timer settings list. A calendar appears.


2. Click on the blue buttons to navigate between months.timer_element_landing_7.png

A warning will appear if you try to navigate to a date before the current one.

3. Click on a date to select when your Timer will expire.


4. Select the Time tab, to set the exact time on that date when the Timer will expire.


5. Drag the Hours and Minutes sliders to set the exact time of day.timer_element_landing_8.png

Remember that the format is hh:mm set in 24-hour time.

6. Click on the Save button when you are done.


E. Setting up a Normal Timer
Use the editing options to set up your normal Timer.timer_element_landing_9.png

Click on each the + sign of each of the Settings menus to expand them.
i) Your Font Settings options are:

  • Font family
    Select your desired font from the drop-down menu.

  • Label Font Family
    Choose a font for your Timer's labels using the drop-down menu.

  • Font Size
    Use the up-down arrows to choose your Timer's font size.  Alternatively, type the desired number directly into the area next to the arrows.

  • Label Font Size
    Use the up/down arrows to select your Timer labels' font size.  Alternatively, type the desired number directly into the area next to the arrows.

  • Label Color
    Allows you to pick a color out of a color palette, for the labels under each counter.

  • Time Color
    Allows you to pick a color out of a color palette, for the numbers on the counters.

   ii) Your Box Settings options are:

  • Border Color
    Allows you to choose a color out of a color palette, for the border of the boxes.

  • Box Color
    Allows you to choose a color out of a color palette, for the boxes inside your Timer.

  • Box radius
    Changes the radius of each box. Values go from 0 (square) to 60 (circle).

  • Border width
    Sets the width for the border of the boxes inside your timer. The value range is 0 to 29.

  • Padding
    Set the desired amount of padding for your Timer.


iii) Your Edit Labels Settings options are:

  • Days Label
    Edit the label on the Days field.

  • Hours Label
    Edit the label on the Hours field.

  • Minutes Label
    Edit the label on the Minutes field.

  • Seconds Label
    Edit the label on the Seconds field.

 F. Setting up a Text Timer

The Text Timer is less complex in its design than the Normal timer.  If you have already selected a Background Color and Expiration Date for your Text Timer, then you can play around with its Padding.

Use the up/down arrows in the Padding option (or type directly into the appropriate field) to set the desired amount of overall padding for your Timer.timer_element_landing_10.png


Clicking on the lock icon next to the Padding reveals further Padding options: Padding TopPadding Bottom, Padding Left, and Padding Right.

As before, use the up/down arrows (or type into each field directly), to set the amount of Padding for the Top, Bottom, Left, and Right of your Text TImer.

Our platform's Landing Page Designer is a powerful tool that enables you to design beautiful and effective landing pages with ease, so make sure you use it to its fullest. Apart from the Timer, don't neglect to also explore the many other available Element options which you can use to build and enhance your landing pages.