How to use Offcanvas Widget of Sky Addons for Elementor

The Sky Addons Offcanvas widget adds a slide-in drawer panel to any Elementor page. The panel can be triggered by a built-in button, a hash URL in a link, or any custom CSS selector on the page. Inside the panel you can place either a repeating block of custom title-and-description content items or a full Elementor Saved Template — making it suitable for navigation menus, contact details, login forms, filters, social feeds, or any secondary content that should stay out of the main layout until the user needs it. This documentation will guide you through the process of using the Offcanvas Widget to create polished slide-in panels on your website.

Features:

1. Two Content Types: Fill the panel with a repeater of titled content blocks (Custom Content) or embed any published Elementor Saved Template.
2. Three Trigger Modes: Open the panel from the widget’s own button, from a hash URL (e.g., #my-panel in any link on the page), or from any custom CSS selector you specify.
3. Left or Right Position: Slide the panel in from the left or right edge of the viewport.
4. Responsive Width: Set the panel width independently for desktop (default: 400 px), tablet, and mobile — in px, %, or vw units.
5. Custom Open Icon: Choose any Elementor icon library icon for the toggle button, or leave blank to use the default hamburger SVG.
6. Full Button Styling: Typography, background, border, border radius, box shadow, text shadow, and a hover animation — Normal and Hover states — all from the Style tab.
7. Content Box Styling: Background, border, border radius, box shadow, padding, spacing between items, and text alignment for the custom content area.
8. Title, Description, and Link Styling: Individual color, typography, and spacing controls for each element within the custom content items.

Insert Offcanvas Widget

1. Open your page in Elementor and click the + icon to add a new section.
2. Search for Offcanvas in the widget panel and drag it onto the canvas.

Configure Content

The Content section defines what appears inside the panel when it opens.

1. Content Type: Choose Custom Content to build a list of title-and-description blocks, or choose Saved Template to embed any published Elementor template inside the panel.
2. Custom Content (repeater): Add as many items as you need. Each item has:
   — Title: Displayed as an H3 heading inside the panel.
   — Description: A rich-text WYSIWYG editor for body content, links, and formatted text.
3. Select Template: When Content Type is Saved Template, search for and select any published Elementor template. The full Elementor design renders inside the panel.

Configure Toggle

The Toggle section controls how and from where the panel is opened.

1. Toggle Source: Choose one of three modes:
   — Button / Icon: A button rendered by the widget itself opens the panel.
   — Hash URL: Entering a hash (e.g., #my-panel) makes the panel open whenever a link with that hash is clicked anywhere on the page.
   — Custom Selector: Enter a CSS selector (e.g., .my-button or #trigger) to attach the open behavior to an existing element on the page.
2. Hash URL (Hash URL mode only): The hash value, including the # sign.
3. Custom Selector (Custom Selector mode only): A valid CSS selector for the trigger element.
4. Open Icon: Select an icon from any Elementor icon library for the toggle button. Leave blank to use the default hamburger SVG icon.

Configure Offcanvas Settings

The Offcanvas Settings section controls the panel’s position and dimensions.

1. Position: Choose Left or Right — the panel slides in from that edge of the viewport and the close button is placed on the opposite edge.
2. Width: Responsive width of the panel. Accepts px (min 200, max 800), % (10–100), or vw (10–100) units. Default: 400 px on desktop, 80% on tablet, 100% on mobile.

Style Your Offcanvas

Use the Style tab to customize the visual appearance of the panel, the toggle button, and the content inside.

1. Offcanvas Modal:
   Background (classic or gradient), padding, and close icon color. This styles the panel container itself.
2. Toggle Button:
   Alignment (Left / Center / Right), padding, icon size, border, border radius, and Normal / Hover tabs for text color, background, text shadow, box shadow, and hover animation (Elementor animation library). A hover border radius control is also available for shape-shift animations.
3. Content Box:
   (Visible only when Content Type is Custom Content.) Text alignment, background, border, border radius, box shadow, item spacing (margin between repeater items), and padding for each content block.
4. Title:
   (Custom Content only.) Color, typography, bottom spacing, and text shadow for item headings.
5. Description:
   (Custom Content only.) Color and typography for the body text inside each content item.
6. Links:
   (Custom Content only.) Normal / Hover tabs with color, typography, text decoration, and transition duration for any links inside description text.

Save and Preview

1. Click Update in Elementor to save your page.
2. Preview the page to see your Offcanvas widget in action.

Best Practices

1. Use the Saved Template content type when the panel needs a rich layout (navigation menu, login form, product filter) — this gives you the full Elementor design toolkit inside the panel rather than plain text blocks.
2. Set mobile width to 100% (or close to it) so the panel does not crowd the main content on small screens.
3. Use the Hash URL trigger when you want to open the panel from a text link or a button in a different section — you do not need to place the Offcanvas widget near the link, just anywhere on the page.
4. Add a hover animation to the toggle button (a simple “pulse” or “buzz” effect) to draw attention to the menu or filter trigger without being distracting.

Troubleshooting

1. Panel does not open when the button is clicked: Check that the slickmodal script is enqueued and no JavaScript error appears in the browser console. Also confirm the Toggle Source is set to Button / Icon.
2. Hash URL trigger does not work: The hash value in the widget must exactly match the href value in the link (including the # sign). The link must be on the same page as the Offcanvas widget.
3. Saved Template shows nothing inside the panel: Verify the selected template is published (not in Draft), and that its content is not empty. In the Elementor editor, a warning message appears if the template is missing or empty.

Frequently Asked Questions

Can I have multiple Offcanvas panels on the same page?

Yes. Each Offcanvas widget instance generates a unique ID, so multiple panels can coexist on the same page. Assign each a different hash or button and they will open independently.

Can I place the Login Form widget inside the Offcanvas panel?

Yes. Build an Elementor Saved Template that contains the Sky Addons Login Form widget, then set the Offcanvas Content Type to Saved Template and select that template. The login form submits via JavaScript so the panel stays open on validation errors.

How do I open the Offcanvas panel from a menu item?

Set the Toggle Source to Hash URL and enter a hash such as #my-panel. In your navigation menu, add a Custom Link with that same hash as the URL. When a visitor clicks the menu item, the panel opens.

Can the panel slide from the top or bottom instead of the sides?

The current version supports Left and Right positions only. Top and bottom animations are not currently available as built-in options.

Does the Offcanvas widget add an overlay behind the panel?

Yes. The underlying SlickModal library renders a semi-transparent overlay behind the panel. Clicking the overlay closes the panel. The overlay color can be customized through CSS targeting the .sm-overlay class if needed.

Related Documentation

Explore other Sky Addons widgets and extensions that complement the Offcanvas widget:

• Login Form: Embed a branded login form inside the Offcanvas panel for a seamless sign-in experience.
• Instagram Feed: Place a live Instagram grid inside the panel as a social proof sidebar.
• Pricing Table: Use the Offcanvas panel to show a compact pricing comparison when a “See Plans” link is clicked.

Conclusion

The Offcanvas widget makes it easy to surface secondary content — menus, forms, filters, or any Elementor template — in a clean slide-in panel triggered by a button, hash link, or custom selector, without cluttering the main page layout. If you have any questions or need help, visit the Sky Addons support center.