OffCanvas

< All Topics
Widget Used
OffCanvas
Knowledge Required
Advanced

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.

Pro tip
Why not add a contact form inside the Offcanvas panel? Cool isn’t it? Easier for your visitors to contact you. You can also use it to place latest offers so that your website visitors can easily check them.

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.

Table Of Contents

General Steps


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.

1. Content

Off Canvas Content

Elementor Templates

Select Elementor Templates you want to use.

Select Option

Select what type of option you want to display.

Button Text

Enter the Button Text here.

Icon Font

Select the Icon font here.

Icon

Select the Icon here.

Icon Position

Set the Icon position here.

Icon Spacing

Set the Icon Spacing here.

Icon Size

Set the Icon Size here.

Alignment

Set the Alignment here.

Extra Options

Enable Fixed Toggle Button for the Offcanvas widget.

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.

2. Style

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

Open Content

Use this option to set the Typography, Background Radius, Background Type, Padding , Box shadow, Icon Alignment, Icon Type and Border Radius here.

Toggle Button

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

3. Advanced

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

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?