Off-canvas global sections are blocks of Elementor content that should be used to display various type of content into an animated side panel.
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 https://d.pr/v/6jt9fE .
Activate with trigger
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 https://d.pr/v/J98UnL .
Importing a pre-made one (from Athens demo for example)
Here’s also a quick video recording https://d.pr/v/OUaaDQ 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: https://d.pr/v/Zvu5aD .
Removing focus ring when having menus inside
.rey-offcanvas-content .elementor-button:focus {
outline: none !important;
}