web_offcanvas Shortcode
The web_offcanvas shortcode renders the off-Canvas component.
The attributes below match the current Page Builder controls and public output. Use raw syntax only for reviewed content that cannot be maintained through the visual controls.
Allowed child shortcodes: web_offcanvas_content.
Usage
[web_offcanvas]
Content
[/web_offcanvas]Attributes
| Attribute | Default | Accepted values | Purpose |
|---|---|---|---|
offcanvas_position |
left |
left, right |
Choose the position of the panel. |
offcanvas_width |
large |
normal, large |
Choose the width of the panel. |
offcanvas_overlay |
yes |
yes |
Show a dark overlay when panel is open. |
offcanvas_display_close_icon |
no |
yes |
Display a close button inside the panel. |
offcanvas_in_desktop |
yes |
yes |
When unchecked, the panel stays inline at this resolution. |
offcanvas_in_tablet |
yes |
yes |
When unchecked, the panel stays inline at this resolution. |
offcanvas_in_small_tablet |
yes |
yes |
When unchecked, the panel stays inline at this resolution. |
offcanvas_in_mobile |
yes |
yes |
When unchecked, the panel stays inline at this resolution. |
bg_color |
11 |
String unless stated otherwise | Choose color for background. |
text_color |
15 |
String unless stated otherwise | Choose color for text. |
device_visibility |
— | String unless stated otherwise | Applies the selected responsive visibility rule. |
el_id |
— | Valid unique HTML ID | Enter element ID (Note: make sure it is unique and valid according to w3c specification). |
el_class |
— | String unless stated otherwise | If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file. |
Enclosed content
Content between the opening and closing tags is processed as WordPress shortcode content. Keep the parent/child structure shown by the visual builder so nested components receive the context they expect.
Advanced CSS control
Use Settings → POM Theme → Advanced → Custom CSS → Component CSS → Offcanvas shortcode to replace the complete generated panel layout, side and width variants, close-row behavior, and responsive activation breakpoints. This editor affects reusable web_offcanvas components, not the theme's Side and mobile navigation or the WooCommerce advanced-filter panel.
Saving a custom version replaces this fragment at its existing position inside website.min.css. Use the general Custom CSS editor instead when only a small additional override is required.
Verification
Populate web_offcanvas with web_offcanvas_content and confirm every child remains reachable in the intended order. Pay particular attention to offcanvas_position and offcanvas_width.