Introdução

O componente Layout fornece uma estrutura de página semântica composta por cabeçalhos personalizados, barras de navegação laterais (siders), regiões de conteúdo principal e rodapés. Ele suporta dimensionamento personalizado da barra lateral, visibilidade baseada em pontos de quebra, bloqueio de rolagem fixa (sticky) e contêineres que preenchem o viewport.

No CMS Page Builder, autores de conteúdo e desenvolvedores podem configurar painéis estruturais semânticos colocando cartões, cabeçalhos, stacks e botões em matrizes de slots dedicadas.

Uso

Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam modelos de página semânticos.

1. Casca de página padrão com cabeçalho, conteúdo e rodapé

Um layout de documento ou artigo padrão com cabeçalhos semânticos superiores e um painel de rodapé 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. Casca de painel com navegação lateral (Sider)

Adiciona uma gaveta ou trilho de navegação à esquerda da região de conteúdo principal. Os siders podem ter larguras personalizadas sm, md ou lg e ser configurados para recolher automaticamente em viewports móveis pequenos.

{
  "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. Composição de layout aninhado

Os layouts podem ser aninhados limpamente dentro de outros layouts. Isso é útil quando você deseja um cabeçalho e rodapé de site em largura total, mas quer que apenas o conteúdo do corpo central inclua navegação 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" }
  ]
}

Propriedades

Notas para desenvolvedores e acessibilidade

• Regras de aninhamento e limite de profundidade: O Sveltia CMS impõe um limite visual de aninhamento de aproximadamente quatro níveis na interface do editor. Esse limite de profundidade restringe o que pode ser construído pela UI, mas não limita o compilador de layouts — os modelos JSON criados manualmente podem aninhar layouts tão profundamente quanto necessário.
• Mapeamento de elementos semânticos: Este componente mapeia diretamente para elementos HTML5 válidos e semânticos: <header>, <aside>, <main> e <footer>.
• Compatibilidade de navegação por salto: Ao usar cabeçalhos e rodapés personalizados, garanta que os títulos sejam sequenciados logicamente (p. ex., começando com um h1 na página) para manter pontuações de acessibilidade altas.