Akkordeon
1. Einleitung
Das Akkordeon, 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.
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.
Siehe dazu Kapitel Auswahl der Seitenaufteilung
2.2 Akkordeon mit 5 Einträgen
Das 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.
Siehe dazu Kapitel Auswahl der Seitenaufteilung
2.3 Akkordeon eingebunden
Um zusammengehörende Inhalte besser zu gliedern, ist das erste Akkordeon in den Seiteninhalt “Bild + Text” eingebunden. Das zweite Akkordeon ist in den Seiteninhalt “Inhaltsteiler” eingebunden, welches die Breite des Akkordeon beeinflussen kann.
Siehe dazu Kapitel Auswahl der Seitenaufteilung und Kapitel Inhaltsteiler
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 Seiteninhalts basierend auf der CMS-Vorlage “
Akkordeon + x Einträge”Symbol | Aktion | ||
---|---|---|---|
1 | Seite öffnen | ||
2 |
| Seiteninhalte | |
3 |
| Seite erstellen & verknüpfen | |
4 |
| Content-Klassen Ordner “Inhalts - Templates” auswählen Das Bildschirmfoto bildet eine allgemeine Darstellung aller Content-Klassen Ordner ab. Kann ggf. abweichen. | |
5 |
| Content-Klasse “Akkordeon + x Einträge” auswählen
Das Bildschirmfoto bildet eine allgemeine Darstellung von Content-Klassen ab. Kann ggf. abweichen. | |
6 | Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift des neuen Seiteninhalts belegt werden sollte. | ||
7 | Mit “OK” bestätigen | ||
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 Seiteninhalts basierend auf der CMS-Vorlage “
Akkordeon + 2 Einträge”.3.2 Erstellen des Seiteninhalts “Akkordeon” ohne Einträge
Symbol | Aktion | ||
---|---|---|---|
1 | Seite öffnen | ||
2 |
| Seiteninhalte | |
3 |
| Seite erstellen & verknüpfen | |
4 |
| Content-Klassen Ordner “Inhalts - Templates” auswählen Das Bildschirmfoto bildet eine allgemeine Darstellung aller Content-Klassen Ordner ab. Kann ggf. abweichen. | |
5 |
| Content-Klasse “Akkordeon” auswählen Das Bildschirmfoto bildet eine allgemeine Darstellung von Content-Klassen ab. Kann ggf. abweichen. | |
6 | Es erscheint ein Dialogfenster mit einem aus der Content-Klasse generierten Seitennamen, der mit der späteren Überschrift des neuen 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 Seiteninhalts basierend auf der CMS-Vorlage “
Akkordeon”.3.3 Akkordeoneinträge
3.3.1 Akkordeoneinträge hinzufügen
Symbol | Aktion | ||
---|---|---|---|
1 | Akkordeoneinträge | ||
2 |
| Seite erstellen & verknüpfen Es wird ein einzelner Akkordeoneintrag erstellt. Dieser Vorgang muss je nach benötigter Anzahl an Akkordeoneinträgen wiederholt werden. | |
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 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.
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.8 Sortieren 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. |
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.9 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. |
4. Häufig gestellte Fragen (FAQ)
Frage | Antwort |
---|---|
Wofür steht in der Wiki-Beschreibung das x innerhalb von “Akkordeon + x Einträge”? | Das x steht für die Auswahlmöglichkeiten 2 bis 5 Akoordeoneinträge. |