The Timer Element is an interactive element that counts down the time for a visitor. The goal is to hurry a visitor to make a decision to purchase a product on your web page.

General

General Settings - You can change the color of the numbers, background color, and select which devices will display the countdown (mobile phone, computer, or both). This allows you to tailor the page content for different devices.

Padding - You can change the spacing between the numbers and the border of the field. This is especially helpful if you add a border to the timer and need to move it away from the border of the frame.

General Style - In this section, you set the style of the timer:

  • Countdown type - Exact date and time, duration, or special offer. Each item has its own additional field.
  • The value in the following line will change, depending on which item you select in Countdown type: date, duration (number and format - days, hours, minutes), or product selection. In this line you will set the date, duration, or select a product from the list.
  • What to show - Select whether the display will be days, hours, minutes or seconds.
  • Digit size - You can adjust the size of the numbers in the timer.
  • Label size - The label, in this case, are an explanation of what each number means (days, hours, minutes, seconds).
  • Font - You can change the font by selecting from the list provided.
  • Font Weight - Change the thickness if available in selected font: very thin, thin, normal, medium, fat.
  • Digit Color - Select the color of the numbers.
  • Digit Background - The background will not be set for the entire field, but only for the space around the numbers. Highlighting will be especially visible if you round the corners.
  • Round Corners - You can round the corners around numbers.
  • Separator Color - This will change the color of the symbol between the numbers.
  • Separator Symbol - This iwll change the type of symbol between the numbers: colon, dash, space and others. Select a symbol from the list provided.
  • Separator Width - You can increase or decrease the distance between the numbers by changing the width of the separator.

Advanced

Border - You can customize the border around the timer: border style (solid, dotted, double, dotted, inside, outside), thickness and color.

Round Corners - You can adjust the rounding degree of the timer corners.

Shadow - Create a shadow behind the timer, choose a color and adjust the shadow dimensions and blur.

Text Shadow - This section adds a shadow to the numbers inside the time. 

Conditional impression. This function will hide or show the selected item from the visitor. For example, if you want to show a special offer to a new user, then hide this offer and do not show it again. Turn on Conditional Impression. Select "Show" - if you want to show the item, or "Hide" - if you want to hide it from the visitor. Then select the condition: first visit, return visit, the product has a special offer and has already registered.