zum Hauptmenü zum Seiteninhalt zur Subnavigation zum Footermenü zur Suchfunktion zu den Hinweisen der Barrierefreiheit


Inhaltselement Accordions

Container Item

So erzeugen Sie ein Accordion

Der Screenshot zeigt eine Benutzeroberfläche einer Software oder Anwendung. Auf der linken Seite befindet sich eine Liste von Menüpunkten, darunter "Text & Medien". Auf der rechten Seite sieht man einen Bereich mit einem Text und einem Button mit der Aufschrift "Jetzt kreatives Video erstellen".

Für das Erstellen eines Accordions klicken Sie an der gewünschten Stelle im Backend wieder den Button "Neuen Inhalt erstellen".

Das Bild zeigt ein Benutzerinterface mit verschiedenen Optionen für "Aktionselemente". Der Bereich, in dem "Aktionselemente" hervorgehoben ist, ist rot umrandet. Es gibt mehrere Auswahlmöglichkeiten, darunter "Spalten"- und "Container"-Elemente.

Im sich öffnenden Popup wählen Sie im Bereich "Container" das Element "Accordion-Elemente".

Das Bild zeigt einen Computerbildschirm mit einer Benutzeroberfläche. Auf der linken Seite befindet sich ein Navigationsbereich, während im Hauptfenster verschiedene Textelemente angezeigt werden. Ein rotes Feld hebt das Element "Accordion" hervor, das zusätzliche Inhalte enthält.

Direkt nach dem Anklicken wird im Backend an der gewünschten Stelle das Accordion Element sichtbar.

Die Abbildung zeigt eine Benutzeroberfläche eines Programms mit einer Menüleiste und mehreren Textfeldern. Im linken Bereich sind verschiedene Kategorien aufgelistet, darunter Textelemente und Medien. Ein Bearbeitungssymbol ist sichtbar, um Inhalte anzupassen oder hinzuzufügen.

Klicken Sie auf den Button mit dem Bleistift um das Accordion zu bearbeiten.

Der Screenshot zeigt eine Benutzeroberfläche zur Bearbeitung von Inhaltsabschnitten auf einer Webseite. Der Reiter „Accordion“ ist ausgewählt, und es gibt Felder zur Eingabe des Titels und Typs des Inhalts. Die Struktur ist einfach und organisiert.

Vergeben Sie nach Bedarf eine Überschrift und "Speichern" und "Schließen" Sie Ihre Änderungen.

Die Abbildung zeigt eine Benutzeroberfläche einer Softwareanwendung. Links befindet sich ein Menü mit verschiedenen Optionen. Rechts sind Informationen und Elemente angezeigt, die zur Bearbeitung oder Ansicht ausgewählt wurden. Oben ist ein roter Bereich mit Navigationsfunktionen sichtbar.

Sie kommen wieder zur Übersicht der Inhalte Ihrer Seite und sehen das Element Accordion mit der geänderten Überschrift.

Ein Screenshot einer Benutzeroberfläche zeigt einen Bereich zur Bearbeitung von Textinhalten. Ein hervorgehobenes Feld enthält einen Hinweistext, der erklärt, dass die sichtbare Überschrift eine Beschreibung für einen bestimmten Inhalt liefert.

In unserem Beispiel nehmen wir ein bestehendes Inhaltselement und schieben dieses per Drag & Drop direkt in das Accordion hinein. Natürlich könnte man auch direkt innerhalb des Accordions ein neues Element (Bsp.: Text & Medien) anlegen.

Bildschirmfoto einer Benutzeroberfläche mit einem Textfeld, das Vorschläge zur barrierefreien Gestaltung anzeigt. Links sind Navigationsmenüs sichtbar, während der Hauptinhalt in einem zentralen Bereich hervorgehoben wird.

Das gerade verschobene Element vom normalen Inhalt in das Accordion hinein.

Screenshot einer Benutzeroberfläche für ein Dokumentenmanagement-System. In rot umrandete Bereiche zeigen verschiedene Abschnitte wie „Ein Text & Notizen“, „Einen Artikel erstellen“ und „Tabelle“. Jeder Abschnitt enthält die Option „Neue Datei erstellen“ oder „Details anzeigen“.

Hier die Backend Ansicht, nachdem noch 2 weitere Elemente hinein geschoben wurden.

Das Bild zeigt eine Benutzeroberfläche einer Software oder Anwendung, die eine Navigation auf der linken Seite und eine zentrale Liste mit verschiedenen Sektionen anzeigt. Die obere Leiste enthält Optionen für Aktionen und Einstellungen. Der Fokus liegt auf einem Abschnitt namens „Accordion“.

Für eine Vorschau können wir in dieser Backend Ansicht der Elemente einer Seite, ganz oben den Button "Web-Seite anzeigen" drücken.

Ein Eichhörnchen sitzt auf einem Ast. Im Hintergrund sind unscharfe Blätter zu sehen. Unter dem Bild befindet sich ein Abschnitt mit Überschrift und mehreren herunterklappbaren Optionen.

Die Vorschau im Frontend und unser erzeugtes Accordion. Die Elemente sind alle geschlossen und können wechselseitig jeweils aufgeklappt werden.

Ein Bereich auf einer Webseite zeigt verschiedene herunterladbare technische Anleitungen an. Die Anleitungen sind nach Themen aufgelistet, mit Angaben zu Datum und Uhrzeit der Veröffentlichung. Eine klare Struktur erleichtert die Navigation durch die Inhalte.

Das 2. Element des Accordions ist hier aufgeklappt.

Das Bild zeigt eine Benutzeroberfläche zum Bearbeiten von Seiteneinheiten. Es enthält ein Feld zur Auswahl eines Typs mit einer Dropdown-Liste, in der verschiedene Optionen aufgelistet sind, darunter "Standard Ein Dokument ID" und "Verzeichnis". Ein Projektname ist ebenfalls sichtbar.

Wenn die Überschrift des Accordions nicht benötigt wird, dann kann diese beim Accordion Element selbst auf "Verborgen" gesetzt werden.

Ein Bild zeigt ein Eichhörnchen, das eine Nuss frisst, umgeben von Natur. Daneben liegt eine aufgerollte Zeitung. Die Umgebung vermittelt eine entspannte, natürliche Atmosphäre.

Nach dem "Speichern" und "Anzeigen", in der Vorschau ist das Accordion nun ohne Überschrift. Das Accordion ist in diesem Beispiel sehr nah am vorherigen Text & Medien Element. Dies kann korrigiert werden.

Das Bild zeigt eine Benutzeroberfläche zur Bearbeitung von Seiteneinstellungen. Im Abschnitt „Inhalt des Accordions“ wird ein Layout mit verschiedenen Optionen dargestellt, einschließlich einer hervorgehobenen Eingabebox für einen Text. Es sind Optionen zum Layout, Titel und weiteren Einstellungen sichtbar.

Für die Korrektur des Abstands kann im Accordion im Reiter "Erscheinungsbild" die Option "Abstand davor" genutzt werden. Dort gibt es vordefinierte Abstände, wir haben hier "Groß" gewählt. Dann wieder "Speichern" und "Anzeigen" drücken.

Ein Eichhörnchen sitzt auf einem Baumstamm und hält eine Nuss. Im Hintergrund sind verschwommene Zeitungen zu sehen. An der Unterseite befinden sich Menüpunkte für weitere Inhalte.

In der Vorschau sieht man den korrigierten Abstand des Accordions.

Accordion spezieller Fall

In besonderen Situationen möchten Sie unter Umständen innerhalb eines Accordions und dort innerhalb eines Accordion Aufklappelements mehrere Inhaltselemente platzieren. In diesem Fall benutzen Sie als “Zwischencontainer” das Element 1spalter.

Das Bild zeigt eine Benutzeroberfläche eines Programms, mit verschiedenen Abschnitten wie „Accordions“, „Dokumenten“ und „Seiten“. Jeder Abschnitt enthält Optionen zum Hinzufügen oder Bearbeiten von Elementen. Die Navigation ist auf der linken Seite sichtbar, während der Hauptinhalt in einem zentralen Bereich dargestellt wird.

Die Ausgangssituation ein Accordion mit 2 Inhaltselementen im Backend.

Auf der Website sind Bilder von einem Eichhörnchen und einer Zeitung zu sehen. Darunter befinden sich Eingabefelder zum Herunterladen von Dokumenten sowie eine Menüauswahl mit drei Optionen für verschiedene Layouts: Einspalter, zwei Spalten und drei Spalten.

Das selbe Accordion in der Vorschau mit 2 Aufklappelementen.

Die Darstellung zeigt eine Benutzeroberfläche einer Softwareanwendung. Links befindet sich ein Navigationsmenü mit verschiedenen Optionen. Rechts sind Bereiche für die Anzeige von Informationen und Dokumenten, mit einem hervorgehobenen Button zur Bearbeitung oder Auswahl von Inhalten.

Ergänzend dazu soll ein weiteres Aufklappelement erzeugt werden mitten zwischen den bestehenden Elementen. Dazu wird wieder der Button "Neuen Inhalt erstellen" gewählt.

Das Bild zeigt eine Benutzeroberfläche mit verschiedenen Auswahlmöglichkeiten für "Elemente" in einem Programm. Es sind mehrere Optionen aufgelistet, darunter "Speaker" und "Speaker MI", die jeweils mit Symbolen dargestellt sind. Eine Auswahl ist markiert und hervorgehoben.

Im sich öffnenden Popup wird im Bereich "Container" das "1 Spalter" Element gewählt.

Das Bild zeigt einen Screenshot einer Softwareoberfläche mit einer Menüleiste auf der linken Seite. Im Hauptbereich ist ein Abschnitt mit dem Titel „Galerie“ hervorgehoben, darunter sind Optionen für die Verwaltung von Inhalten.

Nach der Auswahl ist im Backend ein sogenannter Gather entstanden. Über den Bleistift gehe ich direkt in die Bearbeitung des Elements.

Eine Benutzeroberfläche für die Bearbeitung von Seiteninhalten. Der Titel "Neue Unterseite" wird angezeigt, mit dem Hinweis, dass die Auswahl eines spezifischen Eintrags erforderlich ist. Ein Bereich ist rot markiert, um die Aufmerksamkeit auf die Eingabeaufforderung zu lenken.

Vergeben Sie wieder eine Überschrift. Diese dient im Aufklappelement als angezeigter Text zum Aufklappen.

Das Bild zeigt einen kleinen roten Eichhörnchen, das auf einer Lichtung sitzt und einen Nuss in seinen Vorderpfoten hält. Im Hintergrund sind unscharfe Pflanzen zu sehen. Das Bild vermittelt eine freundliche, natürliche Atmosphäre.

Nach "Speichern" und "Anzeigen" sehen Sie in der Vorschau das neue Aufklappelement (hier noch leer).

Das Bild zeigt eine Benutzeroberfläche mit einer Liste von Dokumenten und Inhalten. In einem roten Feld sind Informationen zu einem Kapitel und dazugehörige Materialien aufgeführt. Links sind Ordner und Dateien angezeigt, die zur Navigation dienen.

Hier wurden in dieses 1spalter (Gather) Element, 2 weitere Inhaltselemente rein kopiert. Diese sollen beide direkt innerhalb des Accodion Aufklappelements dargestellt werden.

Der Screenshot zeigt eine Übersicht über herunterladbare Inhalte. In einem hervorgehobenen Abschnitt sind zwei Spalten mit Titeln und Download-Links für verschiedene Dokumente aufgelistet, darunter Informationen zu Themen wie Bindungen zwischen Mensch und Medien.

Durch "Web-Seite anzeigen" gelangen wir zur Vorschau und haben nun 2 Inhaltselemente innerhalb eines Accordion Aufklappelements. Die Überschriften der beiden Inhalte werden automatisch ausgeblendet.