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, no, empty |
Side panel at ≥992px; false/empty means inline. |
offcanvas_in_tablet |
yes |
yes, no, empty |
Side panel at 768–991px; false/empty means inline. |
offcanvas_in_small_tablet |
yes |
yes, no, empty |
Side panel at 576–767px; false/empty means inline. |
offcanvas_in_mobile |
yes |
yes, no, empty |
Side panel below 576px; false/empty means inline. |
bg_color |
11 |
1–15, empty to inherit | Background palette helper. |
text_color |
15 |
1–15, empty to inherit | Text palette helper. |
accessible_name |
Translated Offcanvas | Plain text | Accessible panel name. |
close_label |
Translated close label | Plain text | Accessible name of the close button. |
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.
Existing Unicode IDs, such as menú, remain unchanged. Use the same ID in the button target and ensure every panel ID is unique. Numeric IDs retain the offcanvas- prefix.
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.
Use a Button with button_type="offcanvas" and button_offcanvas_id="your-panel-id" to open it. An omitted ID receives a generated ID, but explicit IDs are recommended for triggers. The panel closes with Escape, its optional native close button, or the overlay. Focus returns to the triggering control; inline content remains in document order. Device switches are not visibility rules.
New block-editor content can use the Offcanvas block, which shares these styles and behavior. New blocks show the close icon by default; existing shortcode defaults are unchanged.