Secciones Zigzag — Formato, Reglas y Ejemplos

Las secciones zigzag presentan una secuencia de características paralelas como pares repetidos de imagen y texto, alternando el elemento visual de un lado al otro en pantallas anchas. Usa el patrón para crear puntos de control visuales claros a lo largo de una historia de producto bien pensada, no para estirar una lista corta en una larga página de aterrizaje.

El ejemplo renderizado muestra el ritmo, pero sus regiones grises son interfaz explicativa en esta especificación. Las instancias de producción deben contener elementos visuales reales e informativos.

Por qué este elemento es importante

Una página larga crea un problema de navegación. Los lectores necesitan puntos de referencia que les indiquen cuándo termina una idea y comienza la siguiente. Un zigzag proporciona esos puntos de referencia mediante la repetición: imagen, encabezado, explicación; luego la misma estructura con una alineación diferente en pantalla ancha. La anatomía repetida facilita la comprensión de cada sección, mientras que la alternancia evita que los elementos adyacentes se fusionen en una sola columna.

El beneficio psicológico es más fuerte cuando los elementos son genuinamente paralelos. Un lector ve el primer par, aprende el patrón y puede escanear los encabezados y elementos visuales siguientes antes de elegir dónde detenerse. El elemento visual proporciona reconocimiento; el encabezado nombra la capacidad; el cuerpo explica su consecuencia. La alternancia añade el cambio espacial justo para restablecer la atención sin modificar el modelo de información.

Ese beneficio tiene un límite. Cada par consume un espacio vertical considerable, especialmente en un teléfono donde las columnas se apilan. Si la explicación es solo una frase y el elemento visual no aporta evidencia, el patrón hace que el lector recorra más distancia sin aprender más. La alternancia decorativa también puede parecer una plantilla de ventas en lugar de una secuencia razonada. El elemento justifica su espacio solo cuando cada elemento visual ayuda al lector a comprender una característica, estado, resultado o flujo de trabajo distintivo.

La extraíbilidad por máquina significa que el software puede aislar una unidad de contenido sin perder el contexto que la hace precisa. Un zigzag bien redactado es una colección de elementos explícitos, cada uno con un encabezado, una explicación autocontenida, una descripción visual y un enlace opcional. Los sistemas de recuperación pueden extraer un elemento como una declaración de característica coherente porque su significado no depende de ser “el de la izquierda”. El orden fuente, no la colocación CSS, establece la secuencia.

Aplica las reglas de escritura de elementos antes que las reglas de esta página: redacta primero la explicación completa y aplica el elemento tipificado en un paso estructural separado. Cuando esta página establezca límites más estrictos de cantidad de elementos, requisitos multimedia, mapeo del cuerpo o límites de anidación, estas reglas específicas del elemento tienen prioridad.

Cuándo usarlo

Usa un zigzag cuando todas estas condiciones se cumplan:

1. La página tiene de tres a seis características, capacidades, resultados o vistas de flujo de trabajo no secuenciales paralelas.
2. Cada elemento tiene un elemento visual real que explica o demuestra su tema.
3. Cada elemento necesita más explicación de la que permite una tarjeta, pero menos que un capítulo independiente completo.
4. Los lectores se benefician de escanear la secuencia antes de leer cada detalle.
5. El orden es útil pero no procedimental; un elemento sigue siendo comprensible si se extrae de forma independiente.

Los usos sólidos incluyen un recorrido de producto con una vista de interfaz por capacidad, una página de solución que empareje cada problema operativo con su flujo de trabajo correspondiente, o una guía definitiva que muestre varios modelos paralelos. El elemento visual puede ser una captura de pantalla, diagrama, gráfico o fotografía cuando ese medio transmita información. Usa una captura de pantalla anotada dentro de un elemento cuando una captura de interfaz sin procesar obligaría a los lectores a buscar el control relevante.

Los casos casi válidos son comunes. No uses un zigzag para instrucciones numeradas: cambiar de lado debilita la señal direccional que los pasos necesitan. No lo uses para una comparación, porque alternar productos impide la evaluación criterio por criterio. No lo uses para doce beneficios que cada uno necesita una sola frase; las tarjetas, viñetas o una tabla resumen usan mejor el espacio. No lo uses para un argumento donde cada sección depende de la conclusión anterior; la prosa continua y los encabezados preservan esa lógica más claramente.

La prueba más reveladora es eliminar las imágenes. Si los encabezados restantes forman un conjunto coherente de pares y cada elemento visual faltante deja un vacío de evidencia significativo, el zigzag probablemente sea apropiado. Si el texto se convierte en una lista genérica de beneficios y no se pierde nada importante, las imágenes eran decoración y el elemento es un mal uso.

Dónde colocarlo

Coloca el zigzag después de que la página haya definido el problema compartido y haya nombrado el grupo de capacidades. Los lectores deben saber por qué la secuencia es importante antes de encontrar el primer elemento visual grande. En una página de producto o solución, esto normalmente va después del héroe, la respuesta directa o la visión general breve, y antes de las pruebas, especificaciones detalladas, precios o la llamada a la acción final.

Introduce toda la secuencia con un H2 y un párrafo breve de encuadre. No añadas un H2 separado antes de cada elemento; cada título de elemento es un encabezado hijo dentro de la sección compartida. Mantén todos los elementos contiguos para que el ritmo alternado comunique una sola colección. Si una aclaración larga debe interrumpir la secuencia, finaliza el zigzag y comienza una nueva sección después.

Un zigzag no debe colocarse inmediatamente al lado de otra secuencia visual grande, galería de imágenes, deslizador de productos, línea de tiempo o cuadrícula de tarjetas repetida. Los patrones de visualización consecutivos crean fatiga visual y oscurecen qué colección es la principal. No debe separar una afirmación de su evidencia, una advertencia de la instrucción que califica, ni un precio de sus condiciones de compra. No debe aparecer dentro de una lista ordenada, celda de tabla, panel de acordeón ni dentro de otro zigzag.

Usa un zigzag por página de forma predeterminada. Un segundo solo es aceptable cuando las dos colecciones responden preguntas claramente diferentes, usan encabezados de sección separados y tienen prosa o evidencia entre ellas. Nunca alterne la alineación de secciones de página no relacionadas meramente para imitar el patrón; el límite de la colección es parte del significado del elemento.

Anatomía

1. Encabezado de la colección: Nombra la pregunta o categoría compartida que cubre cada elemento.
2. Introducción de la colección: Explica por qué los elementos pertenecen juntos y qué debería notar el lector.
3. Contenedor del elemento: Mantiene un elemento visual y una región de texto programática y visualmente asociados.
4. Encabezado del elemento: Nombra una característica, resultado o vista específica en lenguaje concreto.
5. Cuerpo del elemento: Explica qué hace el elemento, por qué es importante y cualquier límite necesario para interpretarlo correctamente.
6. Elemento visual informativo: Demuestra el mismo tema que el texto y tiene texto alternativo útil o un pie de foto accesible.
7. Enlace opcional del elemento: Ofrece una inmersión profunda o acción relevante después de la explicación.
8. Alternancia de presentación: Cambia el lado del elemento visual en pantallas anchas sin cambiar el orden DOM ni el significado.

El espaciado, color, radio de esquina, recorte de imagen y punto de interrupción pertenecen al renderizador. Los autores proporcionan orden semántico, texto completo e información multimedia accesible.

Ejemplos de diseño

Los siguientes son los variantes admitidos. Comparten un mismo contrato de contenido; solo cambian la alineación inicial, el tratamiento visual o el comportamiento en el viewport.

Multimedia primero: La variante predeterminada en pantalla ancha comienza con el primer elemento visual a la izquierda. Úsala cuando el primer elemento visual proporcione reconocimiento inmediato y la página circundante no coloque ya una imagen dominante en ese lado.

Texto primero: Comienza con el texto a la izquierda, luego alterna. Úsala cuando la explicación inicial deba establecer significado antes del primer elemento visual o cuando cree mejor equilibrio con la sección anterior.

Multimedia contenida: Coloca capturas de pantalla o diagramas dentro de un marco consistente. Úsala para interfaces de producto, gráficos y diagramas cuyos bordes y etiquetas sean importantes. Todos los elementos usan la misma lógica de marco incluso cuando las imágenes fuente tienen dimensiones diferentes.

Multimedia al borde: Permite que fotografías o ilustraciones no pertenecientes a interfaces llenen sus regiones. El recorte puede cambiar de forma responsiva, pero no debe eliminar el sujeto ni ninguna información descrita por el texto.

Apilado móvil: Elimina la alternancia izquierda-derecha y usa un orden de lectura consistente para cada elemento. Este es un comportamiento responsivo requerido, no una variante editorial opcional.

No existe variante de solo texto, reproducción automática ni carrusel. Eliminar los elementos visuales significativos elimina la razón de usar zigzag; el movimiento y las diapositivas ocultas introducen contratos de interacción diferentes.

Parámetros

El cuerpo padre mapea su primer encabezado a title, su párrafo siguiente a intro y cada elemento anidado a un par repetido. El primer encabezado de un elemento se mapea a item.title; el resto de su cuerpo se mapea a item.content. Las referencias multimedia y el texto alternativo permanecen en el elemento porque describen solo ese elemento. Los autores no pueden establecer izquierda o derecha por elemento: el renderizador deriva la alineación en pantalla ancha de la posición fuente y de start.

Sintaxis y ejemplos de código

Todos los adaptadores deben preservar un título padre, una introducción, elementos ordenados y un orden fuente estable. Los ejemplos abrevian la colección a tres elementos, la cantidad mínima válida.

Directiva Markdown portátil

:::zigzag{start=media mediaFit=contain}
## Convierte las decisiones de contenido en un sistema repetible

Pasa de un inventario completo a producción priorizada y resultados medidos.

::item{media="inventory-view" alt="Inventario de contenido agrupado por estado y propietario."}
### Ve el inventario completo

Reúne cada URL, propietario, estado y señal de rendimiento en una sola vista antes de decidir qué cambiar.
::

::item{media="priority-view" alt="Cola de prioridad ordenada por valor comercial y esfuerzo."}
### Prioriza el trabajo valioso

Ordena las oportunidades por valor comercial y esfuerzo para que el equipo pueda actuar sobre una cola razonada.
::

::item{media="impact-view" alt="Vista de informe con anotaciones de publicación junto a cambios de rendimiento."}
### Mide el impacto publicado

Conecta cada cambio a una anotación y una ventana de informe estable para que el movimiento posterior pueda investigarse.
::
:::

Estos identificadores documentan el contrato portátil; un adaptador de producción resuelve cada uno a un recurso aprobado. Los autores deben confirmar que el recurso resuelto existe antes de publicar.

Shortcode de Hugo

{{< zigzag title="Convierte las decisiones de contenido en un sistema repetible" intro="Pasa de un inventario completo a producción priorizada y resultados medidos." start="media" mediaFit="contain" >}}
  {{< zigzag-item title="Ve el inventario completo" media="inventory-view" alt="Inventario de contenido agrupado por estado y propietario." >}}
  Reúne cada URL, propietario, estado y señal de rendimiento en una sola vista antes de decidir qué cambiar.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Prioriza el trabajo valioso" media="priority-view" alt="Cola de prioridad ordenada por valor comercial y esfuerzo." >}}
  Ordena las oportunidades por valor comercial y esfuerzo para que el equipo pueda actuar sobre una cola razonada.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Mide el impacto publicado" media="impact-view" alt="Vista de informe con anotaciones de publicación junto a cambios de rendimiento." >}}
  Conecta cada cambio a una anotación y una ventana de informe estable para que el movimiento posterior pueda investigarse.
  {{< /zigzag-item >}}
{{< /zigzag >}}

El adaptador de Hugo usa solo parámetros con nombre. Deriva las clases alternadas de la posición del elemento y no debe reescribir el orden fuente para lograr el patrón visual.

Bloque de WordPress

<!-- wp:amicited/zigzag {"title":"Convierte las decisiones de contenido en un sistema repetible","intro":"Pasa de un inventario completo a producción priorizada y resultados medidos.","start":"media","mediaFit":"contain"} -->
  <!-- wp:amicited/zigzag-item {"title":"Ve el inventario completo","media":"inventory-view","alt":"Inventario de contenido agrupado por estado y propietario."} -->
  <p>Reúne cada URL, propietario, estado y señal de rendimiento en una sola vista antes de decidir qué cambiar.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Prioriza el trabajo valioso","media":"priority-view","alt":"Cola de prioridad ordenada por valor comercial y esfuerzo."} -->
  <p>Ordena las oportunidades por valor comercial y esfuerzo para que el equipo pueda actuar sobre una cola razonada.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Mide el impacto publicado","media":"impact-view","alt":"Vista de informe con anotaciones de publicación junto a cambios de rendimiento."} -->
  <p>Conecta cada cambio a una anotación y una ventana de informe estable para que el movimiento posterior pueda investigarse.</p>
  <!-- /wp:amicited/zigzag-item -->
<!-- /wp:amicited/zigzag -->

WordPress debe restringir los bloques internos a elementos zigzag y exponer la reordenación de la lista sin ofrecer controles manuales de izquierda/derecha. La vista previa del editor y el frontend deben usar el mismo orden de elementos.

Ejemplos

Buen ejemplo

Encabezado: Comprende cada etapa de una actualización de contenido

1. Encuentra páginas en declive — Un gráfico de tendencia muestra la misma URL en períodos comparables. El texto explica cómo distinguir un declive sostenido del movimiento semanal ordinario.
2. Diagnostica la causa — Una vista de consulta y página muestra qué temas perdieron visibilidad. El texto separa la desviación de intención, los competidores más fuertes, los datos obsoletos y los fallos técnicos.
3. Registra la intervención — Una vista de anotaciones muestra la fecha de publicación y el cambio exacto. El texto explica por qué una intervención registrada hace creíble la medición posterior.
4. Revisa el resultado — Una vista de informe muestra la ventana de observación acordada. El texto indica qué desencadena cada paso siguiente: éxito, sin cambios o mayor declive.

Esto funciona porque los cuatro elementos describen vistas paralelas dentro de un sistema de actualización, cada elemento visual proporciona evidencia que la prosa no puede reproducir eficientemente, y solo los encabezados ya ofrecen a los lectores un escaneo útil. El orden respalda una historia sin convertir el elemento en instrucciones.

Mal ejemplo

Encabezado: Por qué nuestra plataforma es mejor

1. Fácil — Una fotografía decorativa de una persona sonriente acompaña a “Nuestra plataforma es fácil de usar.”
2. Potente — Una forma abstracta decorativa acompaña a “Obtén resultados potentes más rápido.”
3. Flexible — Una fotografía de stock acompaña a “Las funciones flexibles se adaptan a cada negocio.”
4. Contáctanos — Un formulario grande solicita siete campos.
5. Confiado — Una tira de logotipos aparece sin explicar a quién representan.
6. Más funciones — Ocho viñetas no relacionadas llenan una fila final alta.

Esto falla porque las afirmaciones son genéricas, las imágenes no contienen información y los elementos hacen trabajos diferentes. El formulario interrumpe la colección, mientras que el último elemento esconde una lista dentro de un formato pensado para una explicación enfocada. La página se vuelve larga sin volverse más clara. Reemplaza las tres primeras afirmaciones con prosa respaldada por evidencia o tarjetas de beneficios compactas, coloca el formulario después de la sección explicativa, identifica la evidencia de confianza y asigna a las funciones restantes una lista o tabla adecuada.

Marcado de esquema y accesibilidad

Zigzag es un patrón de presentación, no un tipo de Schema.org. Su texto sigue siendo parte del Article o WebPage contenedor, y los hechos del producto pueden contribuir al marcado válido de Product o SoftwareApplication solo cuando la página y los hechos cumplen independientemente esos requisitos. No emitas ItemList meramente porque el elemento repite ítems, y nunca emitas HowTo cuando los elementos son características paralelas en lugar de pasos requeridos.

Usa una section con un encabezado accesible para la colección y un section o article semántico para cada elemento. Mantén el orden DOM lógico e idéntico en todos los puntos de interrupción. El orden CSS grid puede cambiar dónde aparece la imagen visualmente, pero el orden del teclado, del lector de pantalla, de copiar y pegar y de extracción en búsqueda debe permanecer consistente. Nunca escribas “como se muestra a la izquierda” o “en la imagen a la derecha”, porque esas posiciones se invierten o desaparecen en pantallas más pequeñas.

Cada imagen informativa necesita texto alternativo que indique qué aporta la imagen en contexto. No repitas el párrafo adyacente palabra por palabra. Si un gráfico, interfaz o diagrama complejo no puede describirse de forma concisa, añade un pie de foto visible o una descripción larga cercana. Las imágenes decorativas están desaconsejadas porque se requiere que cada elemento justifique su elemento visual; si un renderizador añade adornos decorativos, estos reciben texto alternativo vacío.

Los encabezados deben seguir la jerarquía de la página en lugar de estar codificados a un tamaño visual. Los enlaces de los elementos necesitan etiquetas descriptivas como “Revisa el flujo de trabajo del inventario”, no un texto “Más información” repetido. No conviertas toda la fila de texto e imagen en un gran enlace: los enlaces anidados y las regiones de activación poco claras crean problemas de teclado y lector de pantalla. Respeta las preferencias de movimiento reducido y nunca requieras animación activada por desplazamiento para revelar el contenido.

Reglas de escritura

Escribe el título de la colección en 3–12 palabras y su introducción en 20–60 palabras. Cada título de elemento usa 3–9 palabras concretas y cada cuerpo usa 40–120 palabras. De tres a seis elementos es el rango admitido. Estos límites existen porque el elemento necesita suficiente sustancia para justificar regiones visuales grandes sin convertir cada par en un ensayo independiente.

Haz que los encabezados de los elementos sean gramaticalmente paralelos. Si el primero comienza con un verbo —“Encuentra páginas en declive”— los demás también deberían hacerlo. Cada cuerpo debe responder tres preguntas en orden natural: qué es, por qué importa aquí y qué debería notar el lector en el elemento visual. Usa sustantivos específicos, etiquetas de interfaz, condiciones y consecuencias. Evita superlativos sin calificar como “mejor”, “potente” o “revolucionario”.

Mantén la profundidad equilibrada. Un elemento de 110 palabras junto a dos elementos de 40 palabras indica que la colección puede estar mezclando niveles de abstracción. Divide el elemento amplio, combina elementos superficiales o traslada el detalle a una página enlazada. Los enlaces son opcionales y están limitados a uno por elemento para que la secuencia siga siendo explicativa en lugar de convertirse en un directorio de navegación.

Nunca pongas estos elementos dentro de un elemento zigzag:

• Un formulario, captura de boletín, tabla de precios, oferta o llamada a la acción principal.
• Una tabla comparativa, acordeón, pestañas, carrusel, galería, reproductor de video u otro zigzag.
• Un procedimiento numerado cuyo orden sea necesario para el éxito.
• Varias viñetas de características no relacionadas añadidas para llenar la altura visual.
• Una afirmación sin respaldo, fragmento de testimonio o logotipo sin su fuente y contexto.
• Una imagen añadida solo porque el diseño tiene un espacio para imagen.

Tipos de publicación que lo usan

El frontmatter postTypes es la fuente de verdad para esta relación. Un zigzag es opcional en cada tipo listado y debe aparecer solo cuando la página tenga una secuencia visual paralela calificable.

Lista de verificación QA

• La secuencia contiene de tres a seis elementos genuinamente paralelos.
• Un H2 y una breve introducción explican por qué los elementos pertenecen juntos.
• Cada elemento tiene un encabezado concreto y gramaticalmente paralelo.
• Cada cuerpo se mantiene dentro de 40–120 palabras y tiene profundidad comparable.
• Cada elemento visual existe, aporta información y coincide con su elemento.
• El texto alternativo o un pie de foto accesible transmite la información útil de cada elemento visual.
• El orden DOM predeterminado es lógico sin necesidad de CSS ni imágenes.
• La alternancia en pantalla ancha se deriva automáticamente; los autores no asignaron lados arbitrarios.
• La versión móvil usa un orden apilado consistente sin desplazamiento horizontal.
• Ningún texto depende de izquierda, derecha u otra posición específica del viewport.
• Ningún elemento contiene formularios, tablas, componentes de visualización anidados ni pasos procedimentales.
• La colección no está adyacente a otro patrón visual repetido grande.
• Los enlaces son descriptivos y están limitados a un enlace opcional por elemento.
• No se infiere ningún tipo de esquema solo por el diseño alternado.
• La página sigue siendo útil cuando la animación está desactivada y las imágenes cargan lentamente.
• Las representaciones en Markdown, Hugo y WordPress preservan los mismos campos y orden de elementos.

Usa secciones zigzag cuando las ideas paralelas merezcan evidencia paralela. La alternancia debe ayudar a los lectores a notar cada elemento coherente; nunca debe ser la razón por la que el elemento existe.