Calendar

Keeping your website/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. But it doesn’t stop there—customizing how your calendar looks and functions can take your website/funnel to the next level. In this guide, we will 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 displays the default name/title of the Edit option you are currently working on. You have the option to either leave it as is or rename it according to your preference. This feature is especially useful when you have multiple elements on your web page and need to quickly identify and differentiate them.

Spacing Option #

The Spacing Option provides you with various options for adjusting the position of your content on your web page. The settings only apply to the specific Edit option you are working on. For example, when customizing a Row (indicated by the blue box), any changes made to the spacing options will only impact the content within that Row.

• Padding Left, Right, Top, and Bottom: There are four different toggle bars available for adjusting the Padding Left, Right, Top, and Bottom of your content. By selecting the appropriate toggle bar, you can move your content to the left, right, top, or bottom, depending on your design preferences. Adjusting the padding can result in a more visually balanced web page, making it easier for your audience to engage with your content.
• Margin Top and Bottom: You can toggle the bars to adjust the Margin Top and Bottom of your content. This feature provides greater control over the position and appearance of your elements, allowing you to tailor your web page design to fit your specific style.

Calendar Configuration #

• Use Group Page: Toggling on this option allows you to link your calendar to a shared group page, making it easier to manage events collaboratively. This ensures that any updates made within the group are automatically reflected on your webpage.

• Calendar: The Calendar Configure feature allows you to replace your current calendar with a new one. From the Calendar menu, you can select the new form you prefer to be displayed on your web page. This feature ensures that your web page always displays the most updated and relevant calendar for your audience.

Button Action #

• Redirect Action: The Redirect Action feature lets you configure your button’s behavior by choosing between “Use action from calendar builder,” “Go to next step,” or “Go to website URL,” where you’ll select the specific page to link to, and you can toggle “Open in New Tab” to direct visitors to a new tab when they click.

Advanced Settings #

The Advanced Setting feature provides you with additional options to customize the elements on your web page to your preference.

Visibility #

The Visibility option allows you to choose whether an Edit option is visible on desktop, mobile, or both. By selecting the relevant icon, you can optimize your web page for your audience’s specific device.

Custom Class #

The Custom Class option enables you to assign a custom class name to your element, enabling you to apply custom styles specifically to that element. You can input your desired custom class name in the dedicated field, linking it to style definitions in a stylesheet.

CSS Selector #

You can easily copy the Custom CSS code by clicking on the Copy icon to the right of the reference code. This will simplify the process of replicating and implementing your CSS Selector code across your web page, saving time and improving its functionality and appearance.

A well-integrated calendar keeps your audience informed and enhances their experience on your site. By customizing its settings, spacing, and appearance, you can ensure it aligns perfectly with your page’s design and functionality. Keep your events up to date, and your visitors will always stay in the loop.

What's your Reaction?

You have reacted on"Calendar"


A few seconds ago