The Off Canvas Widget for Elementor lets you design sleek, customizable sliding menus, sidebars, or panels, perfect for improving navigation and creating dynamic, space-saving layouts. This widget offers versatile options for content display, trigger actions, making it ideal for enhancing your website’s usability and aesthetic appeal.
Let’s look at each of the options in the Off Canvas widget for Elementor below.
Add a Off Canvas Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Off Canvas”
- Hover over the widget in the search results and click install
- Add the “Off Canvas” widget to any Elementor Page
General Settings
Off Canvas Type
Select the off canvas type.
- Elementor Id
- Content
Content
Type text for content.
Off Canvas Text
Type text for off canvas button.
Close Icon
Choose icon for close button.
Vertical Align
Set the vertical alignment of button.
- Start
- Center
- End
Horizontal Align
Set the horizontal alignment of button.
- Start
- Center
- End
Z-Index
Set the z-index of off canvas.
Animation
Set the animation of off canvas.
- Fade In
- Slide From Left
- Slide From Top
- Slide From Bottom
Animation Transition
Set the animation transition time in milliseconds.
Debug and Testing Settings
Off Canvas Widget Styling
Choose colors that match your website’s style and customize text, icons, fonts, and layout to perfectly suit your design.
Open Off Canvas Link Styling
Set the off canvas link typography, background, padding, border radius, and border.
Overlay Styling
Style the overlay background color, image, and padding.
Off Canvas Styling
You can set the off canvas width, height, border, radius, padding, and background color.
Close Icon Styling
Here, you can set the close icon size, color, positioning, background, border, and radius.
Off Canvas Design Examples For Elementor
Here are the live use cases for the Off Canvas Widget.
Help and support panel as off canvas section.
Room cost calculator as off canvas side panel.
We hope this documentation helps you make the most of the Off Canvas Widget for Elementor. Its ability to create engaging off-canvas sections opens up endless design possibilities for your site.
For further details or support, feel free to explore our website or reach out.
