OffCanvas

Display stunning sidebar menu using Responsive Addons for Elementor (RAE) OffCanvas widget. Customize the direction, button style and content to be added to the sidebar.

Content #

OffCanvas content #

1. 1.Open OffCanvas By Default – This setting is useful when you are styling the sidebar section so that you can see the changes dynamically.
2. 2.Title – You can set the Title of the Sidebar.
3. 3.Content Type – You can choose the content type for sidebar menu from the following options:
   1. 1.Sidebar – It allows you to choose the default WordPress sidebar to show in the sidebar.
   2. 2.Custom Content – You can set custom content to the sidebar by adding media, shortcode or changing the title or text content. (Selecting this option, displays a repeater for the sidebar)
   3. 3.Saved Section – You can choose from the saved section templates.
   4. 4.Saved Widget – You can choose from the saved widget templates. (Elementor Pro required)
   5. 5.Saved Page Template – You can choose from the saved page templates.

Toggle Button #

1. 1.Button Text – You can add the button text for the toggle button.
2. 2.Button Icon – You can insert an icon with the toggle button.

Settings #

1. 1.Direction – You can set the direction of the sidebar menu to show either on the left or the right.
2. 2.Content Transition – You can set the transition for the sidebar menu to show. (Slide, Reveal, Push, Slide Along)
3. 3.Show Close Button – You can choose to show the close button on the sidebar.
4. 4.Esc to Close – You can choose this Option to close the sidebar by pressing the ESC keyboard button.
5. 5.Click Anywhere to Close – You can choose this Option to close the sidebar by clicking anywhere.

Style #

OffCanvas Bar #

1. 1.Width – You can adjust the width of the sidebar menu.
2. 2.Background Color – You can adjust the background color of the sidebar menu.
3. 3.Image – You can choose the background image for the sidebar menu.
4. 4.Border Type – You can select the border type, border width, border color for the sidebar.
5. 5.Border Radius – You can select the border radius for the sidebar border.
6. 6.Padding – You can adjust the padding for the sidebar menu.
7. 7.Box Shadow – You can set the box shadow for the sidebar menu.

Offcanvas Title #

1. 1.Color – You can set the color for the OffCanvas title.
2. 2.Typography – You can set the typography such as font size, font family, etc. for the OffCanvas title.

Toggle Button #

1. 1.Alignment – You can choose the alignment for the toggle button.
2. 2.Size – You can set the size of the toggle button.
3. 3.Icon Size – You can set the size of the icon of the toggle button.
4. 4.Icon Space – You can adjust the spacing between the icon and text of the toggle button.
5. 5.Background Color – You can set the background color of the toggle button.
6. 6.Text Color – You can set the color of toggle button text.
7. 7.Border Type – You can select the border type, border width, border color for the toggle button.
8. 8.Border Radius – You can select the border radius for the toggle button border.
9. 9.Padding – You can adjust the padding for the toggle button.
10. 10.Box Shadow – You can set the box shadow for the toggle button.
11. 11.Typography – You can set the typography such as font size, font family, etc. for the toggle button text.

Close Button #

1. 1.Button Icon – You can select the close button icon from the icons library.
2. 2.Color – You can choose the color for the close button.
3. 3.Size – You can set the size of the close button.

Overlay #

1. 1.Color – You can set the color of the overlay background.
2. 2.Opacity – You can set the opacity of the overlay background.