Animated Off-Canvas

Introduction

The Animated Off-Canvas Widget is a premium feature in Animation Addons for Elementor, allowing you to create stylish off-canvas menus and panels with smooth animations for better user engagement.

Key Use Cases for the Animated Off-Canvas Widget

The Animated Off-Canvas Widget in Elementor is perfect for:

• Mobile Menus – Create stylish, animated off-canvas menus for a better mobile user experience.
• Sidebar Content – Display additional content or widgets in an off-canvas panel for a cleaner layout.
• Navigation Enhancement – Improve website navigation with smooth slide-in animations.
• Hidden Panels – Use for hidden content that can be revealed on demand, providing a neat design.
• Interactive Design – Engage users with smooth and customizable animations on your website.

With the Animated Off-Canvas Widget, you can easily create interactive off-canvas panels with customizable animations, improving user experience and site design.

Prerequisite

• Elementor
• Animation Addons for Elementor

How to Animated Off-Canvas Widget ?

To activate the Animated Off-Canvas widget, follow these steps:

1. Go to Animation Addons → Elements in your WordPress dashboard.
2. Locate the Animated Off-Canvas widget in the list.
3. Toggle it on to enable the widget.

How to AddAnimated Off-Canvas Widget in Elementor

1. Open the page where you want to add the Site Logo.
2. Launch the Elementor editor.
3. In the Elementor panel, search for “Site Logo.”
4. Drag the Animated Off-Canvas widget to your desired section.
5. The Animated Off-Canvas widget will now be available for customization.

You can upload your logo, adjust its size, alignment, and link it to the homepage as needed.

How to Configure the Animated Off-Canvas Widget

Enable it, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust options as needed.

Note: Selecting full Elementor elements in a template unlocks all widgets and customization options, boosting design flexibility and functionality. 

Navigate to the Edit with Elementor option to access the editor interface

After selection, the Elementor panel appears with all tools and customization options.

Click the “+” icon to add a container, then select the appropriate column structure and layout.

Here’s the interface where you can configure the settings and customize the Site Logo Widget across various tabs. 

Configuring Animated Off-Canvas Widget : A Step-by-Step Guide

Once the Animated Off-Canvas Widget is added to your page, you can configure its settings under different tabs: Content, Style and Advanced.

Content Settings

There are two options available: Settings and Content.

Settings 

• I didn’t customize the default design. I kept it as it was initially set. 
• However, you can customize the text of the open button, enable the icon, and set the default close icon. You can also upload your own custom icon if needed.

Content

There are several options to set up information for your design, including adding a logo image, selecting a menu (where you’ll find multiple options), and setting contact info, language info, and social follow info. Let’s explore what adjustments I’ll make.

To set up the Contact Info in the Animated Off-Canvas Widget, you need to:

• Add Contact Information: Insert your phone number, email address, or any other contact details you’d like to display.
• Choose Display Settings: You can decide if you want the contact info to appear as text or as clickable icons.

Once you complete these steps, your contact info will be neatly displayed within the Animated Off-Canvas Widget. I’ve skipped the rest of the settings as they’re not needed for my design, but you can easily add them and observe the changes for your own design.

Style Settings

• You will find a total of 11 options for customizing your design. I didn’t choose to change any more, but you can easily customize your design and notice the changes. 

Advanced Settings

In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.

Final Outcome

That’s it! You’ve successfully learned how to configure the Animated Off-Canvas widget in Elementor to create a dynamic and interactive off-canvas design for your website.

For any further assistance or inquiries, feel free to contact our support team!