The Off-Canvas menu for the free version of Elementor is a new component that will allow you to create unlimited content blocks that you will display in a panel.
In this tutorial you will learn how to select and implement the type of content you want to display in the sidebar, the choice of the trigger and the set of styles applicable to the component.
Accessibility for off-canvas widget
Enter / Space keyboard keys on button/text to trigger the off-canvas
aria-label text 'Open off-canvas + title of the button/text
aria-expanded to indicate whether the off-canvas is expanded or not
aria-controls to identify the HTML tag whose contents are controlled
aria-haspopup equal 'dialog'
Tab keyboard key inside off-canvas to move between elements
Enter / Space keyboard keys inside off-canvas on close button (X) to close the off-canvas
Escape keyboard key to close the off-canvas
How to activate Off-canvas menu
Elementor plugin is installed and active.
EAC components plugin is installed and active.
From the settings panel you have to drag & drop the ‘Off-canvas‘ icon on the panel preview.
Select and display the content
The Off-canvas can be closed with the ‘escape‘ key, a click on the overlay or on the cross visible in the upper space of the sidebar.
The ‘Form‘ content type naturally accepts shortcodes of all kinds
With the ‘Widget‘ content type, you can choose several widgets from the WordPress standard and the widgets contained in the content sidebars you created
Select trigger and add attributes
The button can be sticky, it is fixed on the right / left side of the visual space.
Its position can be changed in the style tab.
Add a pistogram before / after the button caption
Styling content and trigger
