The Off‑Canvas widget allows you to create hidden content panels that slide in from any edge of the screen when triggered by user interaction. These panels stay off-screen until activated, offering a smooth, non-intrusive way to reveal extra information, tools, or navigation without disrupting the main page layout.
🎯 Common Use Cases
Display additional details like team bios, product descriptions, or extra content sections
Showcase media or galleries in an unobtrusive panel
Create mobile-style slide-in menus or toolbars
Embed forms, call-to-action content, or promotional banners on demand
🧩 Setup & Configuration Steps
Enable Required Features: Make sure Flexbox Containers and Nested Elements are turned on in Elementor settings
Add the Widget: Drag the Off-Canvas widget into your layout. It creates a hidden container that will slide in upon activation
Design the Panel: Add any combination of widgets—text, images, buttons, forms—inside the Off-Canvas container
Exit Edit Mode: Switch back to normal page editing after configuring the off-canvas area
Create a Trigger: Add a button, icon, or image and assign a link action to open the Off-Canvas panel
⚙️ Core Features & Controls
Positioning: Choose where the panel will appear from—left, right, top, bottom, or centered
Size Options: Define width/height manually or let the panel adjust to its content
Entrance Animations: Choose from effects like slide, fade, zoom, bounce, or rotate
Interactivity Settings:
Toggle whether clicking outside the panel (on the overlay) will close it
Enable or disable ESC key to close
Prevent background page scroll while the panel is open
🎨 Styling Options
Container Styling: Customize background, borders, shadows, padding, and radius
Overlay Styling: Control the background color or image behind the panel, and choose whether to show the overlay at all
Z-Index and Layer Control: Ensure proper stacking over other elements
✅ Key Benefits
Enhances User Experience: Offers clean, on-demand content presentation without navigating away
Fully Customizable: Build panels visually with any content layout
Highly Flexible: Use for multiple purposes—menus, content reveals, slide-in CTAs, contact panels, etc.
No Coding Needed: All configuration happens inside Elementor’s drag-and-drop interface
⚠️ Considerations
Requires that the Flexbox and Nested Elements features are enabled
Can affect layout flow if improperly placed—plan container spacing and structure carefully
Excessive animations or overlay effects may affect performance on low-powered devices
🧠 Final Takeaway
The Off‑Canvas widget provides a modern, fluid way to display contextual or extended content while keeping users focused on their current page. It’s ideal for menus, forms, info pop-outs, or rich media content—perfectly suited for interactive and conversion-driven web design.
