Off-Canvas for 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 linkss
Enter / Space keyboard keys inside off-canvas on close button (X) to close the off-canvas
Escape keyboard key to close the off-canvas
Using Off-canvas widget
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.
You can choose only one type of content for each sidebar.
Display them in one of the five positions and activate / deactivate an overlay.
The first option is Relative to the trigger position and the Off-canvas content is positioned below the trigger.
The Shortcode content type naturally accepts shortcodes of all kinds.
Menu Display one of the menus in your WordPress environment and define the number of levels to be displayed.
Custom text Display customized content in the WYSIWYG widget.
Elementor template: display the contents of a previously saved template.
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
You can trigger the opening of the sidebar with a button or free text.
The button can be sticky for the positions Left or Right, it is fixed on the right / left side of the visual space.
Align and add a pictogram before / after the button caption
Styling content and triggers
By default, if you have selected the Relative, Top or Bottom position you can let the system calculate the height (Default) or you can define a height. For Left or Right positions, you can define the width of the container.
You can change the background color and add an image on the background. and apply a fusion mode.
Text, Menu and Widget content have their own style sections as well as for triggers
