Akkordeon
Überblick
Name |
|
|---|---|
Ordner |
|
Styleguide |
Inhaltsverzeichnis
| Inhalt | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
1. Einleitung
Das Akkordeon-Element, eine auf-und zuklappbare Liste, ist bei Webdesignern und Onlineredakteuren ein beliebtes HTML-Gestaltungselement, um auflistbare und meist umfangreiche Informationen platzsparend darzustellen. Sehr oft findet es im Rahmen von »Häufig gestellten Fragen«, (s.g. FAQ) Anwendung. Das Akkordeon ist aber auch sehr gut dazu geeignet, Bilder und Videos darzustellen, vgl. dazu Styleguide Akkordeon und sein Einsatz ist immer eine Möglichkeit, wenn Seiten zu "lang" sind.
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
2. Verschiedene Darstellungsmöglichkeiten |
2.1 Akkordeon mit 2 und 3 Einträgen
Die Anzahl an Einträgen in ein Akkordeon kann individuell und den jeweiligen Ansprüchen bestimmt werden. Je nach Seitenaufteilung (mit oder ohne Marginalspalte), variiert die Breite der Darstellung.
In der Beispielabbildung ist die Seitenaufteilung “Navigation-Inhalt-Marginalspalte” gewählt.
| Info |
|---|
Siehe dazu Kapitel Auswahl der Seitenaufteilung |
2.2 Akkordeon mit 5 Einträgen
Je nach Seitenaufteilung (mit oder ohne Marginalspalte), variiert die Breite der Darstellung.
In der Beispielabbildung ist die Seitenaufteilung “Navigation-Inhalt breit (ohne Marginalspalte) gewähltDas Akkordeon und die Einträge in voller Seitenbreite bei einer Seitenaufteilung “Navigation-Inhalt breit” . Die einzelnen Einträge innerhalb eines Akkordeon werden dabei untereinander platziert und nehmen ebenfalls die den Seiteninhalten zur Verfügung stehende Breite ein.
| Info |
|---|
Siehe dazu Kapitel Auswahl der Seitenaufteilung |
2.3 Akkordeon eingebunden
Je nach Seitenaufteilung (mit oder ohne Marginalspalte), variiert die Breite der Darstellung.In der Beispielabbildung ist die Seitenaufteilung “Navigation-Inhalt breit (ohne Marginalspalte) gewählt.
Um zusammengehörende Inhalte besser zu gliedern, ist das erste Akkordeon in das Element den Seiteninhalt “Bild + Text” eingebunden. Das zweite Akkordeon ist in dem Element den Seiteninhalt “Inhaltsteiler” eingebunden, welches die Breite des Akkordeon beeinflussen kann.
| Info |
|---|
Siehe dazu Kapitel Auswahl der Seitenaufteilung und Kapitel Inhaltsteiler |
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
3. Verwendung im SmartEdit |
Bei der Verwendung eines Akkordeon gibt es zwei Möglichkeiten der Erstellung.
Standard (empfohlen)
Erstellen eines Akkordeon mit einer vorbelegten Anzahl an Akkordeoneinträgen. Hier kann zwischen 2 bis 5 Einträgen gewählt werden.
Die Anleitung für die schrittweise Erstellung wird im Abschnitt 3.1 Akkordeon mit Akkordeoneinträgen erklärt.
Optionales Erstellen
Erstellen eines Akkordeon ohne Akkordeoneinträge. Die einzelnen Einträge selbst können im Nachgang manuell hinzugefügt werden.
Die Anleitung für die schrittweise Erstellung wird im Abschnitt 3.2 Akkordeon ohne Einträge erklärt.
3.1 Erstellen des Seiteninhalts “Akkordeon mit Akkordeoneinträgen”
Schrittweise Erläuterung für die Erstellung eines neuen Seitenschnipsel Seiteninhalts basierend auf der CMS-Vorlage “
Akkordeon + x Einträge”.
Symbol | Aktion | ||||
|---|---|---|---|---|---|
| 1 | Seite öffnen |   | |||
| 2 |  | Pattern im Inhaltsbereich hinzufügen, sortieren, entfernen |  Seiteninhalte |
| |
| 3 |  | Seite erstellen & verknüpfen |   | ||
| 4 |  | Content-Klassen Ordner “Andere DarstellungsartenInhalts - Templates” auswählen
|   | ||
| 5 |  | Content-Klasse “Akkordeon + x Einträge” auswählen
|   | ||
| 6 | Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift der des neuen Seite Seiteninhalts belegt werden sollte. |   | |||
| 7 | Mit “OK” bestätigen |  |  |
Bearbeiten Akkordeon mit Akkordeoneinträgen
| 8 | Darstellung nach Erstellung “Akkordeon + 2 Einträge” Die Abbildung zeigt das Beispiel mit 2 Akkordeoneinträgen. |  |
3.1.1 Bearbeiten des Seiteninhalts “Akkordeon mit Akkordeoneinträgen”
Schrittweise Erläuterung für das Bearbeiten eines neuen Seitenschnipsel Seiteninhalts basierend auf der CMS-Vorlage “ Akkordeon + x 2 Einträge”.
Ansicht Darstellung nach erstellen des Akkordeon aus der Vorlage “Akkordeon + 2 Einträge”. Das Akkordeon ist zur Bearbeitung der Akkordeoneinträge geöffnet.
Bezeichnung | Beschreibung |
|---|---|
| schließt die Seite (Inhaltselement) “Akkordeon”Bearbeitung beenden |
| Siehe dazu Kapitel 7.9 Projektfremde Seite einbinden |
| einzelne Akkordeoneinträge hinzufügen, sortieren oder entfernen Die schrittweise Erläuterung der einzelnen Schritte wird im Abschnitt 3.3 Akkordeoneinträge erklärt. |
| öffnen des “Akkordeoneintrag” Akkordeoneintrag zur weiteren Bearbeitung öffnen Das Bearbeiten eines Akkordeoneintrages wird im Abschnitt 3.3.2 Akkordeoneintrag bearbeiten erklärt. |
.png?version=1&modificationDate=1720080763014&cacheVersion=1&api=v2){kind=icon}
.png?version=3&modificationDate=1723197147604&cacheVersion=1&api=v2){kind=icon}
Erstellen Akkordeon
3.2 Erstellen des Seiteninhalts “Akkordeon” ohne Einträge
Symbol | Aktion | ||||
|---|---|---|---|---|---|
| 1 | Seite öffnen |  | |||
| 2 | | Pattern im Inhaltsbereich hinzufügen, sortieren, entfernen | Seiteninhalte |  | |
| 3 | | Seite erstellen & verknüpfen | | ||
| 4 | | Content-Klassen Ordner “Andere DarstellungsartenInhalts - Templates” auswählen
| | ||
| 5 | | Content-Klasse “Akkordeon” auswählen
| | ||
| 6 | Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift der des neuen Seite Seiteninhalts belegt werden sollte. | | |||
| 7 | Mit “OK” bestätigen | |
| |||
| 8 | Ansicht nach erstellen des Akkordeon aus der Vorlage “Akkordeon. Das Akkordeon ist zur weiteren Bearbeitung geöffnet. Nun können einzelne Akkordeoneinträge hinzugefügt werden. |  |
3.2.1 Bearbeiten des Seiteninhalts “Akkordeon” ohne Einträge
Schrittweise Erläuterung für das Bearbeiten eines neuen Seitenschnipsel Seiteninhalts basierend auf der CMS-Vorlage “ Akkordeon”.
Ansicht Darstellung nach erstellen des Akkordeon aus der Vorlage “Akkordeon. Das Akkordeon ist zur weiteren Bearbeitung geöffnet.
Bezeichnung | Beschreibung |
|---|---|
| schließt die Seite (Inhaltselement) “Akkordeon” |
| Siehe dazu Kapitel 7.9 Projektfremde Seite einbinden |
| einzelne Akkordeoneinträge hinzufügen, sortieren oder entfernen. Die schrittweise Erläuterung der einzelnen Schritte wird im Abschnitt 3.3 Akkordeoneinträge erklärt. |
3.3 Akkordeoneinträge
Akkordeneinträge hinzufügen
Mit Hilfe dieser Anleitung kann eine beliebige Anzahl an Akkordeoneinträgen hinzugefügt und so den individuellen Bedürfnissen angepasst werden.
.png?version=2&modificationDate=1720084689809&cacheVersion=1&api=v2)
Auf Akkordeoneinträge bearbeiten klicken.
| Info |
|---|
Ist das Bearbeitungsfenster geschlossen, kann über den Punkt “Akkordeon öffnen” die Seite (Inhaltselement) “Akkordeon” zur Bearbeitung wieder geöffnet werden. |
3.3.1 Akkordeoneinträge hinzufügen
Symbol | Aktion | ||||
|---|---|---|---|---|---|
| 1 | | Akkordeoneinträge | | ||
| 2 | | Seite erstellen & verknüpfen
| | ||
| 3 | Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift |
des neuen |
Seiteninhalts belegt werden sollte. |
. | | ||
| 4 | Mit “OK” bestätigen | |
| 5 | Darstellung |
Das Bearbeiten eines Akkordeoneintrages wird im Abschnitt Akkordeoneintrag bearbeiten erklärt.
nach Erstellung eines Akkordeoneintrags. |  |
3.3.2 Akkordeoneintrag bearbeiten
In diesem Abschnitt wird die inhaltliche Bearbeitung eines Akkordeoneintrages, wie das Hinzufügen von Überschriften und Inhalten beschrieben.
Bezeichnung | Beschreibung |
|---|---|
| öffnet das Inhaltselement Akkordeon Seiteninhalt zur Bearbeitung . öffnen |
| Bearbeitung beenden |
| Erstellen der Überschrift für den Akkordeoneintrag |
| Inhaltsbearbeitung des Akkordeoneintrages mit Hilfe des Text-Editor. Hier können die Inhalte (z.Bsp. Texte, Tabellen und/oder Grafiken) platziert werden. Das Arbeiten mit dem Text-Editor wird im Abschnitt “Text bearbeiten - Der Texteditor” beschrieben. |
| Hier können innerhalb eines Akkordeoneintrages weitere Elemente Seiteninhalte hinzugefügt oder bereits hinzugefügte Elemente sortiert oder gelöscht entfernt werden. So kann ein Akkordeoneintrag mehrere, verschiedene Elemente beinhaltenSeiteninhalte enthalten, wie z. Bsp. Verweislisten, Bilder (galerien) / Bildergalerien oder YouTube-Videos. |
.png?version=1&modificationDate=1720084419419&cacheVersion=1&api=v2){kind=icon}
Darstellung nach Bearbeiten eines Akkordeoneintrag.
Darstellung nach Bearbeiten eines Akkordeoneintrag in der Seitenvorschau mit geöffneten Akkordeon.
3.3.3 Akkordeoneinträge sortieren
In diesem Abschnitt wird erklärt, wie einzelne Seiteninhalte sortiert werden können. Da dieser Bearbeitungsschritt bei vielen Seiteninhalten gleich ist, ist die detaillierte Beschreibung im Kapitel 7.7 Sortieren von Seiteninhalten zu finden.
Symbol | Aktion | ||
|---|---|---|---|
| 1 |  | Akkordeon öffnen |  |
| 2 | | Akkordeoneinträge | |
| 3 | Die weiteren Bearbeitungsschritte sind im Kapitel 7.7 Sortieren von Seiteninhalten ab Punkt 2 beschrieben. |  |
3.3.4 Akkordeoneinträge entfernen
In diesem Abschnitt wird erklärt, wie einzelne Seiteninhalte entfernt werden können. Da dieser Bearbeitungsschritt bei vielen Seiteninhalten gleich ist, ist die detaillierte Beschreibung im Kapitel 7.8 Entfernen von Seiteninhalten zu finden.
Symbol | Aktion | ||
|---|---|---|---|
| 1 | | Akkordeon öffnen | |
| 2 | | Akkordeoneinträge | |
| 3 | Die weiteren Bearbeitungsschritte sind im Kapitel 7.8 Sortieren von Seiteninhalten ab Punkt 2 beschrieben. |
| Panel | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
4. Häufig gestellte Fragen (FAQ) |
Frage | Antwort |
|---|---|
Wofür steht in der Wiki-Beschreibung das x innerhalb von “Akkordeon + xEinträge”? | Das x steht für die Auswahlmöglichkeiten 2 bis 5 Akoordeoneinträge. |