Why We Should Not Use Off Canva Widget [New feature In Elementor 3.22 Beta]

Hi everyone, welcome to WebSensePro! In today’s blog post, we’re going to explore Elementor’s latest feature release – the Off-Canvas widget. This feature, part of the Elementor 3.22 beta, is somewhat similar to pop-ups but with unique functionalities. While it holds a lot of potential, there are some issues you should be aware of. We’ll guide you through the setup process and highlight the current bugs to watch out for.

Step 1: Update to Elementor 3.22 Beta

Before you can use the Off-Canvas widget, you need to update your Elementor to version 3.22 beta. Here’s how:

1. Go to your WordPress dashboard.
2. Navigate to Plugins > Installed Plugins.
3. Find Elementor and click Update Now to get the latest version.

Step 2: Activate Nested Elements

To use the Off-Canvas widget, you need to activate the nested elements feature:

1. In your WordPress dashboard, go to Elementor > Settings.
2. Click on the Features tab.
3. Scroll down and ensure Nested Elements is activated.

Step 3: Create a New Page

1. Go to Pages > Add New
2. Name your page and click Edit with Elementor

Step 4: Add the Off-Canvas Widget

1. In the Elementor editor, search for “Off-Canvas” in the widget panel on the left.
2. Drag the Off-Canvas widget to your page.

Step 5: Customize the Off-Canvas Widget

1. Open the Navigator to manage your widget’s structure easily.
2. Add a container inside the Off-Canvas widget.
3. Customize your Off-Canvas widget by adding elements like headings, text, and a WordPress menu.

• To add a heading, drag the Heading widget into the Off-Canvas container.
• For a menu, drag the Nav Menu widget into the container and set its layout to vertical if desired.

Step 6: Adjust Layout and Position

1. Set the position of the Off-Canvas widget (e.g., center or start).
2. Adjust the width and height as needed. You can set the width in pixels or percentage and customize the height to fit the content or set a fixed height.

Step 7: Add and Customize Animations

1. Choose from various animations for the Off-Canvas widget, like fade-in or slide from the left.
2. Set animations for both opening and closing the Off-Canvas widget.

Step 8: Add a Close Button

1. Drag a Button widget into the Off-Canvas container.
2. Remove the button text and add an icon (e.g., a times icon).
3. Style the button (e.g., align it to the right and adjust its size and color).

Step 9: Link the Close Button to the Off-Canvas Widget

1. Select the button and go to the Content tab.
2. Choose the Dynamic Tags option and select Off-Canvas.
3. Set it to close the Off-Canvas widget when clicked.

Step 10: Test and Identify Bugs

1. Update your page and preview it.
2. Test the Off-Canvas widget by clicking the heading to open it and the button to close it.
3. Note that there is a known bug: the widget may not display correctly in the preview mode and might appear lower than intended. However, it should work properly when the page is live.

Conclusion:
While the Off-Canvas widget in Elementor 3.22 beta offers exciting new capabilities, some bugs need to be addressed. We hope this step-by-step guide helps you understand how to use this new feature and highlights why you might want to wait until the bugs are fixed before using it on a live site.