AI Offcanvas is an excellent feature that allows you to create off-canvas panels or sidebars on your website. These panels slide in or out of the screen edge, providing additional content or navigation options. This is without taking up valuable space on the main page. The Offcanvas addon is commonly used for promotional banners, contact forms, or any content that you want to display in a hidden manner. With its customizable design options, you can control the appearance, animation, and positioning of the offcanvas panel. This will suit your website’s style and functionality. The Offcanvas addon adds a sleek and efficient way to present supplementary content and improve the user experience on your site.
How to set up the AI Offcanvas:
Step 1: Search and find Offcanvas in the search box under the Elements Tab. After that, easily drag and drop the widget wherever you want inside the Elementor section.
Step 2: This is how the element will look after inserting the AI Offcanvas Slide.
How to set up content for AI Offcanvas?
Under the content tab, you can configure the AI Offcanvas section.
You can select a trigger type in the Type Section, such as an icon, image, button, or text, align it, and select a model from the dropdown menu, such as Overlay from the Right/Left or Push from the Right/Left.
The following area will show up to configure the image, icon, button, or text depending on the trigger you’ve chosen.
Content: There are three supported formats available for text such as Text, or HTML or from saved Templates.
The content you want to display in Offcanvas should be entered. Open AI can be used to create the content in this case. To produce the content, turn on the toggle, click generate with AI, and then fill out the prompt.
How to add Styles to Offcanvas?
From this Style tab, you can change the typography, text color, background color, alignment, size, padding and many more.
In the General Section, you can adjust the width of the screen(Overlay), Font Color and Background color. You can change the color individually in Normal mode and Hover mode if you use heading and links in the content section.
