Adding the Day Timer element to your website or funnel page is a straightforward way to create urgency and keep visitors engaged. You can set the countdown duration in hours, days, and seconds. Whether you're promoting a limited-time offer or counting down to an event, it helps capture attention and encourage action.
General Settings
Element Name/Title
Under General Settings, you can rename the timer to something more descriptive, which is useful when you have several elements on the same page.
Color Options
- Color: You can change the colour of your timer by selecting from the available options or adding a custom colour. If you have the exact colour code you want, go to Custom Colours and click "Add".
- Label Color: To customise the colour of your timer label, follow the same steps as the timer colour. Choose from preset colours, add a custom colour, or enter a specific colour code.
Float
The Float feature gives you several positioning options for your timer, such as Left, Center, Right, and spacing options like space-around, space-evenly, or space-between to improve readability.
Typography Type
The Typography Type feature lets you modify the font and typography styles for your text or content. You can further customise it using the dropdown options available.
End Date and Time
Here you can set the date and time you want your countdown to end. For example, you might set it to end on the 4th of July at 6 am.
Time Zone
When setting up the day timer, you can choose the time zone you want it to operate in, so it counts down correctly to the end time. You can select from popular regions and countries.
Desktop and Mobile Font Size
Adjust the font size for mobile and desktop views by dragging the size bars.
Desktop and Mobile Font Weight
Adjust the thickness of your text to make it stand out or blend with the rest of the page.
Desktop and Mobile Sub Text Font Size
Adjust the sub text font size for mobile and desktop by dragging the size bars.
Desktop and Mobile Sub Text Font Weight
Control the weight of the sub text to match the overall design and emphasis of your timer.
Expire Action
When the countdown ends, you can choose what happens:
- Redirected URL: This automatically sends users to a specific page when the timer expires.
- Show & Hide Element: You can decide to hide or show your section, column, row, or element.
Padding
There are several spacing options for your timer. The settings apply only to the edit option you are working on; for example, editing the Bottom padding only affects the bottom.
- Padding Left, Right, Top, and Bottom: Each padding field moves the timer in the corresponding direction. Type a number into the relevant field to set the spacing.
Advanced Settings
Visibility
Choose whether this element is visible on mobile, desktop, or both by clicking to highlight the relevant icon.
Custom Class
Enter your custom class code here to customise the element further.
CSS Selector
To copy the Custom CSS, click the "Copy" icon on the right side of the reference code.
The Day Timer is a simple, effective way to drive urgency and engagement on your website or funnel page. With its customisable settings, you can tailor it to fit your design and marketing goals, whether you're running a flash sale or counting down to a big event.