Animated Off-Canvas

Before setting up the Animated Off-Canvas Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. This widget is available as a paid feature. Once activated, you can explore both free and pro widgets by filtering the selection options.

Introduction

The Animated Off-Canvas Widget is a premium feature in Animation Addons for Elementor that lets you create sleek, animated off-canvas menus and panels for enhanced 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 ?

How to Activate the Animated Off-Canvas Widget?

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.

Now, the Animated Off-Canvas Widget is ready to use!

How to Add Animated 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 the widget from Animation Addons → Elements, create a new page, set a title, choose the Elementor Full Width template, and publish. Adjust page settings as needed.

• In the Elementor panel, search for the “Animated Off-Canvas Widget.”
• Drag and drop the widget into your desired section.
• Customize the off-canvas content, animation style, position, and trigger options using the available settings to match your design needs.

Your Animated Off Canvas Widget is now ready to showcase your brand professionally across your site!

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 

The Animated Off-Canvas widget provides customization options to adjust the behavior and appearance of the off-canvas menu, ensuring a tailored user experience.

Available Options:

• Open Button Text: Customize the text displayed on the button that triggers the opening of the off-canvas menu.
  
• Enable Icon Toggle Button: Activate or deactivate the icon toggle button, which allows users to open and close the off-canvas menu.
  
• Default Close Icon Toggle Button: Choose the default icon for the close button, allowing users to close the off-canvas menu with a single click.

These settings provide full control over the off-canvas menu’s interactive elements, offering a seamless and user-friendly navigation experience.

Content

The Content section of the Animated Off-Canvas widget allows you to further customize the content and functionality of the off-canvas menu, enhancing its interactivity and user experience

Available Options:

• Show Loop or Image Toggle Button: Enable or disable the toggle button for displaying a looping animation or image within the off-canvas menu.
  
• Add Logo or Image: Upload and display a logo or image within the off-canvas panel to enhance branding and visual appeal.
  
• Menu: Integrate a navigation menu within the off-canvas panel for seamless user navigation.
  
• Contact Information Tab: Add a contact information tab to provide users with quick access to your contact details.
  
• Language Tab: Include a language selection tab to allow users to switch between languages, improving accessibility for global audiences.
  
• Follow Information Tab: Add social media or follow information to engage users and encourage interaction with your brand’s social platforms.

These content customization options provide flexibility in creating a comprehensive and interactive off-canvas menu tailored to your site’s needs.

Style Settings

The Animated Off-Canvas widget offers a wide range of customization tools to help you design dynamic, responsive menus and content panels. Below is a detailed guide to each section and how the settings affect the layout and functionality.

Off-Canvas Settings

These settings control the main container of the off-canvas panel.

• Background Type: Set a solid color, gradient, or image background for the off-canvas panel to match your site’s theme.
• Padding: Add internal spacing within the off-canvas area to maintain a clean and balanced layout.
• Swap Column: Swap the order of left and right columns inside the off-canvas layout to adjust the structure as per design requirements.

Effect: Adjusting these settings changes the visual style and spacing of the entire off-canvas container.

Off-Canvas Left

• Display: Choose between Show or Hide to control the visibility of the left section.
• Width: Define the width of the left panel to control space allocation.
• Background Type: Apply a background (color/gradient/image) to this specific section.
• Padding: Manage internal spacing for content within the left section.
  

Effect: Enables structured layout design by controlling visibility, width, and styling of the left column.

Off-Canvas Right

• Display: Choose between Show or Hide to control the visibility of the right section.
  
• Width: Define the width of the right panel.
  
• Background Type: Customize the right section’s background for visual distinction.
  
• Padding: Adjust inner spacing to improve content layout.

Effect: Helps create dual-column or split-layout designs within the off-canvas panel.

Logo / Image

Width & Height: Define the dimensions of the logo or image added inside the off-canvas panel for better brand placement and scaling across devices.

Menu Settings

• Color: Set the default text color for menu items.
  
• Hover Color: Customize the text color on hover for improved user interaction.
  
• Border Color: Define border colors to enhance visual separation between items.
  
• Typography: Control font size, family, weight, and style for menu items.

• Height Auto: Enable or disable automatic height adjustment for the menu.
  
• Padding: Adjust internal spacing of menu items for a cleaner layout.
  
• Level Two & Three Padding: Customize padding for submenu levels to manage hierarchy and spacing.

Expand Icon (for Submenus)

• Color: Set the icon color for submenu toggles.
  
• Icon Size: Adjust the size of the expand/collapse icon.
  
• Padding Size: Manage the spacing around the icon to align it properly within the menu layout.

Contact

The Contact section within the Animated Off-Canvas widget allows you to display essential contact details in a visually appealing and organized manner. Below are the available customization options:

• Display: Toggle between Show or Hide to control the visibility of the contact section.
  
• Gap: Define the spacing between individual contact items for better layout and readability.
  
• Color: Set the text color for the contact information to match your overall design.
  
• Typography: Customize the font style, size, weight, and line height for the contact text.
  
• Label Color: Set a specific color for labels (e.g., “Phone”, “Email”) to visually differentiate them from the details.
  
• Label Typography: Adjust font properties for labels to enhance clarity and hierarchy.
  
• Margin: Control the outer spacing around the contact section to align it with other content.

These settings help present your contact details in a clean and structured way, ensuring better accessibility and design consistency.

Follow Social Media

The Follow section allows you to display social media icons within the Animated Off-Canvas panel, making it easy for users to connect with your brand across platforms. Below are the available customization options:

• Display: Toggle the visibility of the social media icons by selecting either Show or Hide.
  
• Color: Set the default icon color to match your website’s branding.
  
• Hover Color: Define a different color for the icons when hovered over to enhance interactivity.
  
• Icon Size: Adjust the size of the social media icons for better visibility and alignment.
  
• Margin: Control the spacing around the icons to maintain a clean and balanced layout.

These options ensure your social media links are prominently and professionally displayed within your off-canvas design.

Search

The Search option within the Animated Off-Canvas widget provides a simple and functional search bar for enhanced user navigation. Available customization options include:

• Display: Choose to Show or Hide the search bar within the off-canvas panel.
  

Color: Set the color of the search input text to align with your site’s design.

These settings allow you to integrate a seamless and visually consistent search experience into your off-canvas layout.

Language

The Language option in the Animated Off-Canvas widget lets you add and style language selection elements within the panel. Available settings include:

• Display: Toggle between Show or Hide to control the visibility of the language section.
  
• Color: Set the text color to match your overall design aesthetics.
  
• Typography: Customize font style, size, weight, and spacing for clear and consistent text appearance.

These options help ensure that language selectors are both accessible and visually integrated into your off-canvas layout.

Open Button

The Open Button settings in the Animated Off-Canvas widget allow you to personalize the appearance of the trigger button that opens the off-canvas panel. Available options include:

• Color: Set the text or icon color of the open button to align with your site’s design.
• Typography: Customize the font style, size, and weight for the button text to ensure visual consistency and readability.

These options help create a cohesive and engaging user experience from the very first interaction.

Close Button 

The Close Button settings in the Animated Off-Canvas widget provide control over the appearance and behavior of the panel’s close trigger. Available customization options include:

• Icon Size: Adjust the size of the close icon for better visibility and alignment.
• Circle Size: Set the size of the circular container around the icon (if applicable).
• Border Radius: Define the roundness of the button edges for a softer or sharper look.
• Margin: Manage spacing around the close button for precise positioning.

• Animation Effect: Choose from two animation patterns to define how the button responds on interaction.
• Color: Customize the icon color to match your design.
• Background Type: Select a solid or gradient background to enhance the button’s visual impact.

These settings ensure the close button is both functional and seamlessly integrated into your off-canvas design.

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!