Infobox: 2 Spalten — Format, Regeln und Beispiele

Eine zweispaltige Infobox teilt eine Idee in genau zwei parallele Punkte auf, sodass ein Leser die Beziehung auf einen Blick erfassen kann. Verwenden Sie sie, wenn das Paar nebeneinander nützlicher ist als in einem Absatz vergraben: zwei Verantwortlichkeiten, zwei Phasen, zwei Perspektiven oder zwei komplementäre Teile einer Antwort.

Dieses gerenderte Beispiel ist eine Infobox, ein gemeinsamer Titel und genau zwei Elemente. Beide Elemente beantworten dieselbe Art von Frage in vergleichbarer Tiefe. Das Element behauptet nicht, dass die beiden Bedürfnisse Gegensätze sind; es zeigt, dass ein nützliches Briefing beide berücksichtigen muss.

Warum dieses Element wichtig ist

Dichte Prosa zwingt Leser dazu, Beziehungen selbst zu rekonstruieren. In einem Satz wie „Ein Content-Briefing muss dem Leser dienen, indem es eine Aufgabe löst, und dem Unternehmen dienen, indem es eine qualifizierte Aktion unterstützt“, existieren die beiden Verantwortlichkeiten zwar, aber ihre Grenzen sind schwach. Eine zweispaltige Infobox macht das gemeinsame Thema einmal sichtbar und gibt jeder Verantwortlichkeit eine benannte Region. Leser können beide Überschriften überfliegen, wählen, wo sie beginnen möchten, und Umfang sowie Art der Details vergleichen, ohne einen komplexen Satz erneut lesen zu müssen.

Der psychologische Vorteil liegt im Chunking: dem Gruppieren verwandter Informationen in abgegrenzte Einheiten. Der gemeinsame Titel sagt dem Leser, was konstant bleibt, während die Elementtitel zeigen, was sich ändert. Diese Hierarchie ist besonders nützlich, wenn keiner der beiden Punkte dominieren soll. Gewöhnliche Prosa gibt dem ersten Punkt natürlicherweise mehr Gewicht und kann den zweiten wie einen nachträglichen Einfall wirken lassen; gleichmäßige Spalten signalisieren gleichwertige redaktionelle Bedeutung.

Maschinelle Extrahierbarkeit ist die Fähigkeit von Software, eine Inhaltseinheit zu isolieren, während ihre Bedeutung erhalten bleibt. Eine typisierte Infobox legt ein übergeordnetes Thema und zwei explizite Unterelemente offen. Ein Retrieval-System kann den gemeinsamen Titel, die Elementtitel, den Fließtext und die Quellreihenfolge bewahren, anstatt raten zu müssen, wo ein Satzteil endet und der andere beginnt. Dabei muss jedes Element in sich abgeschlossen sein: „Die geschäftliche Anforderung ist ein Nachweis, der eine qualifizierte Aktion unterstützt“ überlebt die Extraktion, während „Die andere Seite“ dies nicht tut.

Struktur rettet kein schwaches Denken. Wenn die Quelle einen ausgearbeiteten Punkt und einen Satz enthält, der nur aus Symmetrie hinzugefügt wurde, macht das Rendering das Ungleichgewicht lediglich deutlicher. Wenden Sie die Element-Schreibregeln an: Schreiben Sie zuerst die vollständige Argumentation, dann wählen Sie dieses Element nur, wenn die fertige Idee tatsächlich zwei parallele Teile hat. Die elementspezifischen Regeln auf dieser Seite haben Vorrang, wenn sie die genaue Elementzuordnung und -grenzen definieren.

Wann Sie es verwenden sollten

Verwenden Sie eine zweispaltige Infobox, wenn alle vier Bedingungen zutreffen:

1. Es gibt eine klare übergeordnete Idee, die als Titel für die gesamte Box dienen kann.
2. Die übergeordnete Idee teilt sich auf natürliche Weise in genau zwei Elemente.
3. Beide Elemente erfüllen dieselbe Informationsaufgabe, z. B. die Erläuterung einer Verantwortlichkeit, Phase, Zielgruppenperspektive oder Dimension.
4. Jedes Element kann in etwa 30–90 Wörtern ohne verschachtelte Struktur verstanden werden.

Gute Anwendungen umfassen „Vor dem Start / Nach dem Start“, „Lesersignal / Unternehmenssignal“, „Was sich ändert / Was gleich bleibt“ und „Verantwortung des Eigentümers / Verantwortung des Prüfers“. Die Bezeichnungen sollten eine echte Beziehung offenlegen. Wenn der Leser den Satz „Diese gehören zusammen, weil …“ nicht vervollständigen kann, ist die Gruppierung wahrscheinlich dekorativ.

Grenzfälle sind wichtig, weil ein zweispaltiges Layout fast jedes Paar absichtlich wirken lassen kann. Verwenden Sie es nicht für eine einzelne Idee, die an einer willkürlichen Satzgrenze geteilt wird. Verwenden Sie es nicht, um eine Liste von vier Elementen nur zur Einsparung von vertikalem Platz in zwei lange Spalten zu verwandeln; Quellreihenfolge und Überfliegen werden mehrdeutig. Verwenden Sie es nicht für einen detaillierten Produktvergleich mit mehreren Kriterien, da eine Vergleichstabelle jedem Kriterium eine eigene Zeile gibt. Verwenden Sie es nicht für Vor- und Nachteile, wenn die Anzahl der Punkte unterschiedlich ist oder wenn Leser mehrere Abwägungen abwägen müssen. Kombinieren Sie keine Definition mit einem werblichen Call-to-Action: Diese Blöcke erfüllen unterschiedliche Aufgaben und verdienen keine Gleichbehandlung.

Das stärkste Warnsignal ist eine Bezeichnung wie „Sonstiges“, „Mehr“ oder „Zusätzliche Informationen“. Diese Bezeichnungen zeigen, dass die Aufteilung dem verfügbaren Platz folgt und nicht der Bedeutung. Führen Sie den Inhalt zurück in Prosa oder finden Sie die tatsächliche Unterscheidung, bevor Sie das Element verwenden.

Wo Sie es platzieren sollten

Platzieren Sie die Infobox unmittelbar nach dem Absatz, der die gemeinsame Idee einführt. Der Leser braucht einen Satz Kontext, bevor er auf die Aufteilung trifft, sollte aber keine unzusammenhängenden Belege oder einen anderen Unterabschnitt durchqueren müssen, um dorthin zu gelangen. Nach der Box fahren Sie mit Analysen, Beispielen oder Anleitungen fort, die für beide Elemente gelten.

Sie kann direkt unter einer H2-Überschrift stehen, wenn die H2 selbst die übergeordnete Idee liefert und die Infobox einen eigenen spezifischeren Titel hat. Sie kann auch auf eine kurze Definition folgen, wenn die beiden Elemente Dimensionen dieser Definition erklären. Sie darf nicht zwischen einer Behauptung und ihrem Beleg, zwischen einem Schritt und der Bedingung zur Ausführung dieses Schrittes oder innerhalb eines geordneten Listenelements erscheinen. Diese Positionen würden Beziehungen unterbrechen, die zusammenhängend bleiben sollten.

Platzieren Sie sie nicht neben einer anderen zweispaltigen Infobox, Vergleichstabelle, einem Tab-Set oder einem Vor- und Nachteile-Block. Benachbarte parallele Strukturen zwingen den Leser zu entscheiden, welche visuelle Beziehung wichtiger ist, und können auf breiten Bildschirmen vier scheinbare Spalten erzeugen. Fügen Sie erklärende Prosa zwischen verschiedene Strukturen ein oder kombinieren Sie das Material in einer besser geeigneten Tabelle oder einem Abschnitt. Vermeiden Sie die Platzierung unmittelbar vor oder nach einem zweispaltigen Call-to-Action; identische Geometrie kann redaktionelle Erklärungen wie Werbung aussehen lassen.

Verwenden Sie nicht mehr als eine zweispaltige Infobox in einem kurzen Abschnitt. Wiederholung verwandelt einen nützlichen Kontrast in Seitenmobiliar. Wenn ein langer Artikel mehrere echte Paare enthält, trennen Sie diese unter verschiedenen Überschriften und bestätigen Sie, dass jedes Paar eine eigene übergeordnete Idee hat.

Anatomie

Die Anatomie besteht aus einer übergeordneten Region und zwei wiederholten Unterregionen. Der Screenshot sollte semantische Teile beschriften, nicht Abstände oder Farb-Tokens, damit die Spezifikation nützlich bleibt, wenn sich das visuelle System ändert.

1. Äußere Begrenzung: Gruppiert den übergeordneten Titel und beide Elemente als eine redaktionelle Einheit.
2. Gemeinsamer Titel: Benennt die Idee, die beide Elemente erklären. Er ist kein dritter Punkt.
3. Erster Elementtitel und -text: Benennt das erste Mitglied des Paares in vollständiger, extrahierbarer Sprache.
4. Zweiter Elementtitel und -text: Beantwortet dieselbe Art von Frage mit vergleichbarer Tiefe.
5. Layout-Beziehung: Verwendet gleich breite Spalten, wenn der Platz es zulässt, und stapelt Element eins vor Element zwei auf schmalen Bildschirmen.

Rahmen, Hintergrund, Abstand, Radius, Schriftgröße und Breakpoint gehören zum Renderer. Autoren kontrollieren die Inhaltshierarchie und -reihenfolge, nicht visuelle Tokens.

Gestaltungsbeispiele

Es gibt ein semantisches Element mit vier unterstützten Inhalts- und Ansichtsfenster-Varianten. Varianten ändern die Titelbehandlung oder die responsive Darstellung; sie ändern nie die Anforderung von genau zwei Elementen.

Standard-Variante mit Titel: Bevorzugt für die eigenständige Verwendung. Ein gemeinsamer Titel benennt die übergeordnete Idee, und beide Unterelemente haben prägnante Titel.

Kontexttitel-Variante: Die unmittelbar vorhergehende H2-Überschrift kann als gemeinsamer Titel dienen. Dies ist nur zulässig, wenn kein Absatz oder keine Komponente die H2 von der Box trennt und die Infobox einen zugänglichen Namen hat, der von dieser Überschrift abgeleitet ist.

Kompakt-Variante: Verwenden Sie sie für zwei kurze Definitionen oder Verantwortlichkeiten. Jeder Textblock bildet weiterhin einen vollständigen Satz; das Layout wird nicht zu einem Paar von Schlagzeilen.

Schmalansicht-Variante: Elemente stapeln sich vertikal. Die Reihenfolge bleibt ohne Bezug auf „links“, „rechts“, „oben“ oder „daneben“ sinnvoll.

Symbole sind keine Inhaltsvariante. Wenn das Designsystem dekorative Symbole hinzufügt, verwenden diese leeren Alternativtext und ersetzen keine Elementtitel. Wenn jedes Element ein informatives Bild benötigt, verwenden Sie ein bildorientiertes Element anstatt diesen Infobox-Vertrag zu erweitern.

Parameter

Der Parametervertrag verhindert, dass das Element zu einem generischen Raster abdrifft. Werte, die Bedeutung beschreiben, gehören in den redaktionellen Inhalt; das responsive Layout bleibt im Renderer.

Der Titel ist erforderlich, es sei denn, die unmittelbar vorhergehende Dokumentenüberschrift liefert dasselbe übergeordnete Thema und kann den Container programmatisch beschriften. Elementtextkörper erlauben Hervorhebungen, Inline-Code und einen nützlichen Link. Sie erlauben keine verschachtelten Überschriften, Tabellen, Medien, Akkordeons, Formulare, Calls-to-Action oder eine weitere Infobox.

Syntax und Codebeispiele

Alle drei Notationen bewahren denselben übergeordneten Titel, zwei geordnete Elemente, Elementtitel und Elementtextkörper. Die portable Markdown-Direktive ist die kanonische Quelle. Die Hugo- und WordPress-Formen sind Adapterverträge; ihre Renderer müssen äquivalentes semantisches HTML und responsive Reihenfolge erzeugen.

Portable Markdown-Direktive

:::infobox-2-columns
## Ein nützliches Content-Briefing beantwortet zwei Fragen

::item
### Was braucht der Leser?

Geben Sie die Frage, Entscheidung oder Aufgabe an, die die Seite lösen muss, einschließlich des Kontexts, der die Antwort verändert.
::

::item
### Was braucht das Unternehmen?

Geben Sie die qualifizierte Aktion an, die die Seite unterstützen soll, zusammen mit den Nachweisen, die erforderlich sind, um diese Aktion zu verdienen.
::
:::

Die erste übergeordnete Überschrift wird auf title abgebildet. Jedes ::item bildet seine erste Überschrift auf item.title und den verbleibenden Textkörper auf item.content ab. Diese exakte Zweielement-Zuordnung überschreibt die allgemeine Zulässigkeit wiederholbarer Elemente in den Basisregeln.

Hugo-Shortcode

{{< infobox-2-columns title="Ein nützliches Content-Briefing beantwortet zwei Fragen" >}}
  {{< infobox-item title="Was braucht der Leser?" >}}
  Geben Sie die Frage, Entscheidung oder Aufgabe an, die die Seite lösen muss, einschließlich des Kontexts, der die Antwort verändert.
  {{< /infobox-item >}}
  {{< infobox-item title="Was braucht das Unternehmen?" >}}
  Geben Sie die qualifizierte Aktion an, die die Seite unterstützen soll, zusammen mit den Nachweisen, die erforderlich sind, um diese Aktion zu verdienen.
  {{< /infobox-item >}}
{{< /infobox-2-columns >}}

Der Adapter verwendet nur benannte Parameter. Er muss ein drittes Element ablehnen, anstatt es stillschweigend zu umschließen, und er muss die vom Autor festgelegte Elementreihenfolge beibehalten, wenn das Layout stapelt.

WordPress-Block

<!-- wp:amicited/infobox-2-columns {"title":"Ein nützliches Content-Briefing beantwortet zwei Fragen"} -->
  <!-- wp:amicited/infobox-item {"title":"Was braucht der Leser?"} -->
  <p>Geben Sie die Frage, Entscheidung oder Aufgabe an, die die Seite lösen muss, einschließlich des Kontexts, der die Antwort verändert.</p>
  <!-- /wp:amicited/infobox-item -->
  <!-- wp:amicited/infobox-item {"title":"Was braucht das Unternehmen?"} -->
  <p>Geben Sie die qualifizierte Aktion an, die die Seite unterstützen soll, zusammen mit den Nachweisen, die erforderlich sind, um diese Aktion zu verdienen.</p>
  <!-- /wp:amicited/infobox-item -->
<!-- /wp:amicited/infobox-2-columns -->

WordPress sollte zwei feste Elementschlitze anstelle eines uneingeschränkten „Block hinzufügen“-Bereichs anzeigen. Editoren können die beiden Elemente neu anordnen, aber keinen unzusammenhängenden Block zwischen ihnen einfügen oder eine dritte Spalte hinzufügen.

Beispiele

Gutes Beispiel

Dies funktioniert, weil der gemeinsame Titel eine Idee etabliert, die zeitliche Abgrenzung ein echtes Paar schafft und beide Spalten vergleichbare Messarbeit spezifizieren. Jedes Element bleibt sinnvoll, wenn es gestapelt oder unabhängig extrahiert wird.

Schlechtes Beispiel

Verbessern Sie Ihre Inhalte

Gut schreiben: Erstellen Sie nützliche, autoritative, ansprechende Inhalte, die Ihr Publikum lieben wird und die Suchmaschinen belohnen.

Sonstiges: SEO umfasst auch technische Arbeit, Links, Conversion-Design, Analysen, Markenbildung, Distribution, Wartung und viele weitere wichtige Aktivitäten.

Dies scheitert, weil das Paar künstlich ist. „Gut schreiben“ ist eine vage Anweisung, „Sonstiges“ ist eine Sammelkategorie, und das zweite Element umfasst weitaus mehr Umfang als das erste. Die Box suggeriert gleichwertige, parallele Konzepte, wo keine existieren. Ersetzen Sie sie durch Prosa, die das tatsächliche Inhaltsziel definiert, und verwenden Sie dann eine Liste oder separate Abschnitte für die verschiedenen Arbeitsbereiche.

Schema-Markup und Barrierefreiheit

Eine zweispaltige Infobox hat keinen dedizierten Schema.org-Typ und erzeugt keine eigenständigen strukturierten Daten. Ihr Text bleibt Teil des umschließenden Article, TechArticle oder WebPage, wenn die Seite für dieses Markup qualifiziert ist. Markieren Sie die beiden Elemente nicht als ItemList, nur weil es zwei gibt; das Element repräsentiert eine Beziehung, nicht unbedingt eine sortierte oder vollständige Liste. Wenn ein Element unabhängig eine Tatsache enthält, die anderswo in strukturierten Daten verwendet wird, regelt die seitenweite Schema-Richtlinie diese Tatsache.

Semantisches HTML sollte einen beschrifteten Container mit zwei Unterabschnitten ausdrücken. Verwenden Sie ein aside nur, wenn das Paar komplementär zur umgebenden Erzählung ist; verwenden Sie ein section, wenn es Teil des Hauptarguments ist. Geben Sie dem Container einen zugänglichen Namen über seinen sichtbaren Titel und aria-labelledby. Jeder Untertitel muss eine echte Überschrift auf der korrekten Ebene sein, kein fetter Text, der nur optisch gewählt wurde.

Die Quellreihenfolge ist die Barrierefreiheits-Reihenfolge. Tastaturnavigation, Screenreader, Kopieren-und-Einfügen und schmale Bildschirme müssen Element eins vor Element zwei antreffen. CSS kann Spalten erzeugen, darf sie aber nicht visuell umkehren. Beziehen Sie sich niemals auf „die linke Box“ oder „die rechte Box“, da diese Positionen beim Stapeln verschwinden. Farbe, Symbolform und Hintergrund dürfen nicht das einzige Mittel sein, um Elemente zu unterscheiden. Das Design muss Textzoom ohne Abschneiden, horizontales Scrollen oder überlappende Spalten unterstützen.

Schreibregeln

Beginnen Sie damit, den übergeordneten Satz zu schreiben: „Diese Idee hat zwei Teile: X und Y.“ Wenn dieser Satz nicht zutrifft, verwenden Sie das Element nicht. Geben Sie beiden Elementtiteln dieselbe grammatikalische Form – zwei Nomen, zwei Fragen oder zwei Zeitangaben – denn parallele Sprache macht die Beziehung sofort lesbar.

Verwenden Sie genau zwei Elemente. Halten Sie jeden Titel auf 2–7 Wörter und jeden Textkörper nach Möglichkeit auf 30–90 Wörter, mit einem absoluten Maximum von 120 Wörtern. Ein Unterschied von einem Satz ist akzeptabel; ein 35-Wörter-Element neben einem 110-Wörter-Element erfordert eine Überarbeitung oder eine andere Struktur. Jeder Textkörper sollte dieselbe implizite Frage beantworten und eine vergleichbare Nachweistiefe aufweisen. Eine vergleichbare Tiefe bedeutet nicht, eine kurze Antwort mit Fülltext aufzublähen.

Verwenden Sie direkte, neutrale Sprache. Stellen Sie die Unterscheidung in den Titeln dar und erklären Sie ihre Konsequenz in den Textkörpern. Bevorzugen Sie „Vor dem Start / Nach dem Start“ gegenüber „Erstens / Zweitens“, denn aussagekräftige Bezeichnungen überstehen die Extraktion. Vermeiden Sie „Entweder/Oder“, es sei denn, die Wahlmöglichkeiten sind wirklich exklusiv, und vermeiden Sie „Gegenüber“, wenn die Elemente komplementär sind.

Setzen Sie niemals Folgendes in das Element:

• Ein drittes Element, selbst wenn der Renderer es umschließen könnte.
• Eine mehrschrittige Prozedur, eine lange Aufzählungsliste, eine Datentabelle, ein Preistabelle, ein Formular, ein Erfahrungsbericht oder ein Werbebanner.
• Eigenständige H2-Abschnitte, verschachtelte Infoboxen, Tabs, Akkordeons, Videos oder Bildergalerien.
• Erforderliche rechtliche Texte, Sicherheitshinweise, Quellenlisten oder Einschränkungen, die nur für einen Satz außerhalb der Box gelten.
• Zwei nicht zusammenhängende Links, die wie konkurrierende Calls-to-Action aussehen sollen.

Wenn eines der Elemente Zwischenüberschriften oder mehr als zwei Absätze benötigt, wandeln Sie beide Elemente in normale Seitenabschnitte um. Wenn Leser zwischen den Elementen wählen müssen, fügen Sie Entscheidungskriterien in Prosa hinzu oder verwenden Sie ein Vergleichs- oder Entscheidungselement; visuelle Symmetrie allein erklärt keine Wahl.

Beitragstypen, die es verwenden

Das postTypes-Frontmatter-Feld ist die Quelle für diese Verwendungsmenge. Jedes aufgeführte Format hat eine natürliche Zweiteilungs-Beziehung, aber keines sollte das Element standardmäßig enthalten, wenn der Inhalt kein echtes Paar bildet.

QA-Checkliste

• Eine übergeordnete Idee: Die Box hat ein klares gemeinsames Thema, das erklärt, warum beide Elemente zusammengehören.
• Genau zwei Elemente: Quelle und gerenderte Ausgabe enthalten zwei Unterelemente – nie eins, drei oder einen leeren Platz.
• Echte Parallelität: Beide Elemente beantworten dieselbe Art von Frage und verwenden Titel mit paralleler Grammatik.
• Vergleichbare Tiefe: Keines der Elemente ist ein symbolisches Gegengewicht oder eine Sammelposition für Verschiedenes; Details und Nachweise sind vergleichbar.
• Sinnvolle Platzierung: Die Box folgt ihrem einführenden Kontext und trennt keine Behauptung von ihrem Beleg oder einen Schritt von seiner Voraussetzung.
• Unbedenkliche Nachbarn: Sie befindet sich nicht neben einem anderen parallelen Raster, einer Vergleichskomponente oder einem zweispaltigen CTA.
• Extrahierbare Formulierung: Übergeordnete Titel und Elementtitel nennen ihre Themen, und Textkörper sind nicht auf „links“, „rechts“ oder nahe Pronomen angewiesen.
• Responsive Reihenfolge: Schmale Layouts stapeln Element eins vor Element zwei ohne Abschneiden, horizontales Scrollen oder visuelle Neuanordnung.
• Barrierefreie Struktur: Der Container hat eine sichtbare programmatische Beschriftung, Untertitel sind echte Überschriften, und Farbe oder Symbole vermitteln keine Bedeutung allein.
• Inhaltsgrenzen: Jeder Textkörper bleibt innerhalb von zwei Absätzen und enthält keine verschachtelte komplexe Komponente, Prozedur oder Werbekontrolle.
• Notationsgleichheit: Portables Markdown, Hugo und WordPress bewahren denselben Titel, zwei Elemente, Textkörper und Reihenfolge.
• Schema-Zurückhaltung: Es wird kein Listen- oder Vergleichs-Markup hinzugefügt, es sei denn, der Seiteninhalt qualifiziert sich unabhängig dafür.

Ein Prüfer sollte das Element ablehnen, wenn eine der ersten vier Prüfungen fehlschlägt. Diese Fehlschläge deuten auf ein konzeptionelles Problem hin, nicht auf einen Stilfehler, und eine Änderung der Breite oder Dekoration kann sie nicht beheben.

FAQ

Die Frontmatter-FAQ-Einträge beantworten die wiederkehrenden Implementierungsfragen: Die Elementanzahl ist auf zwei festgelegt, Tiefe ist wichtiger als identische Wortanzahlen, detaillierte Vergleiche benötigen eine Tabelle, Mobilgeräte bewahren die Quellreihenfolge, und das Element erzeugt kein Schema-Markup. Diese Antworten in strukturiertem Frontmatter zu halten, ermöglicht es der Academy-Vorlage, die genehmigte FAQ-Behandlung zu rendern, ohne den Inhalt im Textkörper zu duplizieren.