1. Home
  2. Docs
  3. Content Elements
  4. Offcanvas

Offcanvas EA Element

The OffCanvas element of Elementor Addons for the Elementor Builder allows you to create beautiful Slide-in menus on your WordPress website. Using the Offcanvas Content for Elementor you can create impressive menus, popups or custom content displays that slides in when the trigger is activated. You can use button, image and shortcode content to OffCanvas effect. Here in this tutorial, you’re going to learn how to use the Offcanvas element into Elementor Page Builder. So let’s get straight into it:

 

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Offcanvas Element

 

»Content

 

Offcanvas Content

⇒Content-Type: Select the content type of Offcanvas content. You can add any custom content, or select from the saved section, saved widget or saved page template to the OffCanvas in order to have your desired item.

⇒Input Custom Content: Input the custom content for the OffCanvas. Type your desired title and description to each item.

→Title: Enter the title for each Offcanvas content. Click on Dynamic settings to apply the AnalogWP Classes to the title. (Ex. Add a light background)

→Description: Enter the description for each Offcanvas content. Click on Dynamic settings to apply the AnalogWP Classes to the content. (Ex. Add a dark background)

⇒Add Item: Use the ‘+Add Item’ button to add more content to the Offcanvas.

 

Toggle Button

⇒Button Text: Input the toggle button text here. Click on Dynamic settings to apply the AnalogWP Classes to the button text. (Ex. Add a dark background)

⇒Button Icon: If you want to add an icon within the toggle button, then select the icon you want from the list.

⇒Icon Position: Set the icon position either before or after the button text.

⇒Icon Spacing: Generate space between icon and button text manually for different dimensions.

 

Settings

⇒Direction: Set the direction of the Offcanvas content bar either left or right.

⇒Content Transition: Customize the Offcanvas content transition either slide or other effects from the list.

⇒Show Close Button: If you want to show the close button in the Offcanvas pop-up bar, then enable the show close button.

⇒Esc to Close: Enable if you want to set the Esc key to close the Offcanvas.

⇒Click Anywhere to Close: Enable if you want the Offcanvas to be closed while clicking anywhere in the page.

 


»Style

 

Offcanvas Bar

⇒Background Type: Set the background type either Classic or Gradient for the Offcanvas bar. And then customize the style according to your preference.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the Offcanvas bar for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the Offcanvas bar border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the Offcanvas bar for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the Offcanvas bar for different dimensions. You can link the values together or customize them individually.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Content

⇒Alignment: Set the Offcanvas content alignment either left, right, center or justified.

⇒Box

→Background Color: Add a custom background color to the Offcanvas boxes.

→Typography: Set the typography options for the titles.

→Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the box for different dimensions. You can link the values together or customize them individually.

→Border Color: Add a custom color to the Offcanvas box border.

→Border Radius: Set the border radius for the top, right, bottom and left around the box for different dimensions.

→Bottom Spacing: Generate spaces at the bottom of each box.

→Padding: Set the padding value for the top, right, bottom and left around the box for different dimensions. You can link the values together or customize them individually.

⇒Text

→Text Color: Add a custom color to the Offcanvas content text.

→Typography: Set the typography options for the texts.

⇒Links

→Color: Add a custom color to the Offcanvas content link for both normal and hover view.

→Typography: Set the typography options for the links.

 

Toggle Button

⇒Alignment: Set the toggle button alignment either left, right or center.

⇒Size: Set the toggle button size.

⇒Background Color: Add a custom background color to the Offcanvas toggle button for both normal and hover mode.

⇒Color: Add a custom color to the toggle button for both normal and hover mode.

⇒Border Type: Here, select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the toggle button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the Offcanvas toggle button border for both normal and hover mode.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the toggle button for different dimensions.

⇒Typography: Set the typography options for the toggle button text.

⇒Padding: Set the padding value for the top, right, bottom and left around the toggle button for different dimensions. You can link the values together or customize them individually.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Close Button

⇒Button Icon: Choose a close button icon of the Offcanvas bar from the icon list.

⇒Color: Customize the close button icon color.

⇒Size: Set the close button size of the Offcanvas icon for different dimensions.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the button for different dimensions.

⇒Typography: Set the typography options for the button text.

 

Overlay

⇒Color: Add a custom overlay color to the Offcanvas outer space.

⇒Opacity: Customize the opacity of the overlay.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Offcanvas Element.


Was this article helpful to you? Yes No

How can we help?