Let's see how you can adjust the Settings of your Timer element:
A. Setting up the Timer
1. Click on the Settings icon on the toolbar that appears above your Timer when you hover over it.
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.
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.
B. Selecting a Timer theme
1. Use the Select theme drop-down menu to choose your Timer's theme.
You have two choices:
Generates a Timer wherein the countdown is displayed using numbers, as in the example below.
Generates a Timer wherein the countdown is displayed using text, as in the example below.
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:
Once you are inside the Preview page, select the device type(s) to check out how your subscription form and Text Timer look on each.
This way, you can make sure that your Text Timer looks great no matter what device it is being viewed on.
C. Setting up the expiration date
This is the heart of the Timer, so it bears looking into it 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.
Note that 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.
Remember that the format is hh:mm, set in 24-hour time.
6. Click on the Save button when you are done.
D. Setting up a Normal Timer
Use the editing options to set up your normal Timer.
Click on the + sign of each of the Settings menus available 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 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:
- Border width
Sets the width for the border of the boxes inside your timer. Value range is 0 to 29.
- Box radius
Changes the radius of each box. Values go from 0 (square) to 60 (circle).
- Box Color
Allows you to choose a color out of a color palette, for the boxes inside your Timer.
- Border Color
Allows you to choose a color out of a color palette, for the border of the boxes.
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.
E. 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.
1. 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.
2. Clicking on the lock icon next to the Padding reveals further Padding options: Padding Top, Padding 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.