Register

What is a Timer and how can I use it to design my landing page ?

As soon as you begin defining your landing page's 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.
Landing_pages-What_is_a_Timer_1.png


2. Drag-n'-drop the Timer element, from the elements list, to an empty container inside the Designer page.
Landing_pages-What_is_a_Timer_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 on the toolbar that appears above your Timer when you hover over it.
Setting_up_the_Timer.pngYour 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.
Backgorund_Color_.png

C. Selecting a Timer theme

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

You have the two choices:

  • Normal
    Generates a Timer wherein the countdown is displayed using numbers, as in the example below.
    Normal_Timer.png

  • Text
    Generates a Timer wherein the countdown is displayed using text, as in the example below.
    Text_Timer.png

    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:
    Text_Timer-Click_on_Preview.png

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

    This way, you can ensure that to 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.
What_is_a_Timer_3.png

A calendar appears.

2. Click on the blue buttons to navigate between months.
What_is_a_Timer_4.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.
What_is_a_Timer_5.png


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


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

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


6. Click on the Save button when you're done.
What_is_a_Timer_8.png


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

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

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

  • 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 your Timer's labels.

  • 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:
Box_Settings.png

  • 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. Value range is 0 to 29.

iii) Your Edit Labels Settings options are:
Eidit_labels_settings_.png

  • 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.
Padding_1.png

Clicking on the lock icon next to the Padding reveals further Padding options: Padding Top, Padding Bottom, Padding Left and Padding Right. 
Padding_2.png
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.

Moosend's Landing Page Designer is a powerful tool which 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!