Introducción

El componente Layout proporciona una estructura de página semántica compuesta por encabezados personalizados, barras de navegación laterales (siders), regiones de contenido principal y pies de página. Admite dimensiones personalizadas de la barra lateral, visibilidad basada en puntos de quiebre, bloqueo de desplazamiento fijo (sticky) y contenedores que llenan el viewport.

Dentro del CMS Page Builder, los autores de contenido y los desarrolladores pueden configurar paneles estructurales semánticos colocando tarjetas, encabezados, stacks y botones en matrices de ranuras dedicadas.

Uso

Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran plantillas de página semánticas.

1. Carcasa de página estándar con encabezado, contenido y pie de página

Un diseño de documento o artículo estándar con encabezados semánticos superiores y un panel de pie de página inferior.

{
  "type": "layout",
  "header": [
    { "type": "heading", "text": "Site Brand Header", "as": "h4", "size": "sm" }
  ],
  "content": [
    { "type": "text", "content": "Main Article and Interactive Content" }
  ],
  "footer": [
    { "type": "text", "content": "© 2026 Acme Corp. All rights reserved.", "size": "xs" }
  ]
}

2. Carcasa de panel con navegación lateral (Sider)

Añade un cajón o riel de navegación a la izquierda de la región de contenido principal. Los siders pueden tener anchos personalizados sm, md o lg y configurarse para colapsar automáticamente en viewports móviles pequeños.

{
  "type": "layout",
  "siderWidth": "sm",
  "siderHideBelow": "md",
  "header": [
    { "type": "heading", "text": "Dashboard System", "as": "h4", "size": "sm" }
  ],
  "sider": [
    {
      "type": "stack",
      "direction": "vertical",
      "gap": "2",
      "children": [
        { "type": "text", "content": "Analytics Overview", "size": "sm" },
        { "type": "text", "content": "Cloud Infrastructure", "size": "sm" }
      ]
    }
  ],
  "content": [
    { "type": "text", "content": "Cloud systems are operational. Latency is within normal bounds." }
  ]
}

3. Composición de layout anidado

Los layouts se pueden anidar limpiamente dentro de otros layouts. Esto es útil cuando desea un encabezado y pie de página de sitio de ancho completo, pero quiere que solo el contenido del cuerpo central incluya navegación lateral.

{
  "type": "layout",
  "header": [
    { "type": "heading", "text": "Global Full-Width Header", "as": "h3" }
  ],
  "content": [
    {
      "type": "layout",
      "siderWidth": "md",
      "sider": [
        { "type": "text", "content": "Nested Sidebar Rail" }
      ],
      "content": [
        { "type": "text", "content": "Nested Content Body" }
      ]
    }
  ],
  "footer": [
    { "type": "text", "content": "Global Full-Width Footer", "size": "xs" }
  ]
}

Propiedades

Notas para desarrolladores y accesibilidad

• Reglas de anidamiento y límite de profundidad: Sveltia CMS impone un límite visual de anidamiento de aproximadamente cuatro niveles en la interfaz del editor. Este límite de profundidad restringe lo que se puede construir mediante la UI, pero no limita al compilador de layouts: las plantillas JSON creadas manualmente pueden anidar layouts tan profundamente como sea necesario.
• Asignación de elementos semánticos: Este componente se asigna directamente a elementos HTML5 válidos y semánticos: <header>, <aside>, <main> y <footer>.
• Compatibilidad con omitir navegación: Al usar encabezados y pies de página personalizados, asegúrese de que los encabezados se secuencian lógicamente (p. ej., comenzando con un h1 en la página) para mantener puntuaciones de accesibilidad altas.