SiteOrigin Off Canvas Widget
Flexible content areas built with page builder.
Slide, push and reveal transitions.
Left or right side screen alignment.
Toggle the Off Canvas section with any widget, not just buttons.
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.
Off Canvas widgets have a field for their ID this is the ID you will use in the toggle element. The toggle element data attribute is in the format

uk-toggle="target: #ID"
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 an Off Canvas widget and a toggle element to the page builder grid.
Give the Off Canvas widget an ID.
Set the Data Attribute on the toggle element.
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.