Composição e módulos complementares

Use este guia para módulos que complementam os guias de banners, vitrines e editoriais. Escolha a página no seletor superior e confira as áreas em que o editor oferece Adicionar seção. Um módulo existir no tema não significa que esteja disponível em toda página. Veja Organizar páginas.

Hero e Hero dividido

São áreas de destaque com imagem e blocos de conteúdo, diferentes do carrossel de vários slides. Edite a mídia na seção; títulos, textos e botões podem estar nos blocos internos. Confira a árvore antes de procurar um campo na seção errada.

Controle	Hero	Hero dividido
Imagens	Uma imagem principal e opção de outra para celular.	Duas imagens, cada uma com sua opção própria para celular.
Altura	0–100% da altura da tela; Altura automática desabilita o ajuste manual.	0–100% da altura da tela; não oferece o mesmo controle de altura automática.
Largura	Apresentação de largura completa.	Página ou Completo; opção de usar arredondamento global de Superfícies.
Conteúdo	Alinhamento esquerdo/centro/direito, separação 0–50 px, espaçamentos 0–120 px, cor do texto e link.	Mesmos grupos de conteúdo e espaçamento, com composição em duas imagens.
Camada sobre a imagem	Ative Fundo transparente para revelar cor e opacidade 0–100%.	Mesmo controle; é uma camada sobre a foto, não a remoção do fundo da imagem.
Movimento	Nenhum, dissolver, deslizar para cima/baixo; efeito de profundidade ao rolar.	Mesmas opções de animação e profundidade.

Altura da tela não é uma medida fixa em pixels. Uma foto pode ser recortada para preencher o espaço; teste a imagem específica de celular e textos longos. O link da seção e os links dos botões são controles diferentes. Não mantenha textos de exemplo nem use animação para transmitir uma instrução indispensável.

Hero de categoria e cabeçalho de página

Hero de categoria oferece imagem geral, imagem própria para celular, uso da imagem cadastrada em cada categoria, largura e espaçamentos. Com imagem de categoria ativada e disponível, ela tem prioridade sobre a imagem geral no computador. A imagem de celular configurada na seção é compartilhada, não uma imagem móvel diferente cadastrada para cada categoria. Sem imagem válida, o banner pode não aparecer. A seção não permite blocos internos e tem limite de uma instância.

O Cabeçalho de página é diferente do cabeçalho com logo/menu. Ele apresenta o contexto da página, com largura, espaçamentos, fundo e texto. Não oferece blocos e tem limite de uma instância. Nome da categoria e conteúdo das páginas continuam vinculados ao cadastro correspondente.

Editorial de texto e Personalizada

Editorial de texto reúne blocos gerais de conteúdo com alinhamento, fundo, texto, largura, separação 0–50 px e espaçamentos 0–120 px. É adequado para apresentação da marca, títulos, mensagens e chamadas com botões.

Personalizada organiza os blocos gerais permitidos pelo tema. Oferece direção vertical/horizontal, direção diferente no celular, alinhamento, largura, separação, espaçamentos e cores. “Personalizada” não é um editor de HTML/JavaScript livre nem permite qualquer bloco de outra seção. Grupos internos têm seus próprios controles; selecionar o grupo não equivale a selecionar cada filho.

Em ambas, Página usa o limite global de largura e pode desabilitar o recuo horizontal local. Para listas textuais, cartões editoriais e imagem/vídeo com texto, veja Conteúdo visual e editorial.

Separador

Define largura, espaçamentos 0–120 px e fundo. Ative Linha divisória para revelar a cor da linha. Sem linha, mantém a área de espaçamento. Não tem blocos nem cadastra conteúdo.

Barra de navegação

É uma seção auxiliar do cabeçalho. Pode reunir anúncios, redes sociais, contato, idiomas, menus e grupos de ícone/texto. O limite é de quatro blocos diretos, com até três instâncias da seção; menus e grupos de ícone/texto aceitam até dois de cada tipo, e os demais tipos até um. Esses limites se combinam: não é possível usar o máximo de todos os tipos simultaneamente.

Escolha no celular No cabeçalho ou Dentro do menu. Há largura, separação 0–48 px, ícones 12–28 px, espaçamento vertical 0–32 px, horizontal 0–120 px, opção de espaçamento próprio no celular e cores. Redes, contatos, idiomas e menus dependem dos dados habilitados na plataforma e do bloco correspondente. Veja Cabeçalho.

Páginas de sistema e conteúdo administrado

Área	O que conferir no editor	Onde administrar os dados
Página institucional	Seção principal, largura e espaçamento; cabeçalho de página quando presente.	Conteúdo em Páginas no administrador.
Blog e artigo	Seção principal e módulos de apoio; lista de posts difere de cartões editoriais manuais.	Artigos no Blog.
Login, cadastro e recuperação de senha	Apresentação da seção principal; não substitua o formulário obrigatório por blocos decorativos.	Contas e autenticação da plataforma.
Conta, endereços e pedidos	Área principal e espaçamentos; conteúdo varia com a sessão do cliente.	Dados e pedidos do cliente na plataforma.
Carrinho e página não encontrada	Área principal, largura e espaçamentos; teste vazia/com conteúdo ou uma URL inexistente.	Carrinho da sessão; rotas da loja.
Contato e página com senha	Controles específicos explicados nos guias próprios.	Dados de contato e acesso configurados na plataforma.

As seções principais dessas páginas têm responsabilidades específicas e restrições de estrutura. Não são presets intercambiáveis com módulos de home. O editor não configura checkout, meios de pagamento, regras de envio ou permissões de contas através de um bloco visual.

Como investigar um controle ausente

Confira página, área, seção e bloco selecionados. Depois, veja se uma opção depende de um interruptor, se atingiu o limite de blocos ou se o módulo usa dados do catálogo. Um campo oculto não é prova de erro. Não remova uma seção para tentar recuperar seus dados: readicionar cria uma nova composição.

A referência para parceiros lista os 14 painéis globais, 55 seções e 101 tipos de bloco desta base, com opções, faixas e condições declaradas. É uma referência de configuração; a conferência no navegador deve considerar a versão instalada e os dados reais da loja.