Off-Canvas Content
Add sleek, sliding side panels to your Elementor site without any coding. The Off-Canvas Content element lets you take any saved template – like a contact form or navigation menu – and display it in a stylish overlay that slides in from the side. Just place a customizable button anywhere, choose your panel’s position and animation, and you’ve created a modern, space-saving way to reveal extra content. It’s perfect for keeping your pages clean while giving users quick access to important info, all with full control over every color, border, and detail to match your brand perfectly.
Flexible Panel Positioning & Animation
Control exactly how and where your off-canvas panel appears. Choose to slide it in from the left, right, top, or bottom, select an entrance animation like Slide or Fade, and set the panel’s width to create the perfect user experience for your content.
- Create a side cart that slides in from the right for your online store.
- Use a top panel for a compact announcement or notification bar.
- Implement a left-sliding navigation menu for a modern mobile-like menu on desktop.
Full Trigger Button Customization
Design the button that opens your panel to fit any context. Set its text and icon, control the spacing between them, and style its colors, background, borders, and hover effects independently, ensuring it looks great wherever you place it on the page.
- Create a branded “Menu” button in your header to open a side navigation.
- Use a simple icon button in a product grid to quickly open a size guide.
- Design a prominent “Contact Us” button with unique hover effects to encourage clicks.
Frequently Asked Questions For Off-Canvas Content
How do I add content to the off-canvas panel?
You add content by selecting a saved Elementor template. First, create and save your content (like a contact form or a menu) as a template in Elementor. Then, in this element’s settings, choose that template from the “Select Template” dropdown.
Can I make the panel open from the left instead of the right?
Yes. In the content settings, you can choose the “Position” of the panel. Options typically include Left, Right, Top, and Bottom, allowing you to select which edge of the screen it slides in from.
Will the off-canvas panel work correctly on mobile phones?
Yes, it is designed to be fully responsive. The panel’s width and the trigger button will adjust for different screen sizes. You can also use Elementor’s responsive mode to tweak settings like panel width specifically for mobile.
Does adding an off-canvas panel affect my site’s loading speed?
The impact is minimal. The element loads your saved template, which is typically optimized by Elementor. The panel’s content often loads only when triggered, which helps keep the initial page load fast.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Caldera Forms
