Mehrspalten, Tabs, Akkordion

In TYPO3 gibt es verschiedene Möglichkeiten, Inhalte strukturiert und platzsparend darzustellen. Besonders hilfreich sind Mehrspalten-Layouts, Tabs und Akkordeons, um lange Inhalte übersichtlicher zu gestalten und Nutzern eine bessere Orientierung zu bieten.

Warum strukturierte Inhaltsdarstellung wichtig ist

Verbesserte Lesbarkeit – Inhalte sind leichter erfassbar, da sie nicht als langer Fließtext dargestellt werden.
Bessere Nutzerführung – Besucher können gezielt die Informationen aufrufen, die für sie relevant sind.
Platzsparende Darstellung – Besonders nützlich für umfangreiche Inhalte, die sonst viel Scrollen erfordern.

Übersicht der Strukturierungsoptionen

Mehrspalten-Layouts

  • Inhalte werden nebeneinander angeordnet, z. B. zwei oder drei oder vier Spalten.
  • Ideal für Texte mit Bildern, Vergleiche oder Strukturierung von Inhalten.

Tabs (Registerkarten)

  • Inhalte sind in Reitern (Tabs) gruppiert, die durch Klick sichtbar werden.
  • Perfekt für Themen mit mehreren Unterpunkten, die nicht gleichzeitig angezeigt werden müssen.

Akkordeons (aufklappbare Bereiche)

  • Inhalte sind zunächst eingeklappt und können bei Bedarf geöffnet werden.
  • Besonders sinnvoll für FAQs, lange Erklärtexte oder strukturierte Anleitungen.
  • Akkordeons benötigen eine Mindestmenge an Text 

ℹ️ Die hier beschriebenen Layout-Elemente basieren auf dem Container-Inhaltselement. Eine Einführung dazu befindet sich im Beitrag Container.


Hier sind ein paar Beispiele für einen Zweispalten-Container, Tabs und Akkordeon.

2 Spalter

Linke Spalte

Dies hier ist die linke Spalte des Zwei-Spalter-Containers

Rechte Spalte

Dies ist die rechte Spalte des Zwei-Spalter-Containers

Tabs

Tab 2

Im Tab 2 kann man weitere Inhalte anlegen. z.B. Alle Informationen zur Bewerbung an unserer Hochschule finden Sie hier.

Akkordion

In diesem Akkordeon können Sie z.B. Fragen und Antworten zu einem bestimmten Thema unterbringen.

Antwort: TYPO3 ist ein leistungsfähiges Content-Management-System, das besonders für große Websites und Unternehmensportale genutzt wird.

Mehrspaltige Layouts, Tabs und Akkordeons in der Praxis

Die folgenden Container-Typen stehen zur Verfügung und können über das Inhaltselement „Container“ genutzt werden:
 

Mehrspaltige Layouts (z. B. 2-Spalter, 3-Spalter)

Mehrspaltige Layouts eignen sich zur nebeneinanderliegenden Darstellung von Inhalten – z. B. Text & Bild, Aufzählungen oder Kontakt- & Infoboxen.

So funktioniert's:

  1. Neues Inhaltselement anlegen → Register Besondere Elemente
  2. Container-Typ „2-Col-Layout“ oder „3-Col-Layout“ auswählen
  3. Container speichern
  4. In die Spaltenbereiche Inhaltselemente einfügen (z. B. Text & Medien, Bilder, Call-to-Actions

📌 Hinweis: Container-Elemente erscheinen im Backend als strukturierte Box mit mehreren Bereichen. Inhalte werden direkt in die jeweilige Spalte eingefügt.

Tabs (Registerkarten)

Tabs eignen sich zur Gruppierung von Inhalten, die thematisch zusammengehören, aber nicht gleichzeitig sichtbar sein müssen – z. B. Studiengangsdetails, Anleitungen oder FAQ-Kategorien.

So funktioniert's:

  1. Neues Inhaltselement anlegen → Register Besondere Elemente
  2. Container-Typ „Tabcontainer“ auswählen
  3. Container speichern
  4. Für jeden Tab ein neues Inhaltselement innerhalb des Containers anlegen
  5. Im Reiter „Allgemein“ den Namen des Tabs im Feld „Tab-Titel“ festlegen

📌 Hinweis: Die Inhalte der Tabs erscheinen im Backend untereinander, im Frontend jedoch als klickbare Reiter.
 

Akkordeon (aufklappbare Bereiche)

Ein Akkordeon-Container eignet sich für umfangreiche Inhalte, die platzsparend dargestellt werden sollen – ideal für FAQs, lange Anleitungen oder strukturierte Textabschnitte.

So funktioniert's:

  1. Neues Inhaltselement anlegen → Register Besondere Elemente
  2. Container-Typ „Accordion“ auswählen
  3. Container speichern
  4. Inhaltselemente innerhalb des Containers anlegen (z. B. Text & Medien)
  5. Den gewünschten Akkordeon-Titel im Inhaltselement angeben (Feld: Accordion-Titel)

📌 Hinweis: Akkordeons benötigen mindestens ein Inhaltselement mit Text, das beim Klick aufgeklappt werden kann.
 

💡 Tipp: Alle Container-Varianten können flexibel miteinander kombiniert werden – z. B. ein Akkordeon innerhalb eines Spalters oder Tabs mit zweispaltigem Aufbau.