SiteOrigin Off Canvas Widget
The SiteOrigin Off Canvas widget creates page builder content areas that transition in from the side of the screen. The Off Canvas can transition in with slide, push and reveal animations with optional background darkening when toggled. Off Canvas sections work great for all kinds of content from menus to contact forms, maps and other supplemental details.
Toggle Element
To open the Off Canvas section a Toggle Element is used. The Toggle Element can be any widget, row or cell that has the appropriate Data Attribute set on it.
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus purus purus, quis vulputate ante vehicula ut. Suspendisse potenti. Suspendisse sit amet sagittis enim. Quisque quam leo, vehicula at ultricies quis, sagittis vitae leo.
TEXT WIDGET AS TOGGLE
Add a Modal Widget and a toggle element to the page. You can set the toggle Attribute on any widget, row or cell.
Give the Off Canvas an ID we will use to target it.
On the toggle element set the data Attribute.
Building Off Canvas Content
The actual content of the Off Canvas section is built with page builder where you can use any widgets or layouts you like.
Open the Off Canvas widget form and click Open Builder under Content in the Data section.
Mode
The Mode Modifier handles how the Off Canvas should interact with the page. There are 3 modes available, Slide, Push and Reveal.
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus purus purus, quis vulputate ante vehicula ut. Suspendisse potenti. Suspendisse sit amet sagittis enim. Quisque quam leo, vehicula at ultricies quis, sagittis vitae leo.
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus purus purus, quis vulputate ante vehicula ut. Suspendisse potenti. Suspendisse sit amet sagittis enim. Quisque quam leo, vehicula at ultricies quis, sagittis vitae leo.
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus purus purus, quis vulputate ante vehicula ut. Suspendisse potenti. Suspendisse sit amet sagittis enim. Quisque quam leo, vehicula at ultricies quis, sagittis vitae leo.
Flip
By default the Off Canvas section opens from the left of the screen, the Flip Modifier will invert this behaviour and open the Off Canvas from the right.
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus purus purus, quis vulputate ante vehicula ut. Suspendisse potenti. Suspendisse sit amet sagittis enim. Quisque quam leo, vehicula at ultricies quis, sagittis vitae leo.
Background
The background color of the Off Canvas section can be set via your global background colors or a custom color can used by leaving the modifier empty. The Background Modifier handles this aspect of the Off Canvas styling.
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus purus purus, quis vulputate ante vehicula ut. Suspendisse potenti. Suspendisse sit amet sagittis enim. Quisque quam leo, vehicula at ultricies quis, sagittis vitae leo.
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus purus purus, quis vulputate ante vehicula ut. Suspendisse potenti. Suspendisse sit amet sagittis enim. Quisque quam leo, vehicula at ultricies quis, sagittis vitae leo.
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus purus purus, quis vulputate ante vehicula ut. Suspendisse potenti. Suspendisse sit amet sagittis enim. Quisque quam leo, vehicula at ultricies quis, sagittis vitae leo.
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus purus purus, quis vulputate ante vehicula ut. Suspendisse potenti. Suspendisse sit amet sagittis enim. Quisque quam leo, vehicula at ultricies quis, sagittis vitae leo.
About
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus purus purus, quis vulputate ante vehicula ut. Suspendisse potenti. Suspendisse sit amet sagittis enim. Quisque quam leo, vehicula at ultricies quis, sagittis vitae leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus purus purus, quis vulputate ante vehicula ut. Suspendisse potenti. Suspendisse sit amet sagittis enim. Quisque quam leo, vehicula at ultricies quis, sagittis vitae leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rhoncus purus purus, quis vulputate ante vehicula ut. Suspendisse potenti. Suspendisse sit amet sagittis enim. Quisque quam leo, vehicula at ultricies quis, sagittis vitae leo.