V4 Elements Offcanvas Estimated reading: 8 minutes 16 views Add a slide-in drawer to your page. Put a menu, a contact form, a photo or anything else inside, and open it with a small icon or with any button on your page. No code needed. WIDGET Offcanvas PARTS Trigger, Overlay, Panel PLAN Pro A QUICK LOOK What You Will Build A Menu button that opens a drawer from the left. The drawer has a photo, a title and four links. The visitor closes it with the X, with the Esc key, or by clicking outside of it. Click Menu, the drawer slides in. Click the X, it slides out BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free and Pro Note: Offcanvas is a Pro widget. Install and activate both Animation Addons and Animation Addons Pro. Note: There is an older widget called Animated Off-Canvas. This page is about the new Offcanvas, the one with the small atom symbol in the Elements panel. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: Offcanvas is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Under Interaction Widgets, find Offcanvas and switch it on. Click Save Settings. The Offcanvas card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the widget in. Click the + button at the top left to open the Elements panel. Type Offcanvas in the search box. Drag the Offcanvas onto your page. Choose the one with the atom symbol, not Animated Off-Canvas. The search box (1) and the Offcanvas widget (2) (click to zoom) Note: A new Offcanvas shows only a small hamburger icon. The drawer is closed, so you do not see it yet. Step 4 shows you how to open it while you edit. STEP 3 Meet the Parts Open the Structure panel. Your Offcanvas is made of three parts. Click any part to style it. The Trigger (1), the Overlay (2) and the Panel (3) (click to zoom) Trigger: the small icon that opens the drawer. Overlay: the dark layer behind the drawer. It dims your page. Panel: the drawer itself. It starts with a Close button, and you drop your own content into it. Tip: The three main parts are locked, so you cannot delete one by accident. STEP 4 Fill the Drawer Select the Offcanvas and open the Offcanvas section in the General tab. Open Panel (Editor) (1) and Position (2) (click to zoom) Switch Open Panel (Editor) on. The drawer opens right in the editor, so you can work inside it. Drag anything into the drawer: an image, a heading, text, a menu, a form. It works like any other box. Choose the Position: Left (default), Right, Top or Bottom. When you are done, switch Open Panel (Editor) off. The switch (1) and the open drawer (2) (click to zoom) Note: While the switch is on, the drawer and its dark layer cover your page in the editor. That is why you should switch it off when you are done. It also switches itself off every time you open the page again, and on a copy you paste somewhere else. Note: The switch only changes what you see in the editor. It does not change your live page. STEP 5 Style the Drawer Click a part in the Structure panel, then open the Style tab. Select the Panel. Open Size and set the Width, for example 380 px. Open Background and pick the Color of the drawer. Select the Trigger. In the General tab, click the Icon picture to use your own icon. In the Style tab, change its color and size. Select the Overlay. In Style > Background, pick the color of the dark layer. Select Close to style the X button. The Width (1) and the Max width (2) (click to zoom) The drawer color (1) (click to zoom) The Trigger icon (1) (click to zoom) Note: A new drawer is wide. It can take up to 90 percent of the screen. Set a Width on the Panel, like 380 px, to get a slim drawer. STEP 6 Choose How It Opens and Closes Select the Offcanvas and open Behavior and Animation in the General tab. Overlay Reveal: how the dark layer appears. Choose Fade (default), Circle Reveal or Blinds / Stripes. Keep Close on Overlay Click on, so a click outside the drawer closes it. Keep Close on Esc Key on, so the Esc key closes it. Overlay Reveal (1), Close on Overlay Click (2) and Close on Esc Key (3) (click to zoom) Open Animation: how the drawer arrives. The default is Slide. There are 13 to pick from, like Fade, Zoom, Flip, Curtain Split and Blur. Close Animation: how it leaves. The default is Same as Open (reverse). Set the Duration (ms). The default is 400. Pick the Easing: Smooth (default), Strong, Back, Elastic, Expo or Linear. Open Animation (1), Close Animation (2), Duration (3) and Easing (4) (click to zoom) Tip: A visitor whose device asks for less motion gets the drawer without the fancy moves. STEP 7 Open It From Any Button or Link The hamburger icon is not the only way. Any button, link or menu item on your page can open the drawer. Give the drawer a name, then point a link at that name. Select the Offcanvas. In Behavior, type a name in Open From Any Link (ID), for example site-menu. Select the Button (or any link) that should open it. In its Link box, type #site-menu. Update your page and click the button on your live page. The ID of the drawer (1) (click to zoom) The button link (1) (click to zoom) Tip: Use letters, numbers and dashes in the ID, with no spaces. The # in front is optional in the Offcanvas box, but the link must start with #. Note: Only a link that matches the name opens the drawer. All other links, like #contact, work as they always did. Developers can also add the attribute data-aae-offcanvas-open="site-menu" to any element. RESULT Final Result A drawer that opens from your own button, with your own content. The Menu button opens the drawer SETTINGS Options Open Panel (Editor) Default: OffShows the drawer in the editor, so you can fill it. It does not change your live page. Position Default: LeftLeft, Right, Top or Bottom. Overlay Reveal Default: FadeFade, Circle Reveal or Blinds / Stripes. Close on Overlay Click Default: OnA click outside the drawer closes it. Close on Esc Key Default: OnThe Esc key closes it. Open From Any Link (ID) Default: EmptyA name for the drawer. A link to #name opens it. Open Animation Default: Slide13 ways for the drawer to arrive. Close Animation Default: Same as Open (reverse)How the drawer leaves. Duration (ms) Default: 400How long the move takes. Easing Default: SmoothThe feel of the move: Smooth, Strong, Back, Elastic, Expo or Linear. Trigger Icon Default: HamburgerThe icon that opens the drawer. Choose your own SVG. ID Optional CSS ID of the Offcanvas. GOOD TO KNOW More Details The page does not scroll While the drawer is open, the page behind it stays still. Back to where you were When the drawer closes, your place on the page goes back to the button or link that opened it. This helps keyboard users. Many drawers Add as many as you like. Give each one its own ID. Works with later links A link that appears after the page loads, like a menu item, can open the drawer too. Any content The panel takes any widget: menu, image, form, icons, buttons. HELP Troubleshooting I only see a small hamburger icon That is normal. The drawer is closed. Switch Open Panel (Editor) on to see it while you edit. The drawer covers my whole page in the editor Select the Offcanvas and switch Open Panel (Editor) off. It also switches off by itself when you open the page again. My drawer is too wide Select the Panel, open Style > Size and set a Width, for example 380 px. My button does not open the drawer Check that the ID in Open From Any Link (ID) and the link match, for example site-menu and #site-menu. Check the link starts with #, has no spaces, and that you updated the page. Test it on your live page, because buttons do not open the drawer in the editor. I do not see the Offcanvas in the Elements panel This is a Pro widget. Make sure Animation Addons Pro is active. Then go to Animation Addon > Widgets > Elementor V4 (Atomic), switch on Offcanvas and click Save Settings. The text in my drawer is too big or the wrong color Click the text in the Structure panel and set the size and the color in the Style tab. Your site may set its own text style. You Did It Your page now has a drawer that opens from any button you like. If you face any problem, please contact our support team. We are happy to help.
