Off-Canvas Widget

The Off-Canvas widget allows you to design a stunning off-canvas panel that can slide-in over your page.  The off-canvas panel can be triggered with a button, text, image, icon or through any other widget. This panel can display content, menu, saved -sections/page/widgets.

Key features –

• The off-canvas panel can display – Content/ Menu / Saved Section / Saved Page / Saved Widget
• Trigger off-canvas content with – Button / Icon / Custom Class / Custom ID
• Off Canvas window width and position option (Left/Right)
• Off Canvas window appear effect (Slide/Push)
• Preview off canvas window in the backend
• Close Button style (icon, alignment, size, color)
• Off Canvas window background color and content spacing

Below are the settings available for Off-canvas Widget

Content Type

Under the Content tab, you will see two options –

• Preview: Enabling this option will give you a preview of the Off-Canvas so that you can see how it will appear in real time.
• Content Type: Choose what type of content you wish to display in the off-canvas window. available options are – Content (text, HTML) / Menu / Saved Section / Saved Page / Saved Widget

OFF-CANVAS

Under Off Canvas tab you will see two options –

• Width: This allows you to control the width of the canvas. You can specify width in px and responsive devices with toggle.
• Position ( left/right ): Choose a direction off-canvas content should appear
• Appear Effect: Choose entry effect for the off-canvas window.
• Overlay Color: This will be applied to the rest of the window than off-canvas. It will help to highlight off-canvas window.

Canvas background color ans padding can be managed from Style tab > Off Canvas

Display Settings

Display settings will allow you to choose a trigger for canvas. You can display it on the click of a text, icon, button or any other element (with CSS class/ID).

Button / Icon display settings offer a floating option. This will allow setting a floating button / Icon along the right or left edge of the browser. Below is the example of how it works –

Read how you can trigger a canvas from Menu Element or from another Elementor widget.

Close Button

You can customize the button that will close your canvas. You can set its size, position and related style of the close button.
Options to close popup on ESC Keypress and on Overlay Click are available.