How to Import Elementor Off-Canvas Panels
Off-canvas panels are slide-in drawers: cart, mobile menu, filters, quick contact. Each template ships the Off-Canvas widget with its panel content prebuilt plus a paired trigger button; our import tests confirmed the nested panel content survives import intact.
- 1
Download and import the template
Click Download JSON on the component page, then import via Templates, then Saved Templates, then Import Templates.
- 2
Place the panel and its trigger
Drag the imported template into your page or header from the library's Saved tab. The template contains two parts: the trigger button and the Off-Canvas widget holding the panel.
- 3
Wire the trigger
Select the trigger button, open its Link settings, click the dynamic tag icon, and choose Actions, then Off-Canvas, pointing at the panel's widget. Any other button or menu item can open the same panel the same way.
- 4
Edit the panel content
The panel is a normal container: swap links, connect the contact form's action, or leave the Woo Mini Cart to render your store's cart. Cart drawers require WooCommerce to be active.
Troubleshooting
Clicking the trigger does nothing
The trigger's link must use the Off-Canvas dynamic action pointing at THIS panel. Re-select it in the button's Link settings; a plain # link opens nothing.
The panel content looks cut off in the editor
The editor previews the panel closed. Click the Off-Canvas widget and use its editing handle to open it while designing; on the live site it opens from the trigger.
The cart drawer is empty
The Mini Cart renders your real WooCommerce cart: it shows products only when the visitor has items in the cart and WooCommerce is active.
Browse every template this guide covers:
Off-Canvas Panels →