Seções Zigzag — Formato, Regras e Exemplos

As seções zigzag apresentam uma sequência de recursos paralelos como pares repetidos de imagem e texto, alternando o visual de um lado para o outro em telas largas. Use o padrão para criar pontos de verificação visuais claros ao longo de uma história de produto bem pensada, não para esticar uma lista curta em uma longa página de destino.

O exemplo renderizado mostra o ritmo, mas suas regiões cinzas são UI explicativa nesta especificação. Instâncias de produção devem conter visuais reais e informativos.

Por que este elemento é importante

Uma página longa cria um problema de navegação. Leitores precisam de marcos que indiquem quando uma ideia termina e a próxima começa. Um zigzag fornece esses marcos por meio de repetição: imagem, título, explicação; depois a mesma estrutura com um alinhamento diferente em tela larga. A anatomia repetida torna cada seção mais fácil de entender, enquanto a alternância impede que itens adjacentes se fundam em uma única coluna.

O benefício psicológico é mais forte quando os itens são genuinamente paralelos. O leitor vê o primeiro par, aprende o padrão e pode escanear os títulos e visuais subsequentes antes de escolher onde se aprofundar. O visual proporciona reconhecimento; o título nomeia a capacidade; o corpo explica sua consequência. A alternância adiciona mudança espacial suficiente para reiniciar a atenção sem alterar o modelo de informação.

Esse benefício tem um limite. Cada par consome espaço vertical substancial, especialmente no celular, onde as colunas empilham. Se a explicação tem apenas uma frase e o visual não acrescenta evidência, o padrão faz o leitor percorrer mais sem aprender mais. A alternância decorativa também pode parecer um modelo de vendas em vez de uma sequência fundamentada. O elemento justifica seu espaço somente quando cada visual ajuda o leitor a entender um recurso, estado, resultado ou fluxo de trabalho distinto.

Extraibilidade por máquina significa que o software pode isolar uma unidade de conteúdo sem perder o contexto que a torna precisa. Um zigzag bem escrito é uma coleção de itens explícitos, cada um com título, explicação autossuficiente, descrição visual e link opcional. Sistemas de recuperação podem extrair um item como uma declaração de recurso coerente porque seu significado não depende de ser “o da esquerda”. A ordem de origem, não o posicionamento CSS, estabelece a sequência.

Aplique as regras de escrita de elementos antes das regras desta página: redija a explicação completa primeiro e aplique o elemento tipificado em uma passagem estrutural separada. Onde esta página define limites mais restritos de contagem de itens, requisitos de mídia, mapeamento de corpo ou limites de aninhamento, estas regras específicas do elemento têm precedência.

Quando usar

Use um zigzag quando todas estas condições forem verdadeiras:

1. A página tem de três a seis recursos, capacidades, resultados ou visões de fluxo de trabalho não sequenciais paralelos.
2. Cada item tem um visual real que explica ou demonstra seu assunto.
3. Cada item precisa de mais explicação do que um card permite, mas menos do que um capítulo independente completo.
4. Os leitores se beneficiam de escanear a sequência antes de ler cada detalhe.
5. A ordem é útil, mas não processual; um item permanece compreensível se extraído isoladamente.

Usos adequados incluem um tour de produto com uma visualização de interface por capacidade, uma página de solução emparelhando cada problema operacional com seu fluxo de trabalho correspondente, ou um guia definitivo mostrando vários modelos paralelos. O visual pode ser uma captura de tela, diagrama, gráfico ou fotografia quando esse meio carrega informação. Use uma captura de tela anotada dentro de um item quando uma captura de interface bruta forçaria os leitores a procurar o controle relevante.

Quase acertos são comuns. Não use zigzag para instruções numeradas: mudar de lado enfraquece o sinal direcional que os passos precisam. Não use para uma comparação, porque alternar produtos impede a avaliação critério por critério. Não use para doze benefícios que precisam cada um de uma frase; cards, marcadores ou uma tabela resumo usam melhor o espaço. Não use para um argumento onde cada seção depende da conclusão anterior; prosa contínua e títulos preservam essa lógica mais claramente.

O teste mais revelador é remover as imagens. Se os títulos restantes formam um conjunto coerente de pares e cada visual ausente deixa uma lacuna de evidência significativa, o zigzag é provavelmente apropriado. Se o texto se torna uma lista genérica de benefícios e nada importante é perdido, as imagens eram decoração e o elemento é um mau uso.

Onde posicionar

Posicione o zigzag depois que a página tiver definido o problema compartilhado e nomeado o grupo de capacidades. Os leitores devem saber por que a sequência é importante antes de encontrar o primeiro grande visual. Em uma página de produto ou solução, isso ocorre normalmente após o herói, resposta direta ou visão geral curta, e antes de provas, especificações detalhadas, preços ou a chamada para ação final.

Introduza toda a sequência com um H2 e um breve parágrafo de enquadramento. Não adicione um H2 separado antes de cada item; cada título de item é um cabeçalho filho dentro da seção compartilhada. Mantenha todos os itens contíguos para que o ritmo alternado comunique uma única coleção. Se uma qualificação longa precisar interromper a sequência, finalize o zigzag e inicie uma nova seção depois dele.

Um zigzag não deve ficar imediatamente ao lado de outra sequência visual grande, galeria de imagens, slider de produtos, linha do tempo ou grade de cards repetida. Padrões de exibição consecutivos criam fadiga visual e obscurecem qual coleção é primária. Ele não deve separar uma afirmação de sua evidência, um aviso da instrução que qualifica, ou um preço de suas condições de compra. Não deve aparecer dentro de uma lista ordenada, célula de tabela, painel de accordion ou outro zigzag.

Use um zigzag por página por padrão. Um segundo é aceitável apenas quando as duas coleções respondem a perguntas claramente diferentes, usam títulos de seção separados e têm prosa ou evidência entre elas. Nunca alterne o alinhamento de seções de página não relacionadas meramente para imitar o padrão; o limite da coleção faz parte do significado do elemento.

Anatomia

1. Título da coleção: Nomeia a pergunta ou categoria compartilhada coberta por cada item.
2. Introdução da coleção: Explica por que os itens pertencem juntos e o que o leitor deve notar.
3. Contêiner do item: Mantém um visual e uma região de texto associados programática e visualmente.
4. Título do item: Nomeia um recurso, resultado ou visão específica em linguagem concreta.
5. Corpo do item: Explica o que o item faz, por que é importante e qualquer limite necessário para interpretá-lo corretamente.
6. Visual informativo: Demonstra o mesmo assunto do texto e possui texto alternativo útil ou uma legenda acessível.
7. Link opcional do item: Oferece um aprofundamento ou ação relevante após a explicação.
8. Alternância de apresentação: Muda o lado do visual em telas largas sem alterar a ordem DOM ou o significado.

Espaçamento, cor, raio de canto, corte de imagem e ponto de quebra pertencem ao renderizador. Autores fornecem ordem semântica, texto completo e informações de mídia acessíveis.

Exemplos de design

A seguir estão as variantes suportadas. Elas compartilham um contrato de conteúdo; apenas o alinhamento inicial, tratamento visual ou comportamento no viewport mudam.

Mídia primeiro: A variante padrão em tela larga começa com o primeiro visual à esquerda. Use quando o primeiro visual proporciona reconhecimento imediato e a página ao redor já não coloca uma imagem dominante nesse lado.

Texto primeiro: Começa com o texto à esquerda, depois alterna. Use quando a explicação inicial precisa estabelecer significado antes do primeiro visual ou quando cria melhor equilíbrio com a seção anterior.

Mídia contida: Coloca capturas de tela ou diagramas dentro de uma moldura consistente. Use para interfaces de produto, gráficos e diagramas cujas bordas e rótulos são importantes. Todos os itens usam a mesma lógica de moldura mesmo quando as imagens de origem têm dimensões diferentes.

Mídia na borda: Permite que fotografias ou ilustrações não relacionadas à interface preencham suas regiões. O corte pode mudar responsivamente, mas não deve remover o assunto ou qualquer informação descrita pelo texto.

Empilhado no celular: Remove a alternância esquerda-direita e usa uma ordem de leitura consistente para cada item. Este é um comportamento responsivo obrigatório, não uma variante editorial opcional.

Não há variante somente texto, reprodução automática ou carrossel. Remover mídia significativa remove a razão de usar zigzag; movimento e slides ocultos introduzem contratos de interação diferentes.

Parâmetros

O corpo pai mapeia seu primeiro título para title, seu parágrafo seguinte para intro e cada item aninhado para um par repetido. O primeiro título de um item mapeia para item.title; seu corpo restante mapeia para item.content. Referências de mídia e texto alternativo permanecem no item porque descrevem apenas aquele item. Autores não podem definir esquerda ou direita por item: o renderizador deriva o alinhamento em tela larga da posição de origem e de start.

Sintaxe e exemplos de código

Todos os adaptadores devem preservar um título pai, uma introdução, itens ordenados e uma ordem de origem estável. Os exemplos abreviaram a coleção para três itens, a contagem mínima válida.

Diretiva Markdown portátil

:::zigzag{start=media mediaFit=contain}
## Transforme decisões de conteúdo em um sistema repetível

Passe de um inventário completo para produção priorizada e resultados mensurados.

::item{media="inventory-view" alt="Inventário de conteúdo agrupado por status e proprietário."}
### Veja o inventário completo

Reúna cada URL, proprietário, status e sinal de desempenho em uma única visualização antes de decidir o que alterar.
::

::item{media="priority-view" alt="Fila de prioridades ordenada por valor de negócio e esforço."}
### Priorize trabalho valioso

Ordene oportunidades por valor de negócio e esforço para que a equipe possa agir com base em uma fila estruturada.
::

::item{media="impact-view" alt="Visão de relatório com anotações de publicação ao lado de mudanças de desempenho."}
### Meça o impacto publicado

Conecte cada mudança a uma anotação e a uma janela de relatórios estável para que movimentos posteriores possam ser investigados.
::
:::

Estes identificadores documentam o contrato portátil; um adaptador de produção resolve cada um para um ativo aprovado. Autores devem confirmar que o ativo resolvido existe antes de publicar.

Shortcode Hugo

{{< zigzag title="Transforme decisões de conteúdo em um sistema repetível" intro="Passe de um inventário completo para produção priorizada e resultados mensurados." start="media" mediaFit="contain" >}}
  {{< zigzag-item title="Veja o inventário completo" media="inventory-view" alt="Inventário de conteúdo agrupado por status e proprietário." >}}
  Reúna cada URL, proprietário, status e sinal de desempenho em uma única visualização antes de decidir o que alterar.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Priorize trabalho valioso" media="priority-view" alt="Fila de prioridades ordenada por valor de negócio e esforço." >}}
  Ordene oportunidades por valor de negócio e esforço para que a equipe possa agir com base em uma fila estruturada.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Meça o impacto publicado" media="impact-view" alt="Visão de relatório com anotações de publicação ao lado de mudanças de desempenho." >}}
  Conecte cada mudança a uma anotação e a uma janela de relatórios estável para que movimentos posteriores possam ser investigados.
  {{< /zigzag-item >}}
{{< /zigzag >}}

O adaptador Hugo usa apenas parâmetros nomeados. Ele deriva classes de alternância da posição do item e não deve reescrever a ordem de origem para alcançar o padrão visual.

Bloco WordPress

<!-- wp:amicited/zigzag {"title":"Transforme decisões de conteúdo em um sistema repetível","intro":"Passe de um inventário completo para produção priorizada e resultados mensurados.","start":"media","mediaFit":"contain"} -->
  <!-- wp:amicited/zigzag-item {"title":"Veja o inventário completo","media":"inventory-view","alt":"Inventário de conteúdo agrupado por status e proprietário."} -->
  <p>Reúna cada URL, proprietário, status e sinal de desempenho em uma única visualização antes de decidir o que alterar.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Priorize trabalho valioso","media":"priority-view","alt":"Fila de prioridades ordenada por valor de negócio e esforço."} -->
  <p>Ordene oportunidades por valor de negócio e esforço para que a equipe possa agir com base em uma fila estruturada.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Meça o impacto publicado","media":"impact-view","alt":"Visão de relatório com anotações de publicação ao lado de mudanças de desempenho."} -->
  <p>Conecte cada mudança a uma anotação e a uma janela de relatórios estável para que movimentos posteriores possam ser investigados.</p>
  <!-- /wp:amicited/zigzag-item -->
<!-- /wp:amicited/zigzag -->

WordPress deve restringir blocos internos a itens zigzag e expor a reordenação da lista sem oferecer controles manuais de esquerda/direita. A prévia do editor e o front-end devem usar a mesma ordem de itens.

Exemplos

Bom exemplo

Título: Entenda cada etapa de uma renovação de conteúdo

1. Encontre páginas em declínio — Um gráfico de tendência mostra a mesma URL em períodos comparáveis. O texto explica como distinguir declínio sustentado de movimento semanal comum.
2. Diagnostique a causa — Uma visão de consulta e página mostra quais tópicos perderam visibilidade. O texto separa desvio de intenção, concorrentes mais fortes, fatos desatualizados e falhas técnicas.
3. Registre a intervenção — Uma visão de anotação mostra a data de publicação e a mudança exata. O texto explica por que uma intervenção registrada torna a medição posterior confiável.
4. Revise o resultado — Uma visão de relatório mostra a janela de observação acordada. O texto declara o que sucesso, nenhuma mudança e novo declínio desencadeiam em seguida.

Isso funciona porque os quatro itens descrevem visões paralelas dentro de um sistema de renovação, cada visual fornece evidência que a prosa não pode reproduzir eficientemente, e os títulos sozinhos oferecem aos leitores uma varredura útil. A ordem apoia uma história sem transformar o elemento em instruções.

Mau exemplo

Título: Por que nossa plataforma é melhor

1. Fácil — Uma fotografia decorativa de uma pessoa sorrindo acompanha “Nossa plataforma é fácil de usar.”
2. Poderosa — Uma forma abstrata decorativa acompanha “Obtenha resultados poderosos mais rápido.”
3. Flexível — Uma fotografia de banco de imagens acompanha “Recursos flexíveis se adaptam a todo negócio.”
4. Fale conosco — Um formulário grande solicita sete campos.
5. Confiável — Uma faixa de logotipos aparece sem explicar quem os logotipos representam.
6. Mais recursos — Oito marcadores não relacionados preenchem uma longa linha final.

Isso falha porque as afirmações são genéricas, as imagens não carregam informação e os itens fazem trabalhos diferentes. O formulário incorporado interrompe a coleção, enquanto o último item esconde uma lista dentro de um formato destinado a uma explicação focada. A página se torna longa sem ficar mais clara. Substitua as três primeiras afirmações por prosa baseada em evidências ou cards de benefício compactos, coloque o formulário após a seção explicativa, identifique a evidência de confiança e dê aos recursos restantes uma lista ou tabela apropriada.

Marcação Schema e acessibilidade

Zigzag é um padrão de apresentação, não um tipo Schema.org. Seu texto permanece parte do Article ou WebPage circundante, e fatos do produto podem contribuir para marcação válida de Product ou SoftwareApplication apenas quando a página e os fatos atendem independentemente a esses requisitos. Não emita ItemList meramente porque o elemento repete itens, e nunca emita HowTo quando os itens são recursos paralelos em vez de etapas obrigatórias.

Use uma section com um título acessível para a coleção e uma section ou article semântico para cada item. Mantenha a ordem DOM lógica e idêntica em todos os pontos de quebra. A ordenação CSS grid pode mudar onde a imagem aparece visualmente, mas a ordem do teclado, leitor de tela, copiar-colar e extração de busca deve permanecer consistente. Nunca escreva “como mostrado à esquerda” ou “na imagem à direita”, porque essas posições invertem ou desaparecem em telas menores.

Toda imagem informativa precisa de texto alternativo que indique o que a imagem contribui no contexto. Não repita o parágrafo adjacente palavra por palavra. Se um gráfico, interface ou diagrama complexo não puder ser descrito de forma concisa, adicione uma legenda visível ou descrição longa próxima. Imagens decorativas são desencorajadas porque cada item é obrigado a justificar seu visual; se um renderizador adicionar enfeites decorativos, eles recebem texto alternativo vazio.

Os títulos devem seguir a hierarquia da página em vez de serem codificados em um tamanho visual. Links de itens precisam de rótulos descritivos como “Revise o fluxo de trabalho do inventário”, não texto repetido “Saiba mais”. Não torne a linha inteira de texto e imagem um único link grande: links aninhados e regiões de ativação pouco claras criam problemas de teclado e leitor de tela. Respeite preferências de movimento reduzido e nunca exija animação acionada por rolagem para revelar o conteúdo.

Regras de escrita

Escreva o título da coleção em 3–12 palavras e sua introdução em 20–60 palavras. Cada título de item usa 3–9 palavras concretas, e cada corpo usa 40–120 palavras. Três a seis itens é o intervalo suportado. Esses limites existem porque o elemento precisa de substância suficiente para justificar grandes regiões visuais sem transformar cada par em um ensaio independente.

Faça os títulos dos itens gramaticalmente paralelos. Se o primeiro começa com um verbo — “Encontre páginas em declínio” — os outros também devem. Cada corpo deve responder a três perguntas em ordem natural: o que é isso, por que é importante aqui e o que o leitor deve notar no visual? Use substantivos específicos, rótulos de interface, condições e consequências. Evite superlativos não qualificados como “melhor”, “poderoso” ou “revolucionário”.

Mantenha a profundidade equilibrada. Um item de 110 palavras ao lado de dois itens de 40 palavras sinaliza que a coleção pode estar misturando níveis de abstração. Divida o item amplo, combine itens superficiais ou mova detalhes para uma página vinculada. Links são opcionais e limitados a um por item para que a sequência permaneça explicativa em vez de se tornar um diretório de navegação.

Nunca coloque estes dentro de um item zigzag:

• Um formulário, captura de newsletter, tabela de preços, oferta ou chamada para ação principal.
• Uma tabela de comparação, accordion, abas, carrossel, galeria, player de vídeo ou outro zigzag.
• Um procedimento numerado cuja ordem é necessária para o sucesso.
• Vários marcadores de recursos não relacionados adicionados para preencher a altura visual.
• Uma afirmação sem suporte, fragmento de depoimento ou logotipo sem sua fonte e contexto.
• Uma imagem adicionada apenas porque o layout tem um espaço para imagem.

Tipos de post que o utilizam

O frontmatter postTypes é a fonte da verdade para este relacionamento. Um zigzag é opcional em cada tipo listado e deve aparecer apenas quando a página tem uma sequência visual paralela qualificada.

Checklist de QA

• A sequência contém de três a seis itens genuinamente paralelos.
• Um H2 e uma breve introdução explicam por que os itens pertencem juntos.
• Cada item tem um título concreto e gramaticalmente paralelo.
• Cada corpo permanece entre 40–120 palavras e tem profundidade comparável.
• Cada visual existe, contribui com informação e corresponde ao seu item.
• Texto alternativo ou uma legenda acessível transmite a informação útil de cada visual.
• A ordem DOM padrão é lógica sem qualquer CSS ou imagens.
• A alternância em tela larga é derivada automaticamente; autores não atribuíram lados arbitrários.
• O celular usa uma ordem empilhada consistente sem rolagem horizontal.
• Nenhum texto depende de esquerda, direita ou outra posição específica do viewport.
• Nenhum item contém formulários, tabelas, componentes de exibição aninhados ou etapas processuais.
• A coleção não está adjacente a outro padrão visual repetido grande.
• Links são descritivos e limitados a um link opcional por item.
• Nenhum tipo de schema é inferido apenas do layout alternado.
• A página permanece útil quando a animação está desabilitada e as imagens carregam lentamente.
• As representações em Markdown, Hugo e WordPress preservam os mesmos campos e ordem de itens.

Use seções zigzag quando ideias paralelas merecem evidência paralela. A alternância deve ajudar os leitores a notar cada item coerente; nunca deve ser a razão pela qual o item existe.