Keeping your website or funnel up to date and visually appealing is key to engaging your audience, and one of the best ways to do that is by integrating a dynamic Calendar. Whether you're showcasing upcoming events, tasks, or important updates, the Calendar element ensures your page stays fresh and relevant. Customising how your calendar looks and functions can take your website or funnel to the next level. In this guide, we'll walk you through everything you need to know to make your calendar work for your audience.
Adding a Calendar Element
To add a Calendar to your page, drag and drop the Calendar element to your preferred spot within the editor's workspace.
After placing it, a pop-up will appear; there, you can select your Calendar from the dropdown. If you haven't created one yet, simply click on the "click here" link to begin creating a Calendar. Once it's set up, you'll instantly have access to view any upcoming events and tasks.
General Settings
Element Name/Title
The General Setting feature shows the default name or title of the element you're currently editing. You can leave it as is or rename it to suit your needs. This is particularly handy when you have multiple elements on a page and need to tell them apart quickly.
Spacing Option
The Spacing Option gives you several ways to adjust the position of your content on a web page. The settings only apply to the element you're currently editing. For example, when customising a Row (indicated by the blue box), any changes to the spacing options will only affect the content within that Row.
- Padding Left, Right, Top, and Bottom: There are four toggle bars for adjusting the Padding Left, Right, Top, and Bottom of your content. Select the appropriate bar to shift your content in the direction you need. Adjusting the padding helps create a more visually balanced page, making it easier for your audience to engage with your content.
- Margin Top and Bottom: Toggle the bars to adjust the Margin Top and Bottom of your content. This gives you greater control over the position and appearance of your elements, so you can tailor your page design to your style.
Calendar Configuration
- Use Group Page: Toggling this on links your calendar to a shared group page, making it easier to manage events collaboratively. Any updates made within the group are automatically reflected on your page.
- Calendar: The Calendar Configure feature lets you replace your current calendar with a new one. From the Calendar menu, select the calendar you'd like to display on your page. This keeps your page showing the most up-to-date and relevant calendar for your audience.
Button Action
- Redirect Action: The Redirect Action feature lets you configure your button's behaviour by choosing between "Use action from calendar builder," "Go to next step," or "Go to website URL." If you choose a URL, you can select the specific page to link to and toggle "Open in New Tab" to open it in a new tab when visitors click.
Advanced Settings
The Advanced Setting feature gives you additional options to customise elements on your page.
Visibility
The Visibility option lets you choose whether an element is visible on desktop, mobile, or both. Select the relevant icon to optimise your page for your audience's device.
Custom Class
The Custom Class option lets you assign a custom class name to your element, so you can apply specific styles to it. Enter your class name in the field provided, linking it to style definitions in a stylesheet.
CSS Selector
Click the Copy icon to the right of the reference code to copy your Custom CSS selector. This makes it straightforward to reuse the selector elsewhere on your page.
A well-integrated calendar keeps your audience informed and enhances their experience on your site. By customising its settings, spacing, and appearance, you can ensure it fits perfectly with your page's design and functionality. Keep your events up to date and your visitors will always stay in the loop.