Offcanvas are also known as Flyout menus. They appear when a user clicks on a button or link. You can place any type of content inside it. They are mostly seen in modern websites navigation menu.
How to use the Off-Canvas Widget of The Plus Addons For Elementor
The Off Canvas widget is an advanced widget and needs to be configured properly.. Let’s understand how to use this widget in the tutorial below.
Search for the Off-Canvas widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.
Off Canvas Content
Select Elementor Templates you want to use.
Select what type of option you want to display.
Enter the Button Text here.
Select the Icon font here.
Select the Icon here.
Set the Icon position here.
Set the Icon Spacing here.
Set the Icon Size here.
Set the Alignment here.
Content Open Style
Select your desired Content Open Style here.
Content Open Direction
Select your desired Content Direction Style here.
Content Open Width
Select your desired Content Width Style here.
Esc Button Close Content
Slide to enable the Esc Button Close Content here.
Outer Click Close Content
Slide to enable the Outer Click Close Content here.
On Click Link Off Canvas Close
Slide to enable the On Click Link Off Canvas Close here.
Fixed Toggle Button
Slide to enable the Fixed Toggle Button here.
he Style tab is used for customizing the appearance of all the OffCanvas widget components. All these styling options include customizing the fonts, colors, background, margins, and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options
Use this option to set the Typography, Background Radius, Background Type, Padding , Box shadow, Icon Alignment, Icon Type and Border Radius here.
Use this option to enable and style the Toggle Button with options like padding, typography, Border, Background type and Box Shadow here.
Content Scrolling Bar
Use this option enable and style the Content Scrolling Bar here.
Sticky Navigation Connection
Use this option to set the Text Color, and Background Type of the Sticky Navigation Connection.
On Scroll View Animation
On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View On Scroll View Animation Tutorial
Want to get nerdier with our widgets? Check out the Advanced Tab. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View The Advanced Tab Tutorial