The Date & Time element can be used to display dates/times on your pages for events, webinars, training, and more. Watch the video below to learn more:
To add the Date & Time Element to your page, click the "+" icon either on the top of the editor or in the column you want to add the element to.
Then, in the search box, type "Date" and you should see the element there.
Just drag the element over to where you want to add it.
Once you add the element, you can also choose a design preset.
You an also get back to these presets later by clicking the Magic Wand icon in the inline element toolbar
There are several Date & Time Options. To setup these options, click the Calendar icon in the inline element toolbar.
First, you'll want to choose if you want a Specific Date/Time, or a Dynamic Date/Time. Obviously a specific date and time will display your event's Date and Time for one specific event. A dynamic date and time element will allow you to set a repeating time, which is very useful if you have something like a webinar that repeats daily, weekly, or every certain number of days.
The Specific Date & Time setting allows you to specify an exact date, and then choose formatting options for the Date, Time, and whether you want to show the weekday. Also, you have the Layout options and Text String spacing.
The Dynamic Date & Time settings offer several options. First, you'll want to choose the Interval Type. There are 3 types of Intervals.
1) The Date interval will let you set how many days the event repeats. If you set it to "Tomorrow" then the timer will always show tomorrow's date. If you choose a different option, such as +4 days for example, then the date would reset every 4 days.
For the Date interval, you can also set a Custom date option here. So for example if you have an event that repeats every 14 days, you can select the "Custom" option, and then type in "14" into the option there (It was April 12th when we took the screenshot, so you can see 14 days later it is the 26th).
2) If you choose the "Time interval, you can choose either 5, 10, 20, 30 minutes, or an hour. So this is something that would repeat several times a day at those intervals. If you select 5 minutes for example, the timer would change to show the next time of the event. If it is 11:46AM and you choose the 15 minute interval, then the next time would be 12 noon.
3) The 24 Hour Timer option is a great feature that will show the date and time for a once daily event (such as a daily webinar). You can set the hour of the day for the Timer.
The 24 hour timer also has Layout options and Text String spacing
Now that you have selected a preset design, and setup your timer to show when your next event is, now lets take a deeper dive into the additional design options the Date & Time element has.
To change the Font options, click the font settings icon. You'll be able to select the Font Family, Font weight, Size options, and Styling (such as underline, italicize, etc.).
To change the font colour for the date & time text, click the color icon, and then select the "Colour" tab. You can set the font color there. You can see in this example I set the color to a blue color.
To change the background color, click the "Background" tab and select a color. In this example I left it at the default selection.
You can also change the color on the calendar. You can see here I changed it from Green to Orange.
You can also choose the icon options for the Date, as well as Time. You can turn on the visibility for the icons if you want and choose the size of the icon (It shows "font size" because the icons are "font based icons").
You can also set the spacing of the icons. You can see here I turned on the icons. See below on how you can change the color of the icons (because green and orange are probably not the best color scheme!).
Now, if we go back to the color icon you'll be able to change the color of the date/time icons. You can see here I decided that green didn't go too well with orange, so I changed the icon colors to orange. Please note that it is not possible to set different colors for each icon (Icons should be a consistent color).
To change the alignment of the Date & Time element, just click the alignment icon and you'll be able to set the alignment for the element, as well as the date and time text.
To set the Border & Shadow options for the overall Date & Time element, click the first Borders icon.
The Calendar border and shadows can be set by clicking the next Borders icon.
Here you can see an example of setting a border radius and black border on the element, and also setting the border radius and border color of the calendar
You can also 1) move, 2) clone, or 3) delete the element
The Settings icon will give you options for element spacing (above/below) as well as Element width, and alignment.
Click the Blue "Advanced Options" button to open up even more options for the element.
The advanced element options give you several additional settings to choose from.
Positioning
Responsive Settings
Animation & Delay
Setting a custom CSS class, Z-index, and code before/after element
You can also set Custom Experiences (link to guide coming soon)
Here you can see these options:
In summary, you should now know how to use this highly customizable element to showcase your events date/time to your audience.
If you have any questions or need support for this element, please reach out to our support team for help.
