Zickzack-Abschnitte — Format, Regeln und Beispiele

Zickzack-Abschnitte präsentieren eine Abfolge paralleler Funktionen als wiederholte Bild-Text-Paare, deren Visualisierung auf Breitbildschirmen von einer Seite zur anderen wechselt. Verwenden Sie dieses Muster, um klare visuelle Wegmarken durch eine durchdachte Produktgeschichte zu schaffen – nicht, um eine kurze Liste zu einer langen Landingpage aufzublähen.

Das gerenderte Beispiel zeigt den Rhythmus, aber seine grauen Bereiche sind in dieser Spezifikation erklärende UI. Produktionsinstanzen müssen echte, informative Visualisierungen enthalten.

Warum dieses Element wichtig ist

Eine lange Seite stellt ein Navigationsproblem dar. Leser benötigen Orientierungspunkte, die ihnen sagen, wann eine Idee endet und die nächste beginnt. Ein Zickzack liefert diese Orientierungspunkte durch Wiederholung: Bild, Überschrift, Erklärung; dann dieselbe Struktur mit einer anderen Breitbild-Ausrichtung. Wiederholte Anatomie macht jeden Abschnitt leichter verständlich, während der Wechsel verhindert, dass benachbarte Elemente zu einer Spalte verschmelzen.

Der psychologische Vorteil ist am stärksten, wenn die Elemente wirklich parallel sind. Ein Leser sieht das erste Paar, lernt das Muster und kann nachfolgende Überschriften und Visualisierungen überfliegen, bevor er entscheidet, wo er langsamer werden möchte. Die Visualisierung sorgt für Wiedererkennung; die Überschrift benennt die Fähigkeit; der Text erklärt ihre Konsequenz. Der Wechsel fügt gerade genug räumliche Veränderung hinzu, um die Aufmerksamkeit zurückzusetzen, ohne das Informationsmodell zu ändern.

Dieser Vorteil hat eine Grenze. Jedes Paar verbraucht viel vertikalen Platz, insbesondere auf einem Telefon, wo die Spalten gestapelt werden. Wenn die Erklärung nur ein Satz ist und die Visualisierung keine Belege liefert, lässt das Muster den Leser weiter reisen, ohne mehr zu lernen. Dekorativer Wechsel kann sich auch wie eine Verkaufsvorlage anfühlen, anstatt wie eine durchdachte Abfolge. Das Element verdient seinen Platz nur dann, wenn jede Visualisierung dem Leser hilft, eine bestimmte Funktion, einen Zustand, ein Ergebnis oder einen Arbeitsablauf zu verstehen.

Maschinelle Extrahierbarkeit bedeutet, dass Software eine Inhaltseinheit isolieren kann, ohne den Kontext zu verlieren, der sie korrekt macht. Ein gut verfasster Zickzack ist eine Sammlung expliziter Elemente, jedes mit einer Überschrift, einer in sich geschlossenen Erklärung, einer visuellen Beschreibung und einem optionalen Link. Abrufsysteme können ein Element als kohärente Funktionsbeschreibung extrahieren, da seine Bedeutung nicht davon abhängt, “das auf der linken Seite” zu sein. Die Quellreihenfolge, nicht die CSS-Positionierung, legt die Abfolge fest.

Wenden Sie die Element-Schreibregeln vor den Regeln auf dieser Seite an: Verfassen Sie zuerst die vollständige Erklärung und wenden Sie das typisierte Element in einem separaten strukturellen Durchgang an. Wo diese Seite engere Elementanzahlen, Medienanforderungen, Textzuordnung oder Verschachtelungsgrenzen festlegt, haben diese elementspezifischen Regeln Vorrang.

Wann es verwendet werden soll

Verwenden Sie einen Zickzack, wenn alle folgenden Bedingungen zutreffen:

1. Die Seite hat drei bis sechs parallele Funktionen, Fähigkeiten, Ergebnisse oder nicht-sequentielle Workflow-Ansichten.
2. Jedes Element hat eine echte visuelle Darstellung, die sein Thema erklärt oder demonstriert.
3. Jedes Element benötigt mehr Erklärung, als eine Karte zulässt, aber weniger als ein vollständiges unabhängiges Kapitel.
4. Leser profitieren davon, die Abfolge zu überfliegen, bevor sie jedes Detail lesen.
5. Die Reihenfolge ist hilfreich, aber nicht prozessual; ein Element bleibt verständlich, wenn es einzeln extrahiert wird.

Starke Anwendungen umfassen eine Produkttour mit einer Oberflächenansicht pro Funktion, eine Lösungsseite, die jedes operative Problem mit dem entsprechenden Workflow paart, oder einen ultimativen Leitfaden, der mehrere parallele Modelle zeigt. Die Visualisierung kann ein Screenshot, Diagramm, Chart oder Foto sein, wenn dieses Medium Informationen transportiert. Verwenden Sie einen annotierten Screenshot innerhalb eines Elements, wenn eine rohe Oberflächenaufnahme Leser dazu zwingen würde, nach dem relevanten Steuerelement zu suchen.

Knapp daneben ist häufig. Verwenden Sie keinen Zickzack für nummerierte Anleitungen: Der Seitenwechsel schwächt das Richtungssignal, das Schritte benötigen. Verwenden Sie ihn nicht für einen Vergleich, da wechselnde Produkte eine kriterienbasierte Bewertung verhindern. Verwenden Sie ihn nicht für zwölf Vorteile, die jeweils einen Satz benötigen; Karten, Aufzählungspunkte oder eine zusammenfassende Tabelle nutzen den Platz besser. Verwenden Sie ihn nicht für ein Argument, bei dem jeder Abschnitt von der vorherigen Schlussfolgerung abhängt; fortlaufender Text und Überschriften bewahren diese Logik klarer.

Der aufschlussreichste Test ist, die Bilder zu entfernen. Wenn die verbleibenden Überschriften eine kohärente Gruppe von gleichrangigen Elementen bilden und jede fehlende Visualisierung eine bedeutende Beweislücke hinterlässt, ist ein Zickzack wahrscheinlich angemessen. Wenn der Text zu einer generischen Vorteilsliste wird und nichts Wichtiges verloren geht, waren die Bilder Dekoration und das Element wird falsch verwendet.

Wo es platziert werden soll

Platzieren Sie den Zickzack, nachdem die Seite das gemeinsame Problem definiert und die Gruppe von Fähigkeiten benannt hat. Leser sollten wissen, warum die Abfolge wichtig ist, bevor sie auf die erste große Visualisierung stoßen. Auf einer Produkt- oder Lösungsseite ist dies normalerweise nach dem Hero-Bereich, der direkten Antwort oder der kurzen Übersicht und vor Nachweisen, detaillierten Spezifikationen, Preisen oder dem finalen Aufruf zum Handeln.

Leiten Sie die gesamte Sequenz mit einer H2-Überschrift und einem kurzen Einführungsabsatz ein. Fügen Sie keine separate H2-Überschrift vor jedem Element hinzu; jeder Elementtitel ist eine untergeordnete Überschrift innerhalb des gemeinsamen Abschnitts. Halten Sie alle Elemente zusammenhängend, sodass der wechselnde Rhythmus eine Sammlung kommuniziert. Wenn eine lange Qualifikation die Sequenz unterbrechen muss, beenden Sie den Zickzack und beginnen Sie einen neuen Abschnitt danach.

Ein Zickzack darf nicht unmittelbar neben einer anderen großen visuellen Sequenz, Bildergalerie, Produktslider, Zeitleiste oder wiederholten Kartengitter stehen. Aufeinanderfolgende Präsentationsmuster erzeugen visuelle Ermüdung und verschleiern, welche Sammlung primär ist. Er darf eine Behauptung nicht von ihrem Nachweis trennen, eine Warnung nicht von der Anweisung, die sie qualifiziert, oder einen Preis nicht von seinen Kaufbedingungen. Er darf nicht innerhalb einer geordneten Liste, Tabellenzelle, eines Accordion-Panels oder eines anderen Zickzacks erscheinen.

Verwenden Sie standardmäßig einen Zickzack pro Seite. Ein zweiter ist nur akzeptabel, wenn die beiden Sammlungen klar unterschiedliche Fragen beantworten, separate Abschnittsüberschriften verwenden und Text oder Nachweise zwischen ihnen haben. Wechseln Sie niemals die Ausrichtung nicht zusammenhängender Seitenabschnitte, nur um das Muster nachzuahmen; die Sammlungsgrenze ist Teil der Bedeutung des Elements.

Anatomie

1. Sammlungsüberschrift: Benennt die gemeinsame Frage oder Kategorie, die von jedem Element abgedeckt wird.
2. Sammlungseinleitung: Erklärt, warum die Elemente zusammengehören und was der Leser beachten sollte.
3. Elementcontainer: Hält ein Bild und einen Textbereich programmatisch und visuell assoziiert.
4. Elementüberschrift: Benennt eine bestimmte Funktion, ein Ergebnis oder eine Ansicht in konkreter Sprache.
5. Elementtext: Erklärt, was das Element tut, warum es wichtig ist und welche Grenzen zur korrekten Interpretation nötig sind.
6. Informative Visualisierung: Zeigt dasselbe Thema wie der Text und hat einen nützlichen Alternativtext oder eine zugängliche Beschriftung.
7. Optionaler Element-Link: Bietet einen relevanten Deep Dive oder eine Aktion nach der Erklärung.
8. Präsentationswechsel: Ändert die Bildseite auf Breitbildschirmen, ohne die DOM-Reihenfolge oder Bedeutung zu ändern.

Abstände, Farbe, Eckenradius, Bildzuschnitt und Breakpoints gehören zum Renderer. Autoren liefern semantische Reihenfolge, vollständigen Text und zugängliche Medieninformationen.

Gestaltungsbeispiele

Die folgenden sind die unterstützten Varianten. Sie teilen einen Inhaltsvertrag; nur die Startausrichtung, visuelle Behandlung oder das Viewport-Verhalten ändern sich.

Media-first (Bild zuerst): Die Standard-Breitbild-Variante beginnt mit dem ersten Bild auf der linken Seite. Verwenden Sie sie, wenn die erste Visualisierung sofortige Wiedererkennung bietet und die umgebende Seite nicht bereits ein dominantes Bild auf dieser Seite platziert.

Text-first (Text zuerst): Beginnt mit Text auf der linken Seite und wechselt dann. Verwenden Sie es, wenn die einleitende Erklärung Bedeutung vor der ersten Visualisierung herstellen muss oder wenn es eine bessere Balance mit dem vorhergehenden Abschnitt schafft.

Contained-media (Eingefasste Medien): Platziert Screenshots oder Diagramme innerhalb eines konsistenten Rahmens. Verwenden Sie es für Produktoberflächen, Charts und Diagramme, deren Ränder und Beschriftungen wichtig sind. Alle Elemente verwenden dieselbe Rahmenlogik, auch wenn die Quellbilder unterschiedliche Abmessungen haben.

Edge-media (Randmedien): Erlaubt Fotos oder Nicht-Oberflächen-Illustrationen, ihre Bereiche zu füllen. Der Beschnitt kann responsiv wechseln, darf aber weder das Motiv noch Informationen entfernen, die vom Text beschrieben werden.

Mobile-stacked (Mobil gestapelt): Entfernt den Links-Rechts-Wechsel und verwendet eine einheitliche Lesereihenfolge für jedes Element. Dies ist erforderliches responsives Verhalten, keine optionale redaktionelle Variante.

Es gibt keine Text-only-, Autoplay- oder Karussell-Variante. Das Entfernen aussagekräftiger Medien beseitigt den Grund für die Verwendung von Zickzack; Bewegung und versteckte Folien führen andere Interaktionsverträge ein.

Parameter

Der übergeordnete Textkörper ordnet seine erste Überschrift title zu, seinen folgenden Absatz intro und jedes verschachtelte Element einem wiederholten Paar. Die erste Überschrift eines Elements wird item.title zugeordnet; der verbleibende Text wird item.content zugeordnet. Medienreferenzen und Alternativtext verbleiben beim Element, da sie nur dieses Element beschreiben. Autoren können links oder rechts nicht pro Element festlegen: Der Renderer leitet die Breitbild-Ausrichtung aus der Quellposition und start ab.

Syntax und Codebeispiele

Alle Adapter müssen einen übergeordneten Titel, eine Einleitung, geordnete Elemente und eine stabile Quellreihenfolge bewahren. Die Beispiele verkürzen die Sammlung auf drei Elemente, die minimal gültige Anzahl.

Portable Markdown-Direktive

:::zigzag{start=media mediaFit=contain}
## Verwandle Inhaltsentscheidungen in ein wiederholbares System

Bewegen Sie sich von einem vollständigen Inventar zur priorisierten Produktion und zu messbaren Ergebnissen.

::item{media="inventory-view" alt="Inhaltsinventar gruppiert nach Status und Eigentümer."}
### Sieht das gesamte Inventar

Bringen Sie jede URL, jeden Eigentümer, Status und Leistungssignal in eine Ansicht, bevor Sie entscheiden, was geändert werden soll.
::

::item{media="priority-view" alt="Prioritätswarteschlange geordnet nach Geschäftswert und Aufwand."}
### Priorisieren Sie wertvolle Arbeit

Ordnen Sie Chancen nach Geschäftswert und Aufwand, damit das Team auf Basis einer begründeten Warteschlange handeln kann.
::

::item{media="impact-view" alt="Berichtsansicht mit Veröffentlichungsanmerkungen neben Leistungsänderungen."}
### Messen Sie die veröffentlichte Wirkung

Verknüpfen Sie jede Änderung mit einer Anmerkung und einem stabilen Berichtszeitfenster, damit spätere Bewegungen untersucht werden können.
::
:::

Diese Bezeichner dokumentieren den portablen Vertrag; ein Produktionsadapter löst jeden in ein genehmigtes Asset auf. Autoren müssen vor der Veröffentlichung bestätigen, dass das aufgelöste Asset existiert.

Hugo Shortcode

{{< zigzag title="Verwandle Inhaltsentscheidungen in ein wiederholbares System" intro="Bewegen Sie sich von einem vollständigen Inventar zur priorisierten Produktion und zu messbaren Ergebnissen." start="media" mediaFit="contain" >}}
  {{< zigzag-item title="Sieht das gesamte Inventar" media="inventory-view" alt="Inhaltsinventar gruppiert nach Status und Eigentümer." >}}
  Bringen Sie jede URL, jeden Eigentümer, Status und Leistungssignal in eine Ansicht, bevor Sie entscheiden, was geändert werden soll.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Priorisieren Sie wertvolle Arbeit" media="priority-view" alt="Prioritätswarteschlange geordnet nach Geschäftswert und Aufwand." >}}
  Ordnen Sie Chancen nach Geschäftswert und Aufwand, damit das Team auf Basis einer begründeten Warteschlange handeln kann.
  {{< /zigzag-item >}}
  {{< zigzag-item title="Messen Sie die veröffentlichte Wirkung" media="impact-view" alt="Berichtsansicht mit Veröffentlichungsanmerkungen neben Leistungsänderungen." >}}
  Verknüpfen Sie jede Änderung mit einer Anmerkung und einem stabilen Berichtszeitfenster, damit spätere Bewegungen untersucht werden können.
  {{< /zigzag-item >}}
{{< /zigzag >}}

Der Hugo-Adapter verwendet nur benannte Parameter. Er leitet wechselnde Klassen aus der Elementposition ab und darf die Quellreihenfolge nicht umschreiben, um das visuelle Muster zu erreichen.

WordPress-Block

<!-- wp:amicited/zigzag {"title":"Verwandle Inhaltsentscheidungen in ein wiederholbares System","intro":"Bewegen Sie sich von einem vollständigen Inventar zur priorisierten Produktion und zu messbaren Ergebnissen.","start":"media","mediaFit":"contain"} -->
  <!-- wp:amicited/zigzag-item {"title":"Sieht das gesamte Inventar","media":"inventory-view","alt":"Inhaltsinventar gruppiert nach Status und Eigentümer."} -->
  <p>Bringen Sie jede URL, jeden Eigentümer, Status und Leistungssignal in eine Ansicht, bevor Sie entscheiden, was geändert werden soll.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Priorisieren Sie wertvolle Arbeit","media":"priority-view","alt":"Prioritätswarteschlange geordnet nach Geschäftswert und Aufwand."} -->
  <p>Ordnen Sie Chancen nach Geschäftswert und Aufwand, damit das Team auf Basis einer begründeten Warteschlange handeln kann.</p>
  <!-- /wp:amicited/zigzag-item -->
  <!-- wp:amicited/zigzag-item {"title":"Messen Sie die veröffentlichte Wirkung","media":"impact-view","alt":"Berichtsansicht mit Veröffentlichungsanmerkungen neben Leistungsänderungen."} -->
  <p>Verknüpfen Sie jede Änderung mit einer Anmerkung und einem stabilen Berichtszeitfenster, damit spätere Bewegungen untersucht werden können.</p>
  <!-- /wp:amicited/zigzag-item -->
<!-- /wp:amicited/zigzag -->

WordPress sollte innere Blöcke auf Zickzack-Elemente beschränken und eine Neuanordnung der Liste ermöglichen, ohne manuelle Links/Rechts-Steuerungen anzubieten. Die Editor-Vorschau und die Frontend-Ansicht müssen dieselbe Elementreihenfolge verwenden.

Beispiele

Gutes Beispiel

Überschrift: Verstehen Sie jede Phase einer Inhaltsaktualisierung

1. Absteigende Seiten finden — Ein Trenddiagramm zeigt dieselbe URL über vergleichbare Zeiträume. Der Text erklärt, wie man anhaltende Abwärtsbewegung von gewöhnlichen wöchentlichen Schwankungen unterscheidet.
2. Die Ursache diagnostizieren — Eine Abfrage- und Seitenansicht zeigt, welche Themen an Sichtbarkeit verloren haben. Der Text trennt Intent-Drift, stärkere Wettbewerber, veraltete Fakten und technische Fehler.
3. Den Eingriff dokumentieren — Eine Anmerkungsansicht zeigt das Veröffentlichungsdatum und die genaue Änderung. Der Text erklärt, warum ein dokumentierter Eingriff die spätere Messung glaubwürdig macht.
4. Das Ergebnis überprüfen — Eine Berichtsansicht zeigt das vereinbarte Beobachtungsfenster. Der Text gibt an, was Erfolg, keine Veränderung und weiterer Rückgang jeweils als Nächstes auslösen.

Dies funktioniert, weil die vier Elemente parallele Ansichten innerhalb eines Aktualisierungssystems beschreiben, jede Visualisierung Belege liefert, die der Text nicht effizient reproduzieren kann, und die Überschriften allein den Lesern einen nützlichen Überblick bieten. Die Reihenfolge unterstützt eine Geschichte, ohne das Element in eine Anleitung zu verwandeln.

Schlechtes Beispiel

Überschrift: Warum unsere Plattform besser ist

1. Einfach — Ein dekoratives Foto einer lächelnden Person begleitet „Unsere Plattform ist einfach zu bedienen.“
2. Leistungsstark — Eine dekorative abstrakte Form begleitet „Erzielen Sie schneller leistungsstarke Ergebnisse.“
3. Flexibel — Ein Stock-Foto begleitet „Flexible Funktionen passen für jedes Unternehmen.“
4. Kontaktieren Sie uns — Ein großes Formular fragt nach sieben Feldern.
5. Vertrauenswürdig — Ein Logo-Streifen erscheint ohne Erklärung, wen die Logos repräsentieren.
6. Weitere Funktionen — Acht zusammenhanglose Aufzählungspunkte füllen eine hohe letzte Zeile.

Dies scheitert, weil die Behauptungen generisch sind, die Bilder keine Informationen tragen und die Elemente unterschiedliche Aufgaben erfüllen. Das eingebettete Formular unterbricht die Sammlung, während das letzte Element eine Liste innerhalb eines Formats versteckt, das für eine fokussierte Erklärung gedacht ist. Die Seite wird lang, ohne klarer zu werden. Ersetzen Sie die ersten drei Behauptungen durch beleggestützten Text oder kompakte Vorteilskarten, platzieren Sie das Formular nach dem erklärenden Abschnitt, identifizieren Sie den Vertrauensnachweis und geben Sie den verbleibenden Funktionen eine passende Liste oder Tabelle.

Schema-Markup und Barrierefreiheit

Zickzack ist ein Präsentationsmuster, kein Schema.org-Typ. Sein Text bleibt Teil des umschließenden Article oder WebPage, und Produktfakten können nur dann zu gültigem Product- oder SoftwareApplication-Markup beitragen, wenn die Seite und die Fakten diese Anforderungen unabhängig erfüllen. Geben Sie kein ItemList aus, nur weil das Element Elemente wiederholt, und geben Sie niemals HowTo aus, wenn die Elemente parallele Funktionen und keine erforderlichen Schritte sind.

Verwenden Sie einen Abschnitt mit einer zugänglichen Überschrift für die Sammlung und einen semantischen Abschnitt oder Artikel für jedes Element. Halten Sie die DOM-Reihenfolge logisch und über Breakpoints hinweg identisch. Die CSS-Grid-Reihenfolge kann ändern, wo das Bild visuell erscheint, aber die Reihenfolge für Tastatur, Screenreader, Kopieren-Einfügen und Suche muss konsistent bleiben. Schreiben Sie niemals „wie links gezeigt“ oder „im Bild rechts“, da diese Positionen auf kleineren Bildschirmen umkehren oder verschwinden.

Jedes informative Bild benötigt einen Alternativtext, der angibt, was das Bild im Kontext beiträgt. Wiederholen Sie nicht den angrenzenden Absatz Wort für Wort. Wenn ein komplexes Diagramm, eine Oberfläche oder ein Chart nicht prägnant beschrieben werden kann, fügen Sie eine sichtbare Beschriftung oder eine lange Beschreibung in der Nähe hinzu. Dekorative Bilder sind nicht empfohlen, da jedes Element seine Visualisierung rechtfertigen muss; wenn ein Renderer dekorative Verzierungen hinzufügt, erhalten diese einen leeren Alternativtext.

Überschriften müssen der Seitenhierarchie folgen, anstatt auf eine visuelle Größe hartcodiert zu sein. Element-Links benötigen beschreibende Bezeichnungen wie „Überprüfen Sie den Inventar-Workflow“, nicht wiederholten „Mehr erfahren“-Text. Machen Sie nicht die gesamte Text-und-Bild-Zeile zu einem großen Link: Verschachtelte Links und unklare Aktivierungsbereiche verursachen Tastatur- und Screenreader-Probleme. Respektieren Sie die Präferenz für reduzierte Bewegung und benötigen Sie niemals scroll-getriggerte Animation, um den Inhalt zu enthüllen.

Schreibregeln

Schreiben Sie den Sammlungstitel in 3–12 Wörtern und seine Einleitung in 20–60 Wörtern. Jeder Elementtitel verwendet 3–9 konkrete Wörter und jeder Textkörper 40–120 Wörter. Drei bis sechs Elemente ist der unterstützte Bereich. Diese Grenzen bestehen, weil das Element genug Substanz benötigt, um große visuelle Bereiche zu rechtfertigen, ohne jedes Paar in einen eigenständigen Aufsatz zu verwandeln.

Gestalten Sie Elementüberschriften grammatikalisch parallel. Wenn die erste mit einem Verb beginnt – „Absteigende Seiten finden“ – sollten die anderen ebenfalls. Jeder Textkörper sollte drei Fragen in einer natürlichen Reihenfolge beantworten: Was ist dies, warum ist es hier wichtig und was sollte der Leser in der Visualisierung beachten? Verwenden Sie spezifische Substantive, Oberflächenbezeichnungen, Bedingungen und Konsequenzen. Vermeiden Sie uneingeschränkte Superlative wie „beste“, „leistungsstark“ oder „revolutionär“.

Halten Sie die Tiefe ausgewogen. Ein 110-Wörter-Element neben zwei 40-Wörter-Elementen signalisiert, dass die Sammlung möglicherweise Abstraktionsebenen mischt. Teilen Sie das breite Element auf, kombinieren Sie flache Elemente oder verschieben Sie Details auf eine verlinkte Seite. Links sind optional und auf einen pro Element beschränkt, damit die Sequenz erklärend bleibt, anstatt zu einem Navigationsverzeichnis zu werden.

Setzen Sie niemals Folgendes in ein Zickzack-Element:

• Ein Formular, Newsletter-Capture, Preistabelle, Angebot oder primärer Aufruf zum Handeln.
• Eine Vergleichstabelle, ein Accordion, Tabs, Karussell, Galerie, Videoplayer oder ein anderer Zickzack.
• Eine nummerierte Prozedur, deren Reihenfolge für den Erfolg erforderlich ist.
• Mehrere nicht zusammenhängende Funktionsaufzählungspunkte, die hinzugefügt wurden, um die visuelle Höhe zu füllen.
• Eine unbelegte Behauptung, ein Testimonial-Fragment oder ein Logo ohne Quelle und Kontext.
• Ein Bild, das nur hinzugefügt wurde, weil das Layout einen Bildplatz hat.

Beitragstypen, die es verwenden

Die postTypes-Frontmatter ist die Quelle der Wahrheit für diese Beziehung. Ein Zickzack ist in jedem aufgeführten Typ optional und sollte nur erscheinen, wenn die Seite eine qualifizierende parallele, visuelle Sequenz hat.

QA-Checkliste

• Die Sequenz enthält drei bis sechs wirklich parallele Elemente.
• Eine H2-Überschrift und eine kurze Einleitung erklären, warum die Elemente zusammengehören.
• Jedes Element hat eine konkrete, grammatikalisch parallele Überschrift.
• Jeder Textkörper bleibt innerhalb von 40–120 Wörtern und hat eine vergleichbare Tiefe.
• Jede Visualisierung existiert, liefert Informationen und passt zu ihrem Element.
• Alternativtext oder eine zugängliche Beschriftung vermittelt die nützlichen Informationen jeder Visualisierung.
• Die standardmäßige DOM-Reihenfolge ist ohne CSS oder Bilder logisch.
• Der Breitbild-Wechsel wird automatisch abgeleitet; Autoren haben keine willkürlichen Seiten zugewiesen.
• Mobil verwendet eine einheitliche gestapelte Reihenfolge ohne horizontales Scrollen.
• Keine Wortwahl hängt von links, rechts oder einer anderen viewportspezifischen Position ab.
• Kein Element enthält Formulare, Tabellen, verschachtelte Anzeigekomponenten oder prozessuale Schritte.
• Die Sammlung grenzt nicht an ein anderes großes wiederholtes visuelles Muster.
• Links sind beschreibend und auf einen optionalen Link pro Element beschränkt.
• Kein Schema-Typ wird allein aus dem wechselnden Layout abgeleitet.
• Die Seite bleibt nützlich, wenn Animation deaktiviert ist und Bilder langsam laden.
• Markdown-, Hugo- und WordPress-Darstellungen bewahren dieselben Felder und dieselbe Elementreihenfolge.

Verwenden Sie Zickzack-Abschnitte, wenn parallele Ideen parallele Belege verdienen. Der Wechsel sollte den Lesern helfen, jedes kohärente Element wahrzunehmen; er sollte niemals der Grund sein, warum das Element existiert.