Das Inhaltselement "Akkordeon"

Mit dem Akkordeon können Sie Informationen einfach und übersichtilich anzeigen. Der Inhalt wird standardmässig nicht angezegt. Beim Anklicken öffnet sich ein einzelner Teil - geschlossen wird er auf die gleiche Weise. Somit wird nicht alle Information auf einmal angezeigt und ein Informationsüberfluss wird verhindert.

Übersichtlich und praktisch – wenn Sie den Titeln eine sinnvolle Bedeuting geben.

Inhalt

Anleitung als Beispiel für ein Akkordeon

Ein Akkordeon im Backend erstellen

Ein Akkordeon im Backend erstellen

Sie können das Inhaltselement "Akkordeon" wie jedes andere Inhaltselement einfach über den Button [+ Content] auf ihrer Website einfügen (1). Die zur Auswahl stehenden Optionen gleichen im wesentlichen denen eines Rasterelements.

Sobald Sie abspeichern, erscheint das Akkordeon im Backend als gelbes Rasterelement (2). Dieses können Sie nur in einspaltige (slim, normal, wide) Rasterelemente miteinbinden. Details hierzu im nächsten Abschnitt Akkordeons und Rasterelemente.

Nun können Sie einzelne Inhaltselemente innerhalb des Akkordeons platzieren (3). In einem Akkordeon kann fast jedes Inhaltselement engelegt werden. Die Ausnahme bildet ein weiteres Akkordeon. Jedes Inhaltselement im Akkordeon wird als einzelnes Element betrachtet. Folglich wird jedes Element individuell ausklappbar angezeigt. Mit Rasterelementen können Sie mehrere Inhaltselemente in einem Tab anlegen. Im nächsten im nächsten Abschnitt wird dies behandelt.

Der Header des Akkordeon-Tabs wird automatisch vom Inhaltselement übernommen. Der Header vom Inhaltselement ist standardmässig sichtbar. Somit erscheinen beim Ausklappen zwei identische Header untereinander. Um dies zu verhindern, stellen sie den Header im Inhaltselement den Type auf hidden.

Akkordeon-Raster und Verkettung von Inhaltselementen

Innerhalb eines Akkordeons steht Ihnen ein veränderter Satz von Rasterelementen zur Verfügung. Dies ermöglicht Ihnen, mehrere Inhaltselemente innerhalb einer Akkordeon-Gruppe zu platzieren. So können Sie mehrere Inhaltselemente gruppieren und gemeinsam ausklappen. Statt für jedes Inhaltselement automatisch eine eigene Akkordeon-Gruppe zu erzeugen.

Wählen Sie zur Erstellung eines Akkordeonrasters innerhalb Ihres Akkordeons den Button [+ Content]. Auf dem letzten Reiter "Accordion grids" finden Sie die Akkordeon-Raster. Wählen Sie ein einspaltiges "1 Column"-Layout, wenn Sie lediglich mehrere Elemente konsekutiv verketten möchten oder nutzen Sie die mehrspaltigen Layouts, um komplexere Layoutstrukturen aufzubauen. Dieser Abschnitt wurde mit dem "2 Columns 1/3 : 2/3"-Layout eines Akkordeon-Rasters umgesetzt.

Einbetten eines Akkordeons in Rahmen-Rasterelemente

Der äussere Rahmen eines Akkordeons – also das gesamte Inhaltselement – kann nur in Rasterelemente mit einem einspaltigen Grid Layout (slim, normal, wide) eingebunden werden. So wird verhindert, dass unübersichtlich kleinteilige Strukturen aufgebaut werden. Mehrspaltige Layouts können also nur innerhalb eines Akkordeons (mithilfe der Akkordeon-Raster) umgesetzt werden.

Rasterelemente im Akkordeon

Seit dem Release 2.0.0 können in einem Akkordeon ein- und mehrspaltige Rasterelemente eingefügt werden. Dies erlaubt es, Inhalt untereinander mit verschiedenen Kolonnen anzuzeigen.

Hierfür erstellen Sie im Akkordeon-Raster zuerst ein Content element mit der Spezifikation Accordion grid > 1 Column. In diesem Element können Sie nun weitere Accordion grids einfügen und die gewünschten Spezifikationen wählen. 

In der Bildergalerie unterhalb können Sie ein entsprechendes Beispiel sehen. Der Inhalt wird in einem 2 Column grid dargestellt und die Image Gallery ist im äusseren 1 Column grid eingebettet.

Weitere Beispiele finden Sie in der Gallerie.

Beispiel-Bild

Beispiel

Beispiel für die Verkettung mehrer Inhaltselemente innerhalb eines mehrspaltigen Akkordeon-Grids (2 Columns 2/3 : 1/3).

Aufbau dieses Akkordeon-Rasters mit Inhaltselementen

Aufbau dieses Akkordeon-Rasters mit Inhaltselementen

Beispielhafte Darstellung eines mehrspaltigen Akkordeons auf einem Mobilgerät

Beispielhafte Darstellung eines mehrspaltigen Akkordeons auf einem Mobilgerät

Akkordeons bieten eine gute Möglichkeit, umfangreiche Inhalte einer Page auch Mobilgerät-Nutzern einfacher zugänglich zu machen. Die einzeln ausklappbaren Elemente sind (sofern kein Ankerlink genutzt wird) in der Regel eingeklappt. So kann der Mobilnutzer den Inhalt der Page schneller erfassen kann. Dadurch muss er nicht durch alle Inhaltselemente hindurchscrollen.

Achten Sie bei der Erstellung von Akkordeons darauf, dass auf den kleinen Bildschirmen mobiler Endgeräte (besonders bei umfangreichen Akkordeons) häufig nur ein kleiner Teil der gesamten Page sichtbar ist.

Mehrspaltige Akkordeon-Rasterelemente werden wie normale Rasterelemente bei der Darstellung auf Mobilgeräten umgebrochen. Die linke Spalte wird zu oberst und die rechte Spalte zu unterst angezeigt. Ordnen Sie die Inhaltselemente daher in jeder Spalte von oben nach unten in einer logischen Folge an. Die räumlichen Links/Rechts-Beziehungen der Spalten zueinander können auf Mobilgeräten nicht dargestellt werden.

Verwendung von Ankerlinks, um Akkordeon automatisch auszuklappen

Verwendung von Ankerlinks, um Akkordeon automatisch auszuklappen

Mit einem Ankerlink können Sie auf einen bestimmten Akkordeon-Tab springen. Dabei wird der Tab geöffnet. Prinzipiell gehen Sie dabei analog zur Erstellung von Ankerlinks vor: Wählen Sie bei der Erstellungs eines Links das entsprechende Inhaltselement aus. Im Reiter "Page" wähle Sie zuerst die Page auf der das Inhaltselement ist (2, schwarzer Pfeil). Dann können Sie das Inhaltselement auswählen (3).

Achtung: Wählen Sie nicht das Akkordeon aus. Damit das Akkordeon automatisch ausklappt, muss ein Inhaltselement im Akkordeon verlinkt sein.