Off-canvas global sections are blocks of Elementor content that should be used to display various type of content into an animated side panel.
A preview can be seen in the Athens Demo (on mobile).
Creating an off-canvas global section
Access Rey theme > Global sections and create a new one, and make sure to check the “Off-canvas panel” option. After entering Elementor edit mode, you click on the Page settings button( bottom left Gear icon) and configure the offcanvas panel as you want to. Afterwards you can start adding elements.
Screencast video here recording .
Open with “Trigger” widget
To activate the offcanvas panel in frontend, you will need to make use of the Navigation Trigger element. In this element you can select, how the trigger should look like (as a hamburger icon, general icon or even a plain simple button).
Screencast video using Nav. Trigger element recording .
Open with “Button” widget
Simply pick an Offcanvas Global Section from the Button widget settings ex: screenshot .
Open with custom link/anchor
You can open the Off-canvas from any location just by pasting in the generated anchor of the Global section, from the Post Settings ex: screenshot .
Importing a pre-made one (from Athens demo for example)
Here’s also a quick video recording recording importing a pre-made template and adding into another demo.
Troubleshooting:
Translating the Close button text
To edit the Close text, try editing the Off-canvas global section in Elementor and edit the page settings where you can find the custom text field eg: recording .
Removing focus ring when having menus inside
.rey-offcanvas-content .elementor-button:focus {
outline: none !important;
}