web_offcanvas Shortcode
El shortcode web_offcanvas muestra el componente off-Canvas.
Los atributos que aparecen a continuación coinciden con los controles actuales del Page Builder y con la salida pública. Usa la sintaxis en bruto solo para contenido revisado que no pueda mantenerse mediante los controles visuales.
Shortcodes secundarios permitidos: web_offcanvas_content.
Uso
[web_offcanvas]
Content
[/web_offcanvas]Atributos
| Atributo | Predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
offcanvas_position |
left |
left, right |
Elige la posición del panel. |
offcanvas_width |
large |
normal, large |
Elige la anchura del panel. |
offcanvas_overlay |
yes |
yes |
Muestra una superposición oscura cuando el panel está abierto. |
offcanvas_display_close_icon |
no |
yes |
Muestra un botón de cierre dentro del panel. |
offcanvas_in_desktop |
yes |
yes, no, vacío |
Panel lateral a ≥992px; false/vacío significa en línea. |
offcanvas_in_tablet |
yes |
yes, no, vacío |
Panel lateral a 768–991px; false/vacío significa en línea. |
offcanvas_in_small_tablet |
yes |
yes, no, vacío |
Panel lateral a 576–767px; false/vacío significa en línea. |
offcanvas_in_mobile |
yes |
yes, no, vacío |
Panel lateral por debajo de 576px; false/vacío significa en línea. |
bg_color |
11 |
1–15, vacío para heredar | Asistente de paleta de fondo. |
text_color |
15 |
1–15, vacío para heredar | Asistente de paleta de texto. |
accessible_name |
Offcanvas traducido | Texto sin formato | Nombre accesible del panel. |
close_label |
Etiqueta de cierre traducida | Texto sin formato | Nombre accesible del botón de cierre. |
el_id |
— | ID HTML único válido | Introduce el ID del elemento (Nota: asegúrate de que sea único y válido según la especificación w3c). |
el_class |
— | Cadena, salvo que se indique lo contrario | Si deseas aplicar un estilo diferente a un elemento de contenido concreto, usa este campo para añadir un nombre de clase y haz referencia a él en tu archivo css. |
Contenido incluido
El contenido entre las etiquetas de apertura y cierre se procesa como contenido de shortcode de WordPress. Mantén la estructura padre/hijo que muestra el constructor visual para que los componentes anidados reciban el contexto que esperan.
Control CSS avanzado
Usa Settings → POM Theme → Advanced → Custom CSS → Component CSS → Offcanvas shortcode para sustituir por completo el diseño generado del panel, las variantes de lado y anchura, el comportamiento de la fila de cierre y los puntos de ruptura de activación adaptativos. Este editor afecta a los componentes reutilizables de web_offcanvas, no a la navegación lateral y móvil del tema ni al panel de filtros avanzados de WooCommerce.
Guardar una versión personalizada sustituye este fragmento en su posición existente dentro de website.min.css. Usa el editor general Custom CSS cuando solo se necesite una pequeña anulación adicional.
Los ID Unicode existentes, como menú, permanecen sin cambios. Usa el mismo ID en el destino del botón y asegúrate de que cada ID de panel sea único. Los ID numéricos conservan el prefijo offcanvas-.
Verificación
Rellena web_offcanvas con web_offcanvas_content y confirma que cada elemento secundario siga siendo accesible en el orden previsto. Presta especial atención a offcanvas_position y offcanvas_width.
Usa un botón con button_type="offcanvas" y button_offcanvas_id="your-panel-id" para abrirlo. Un ID omitido recibe un ID generado, pero se recomiendan los ID explícitos para los activadores. El panel se cierra con Escape, con su botón de cierre nativo opcional o con la superposición. El foco vuelve al control activador; el contenido en línea permanece en el orden del documento. Los cambios de dispositivo no son reglas de visibilidad.
El contenido nuevo del editor de bloques puede usar el bloque Offcanvas, que comparte estos estilos y comportamiento. Los bloques nuevos muestran el icono de cierre de forma predeterminada; los valores predeterminados de los shortcodes existentes no cambian.