Akkordeon

Akkordeons sind eine schöne Möglichkeit, bestimmte Inhalte nur auf Wunsch des Website-Besuchers anzuzeigen und ein übersichtliches Layout zu erhalten. 

Akkordeon

In der Akkordeon-Kategorie in der linken Content-Sidebar findest du unterschiedliche Akkordeon-Varianten. 

Durch Drag & Drop kannst du ein Akkordeon an die gewünschte Stelle deiner Website platzieren. 

Ein Akkordeon besteht aus einem Trigger und einem Content-Block: 

1. Das ist der Trigger. Überschriften und andere Elemente können als Trigger verwendet werden, um Websites, Dateien oder andere Elemente aufzurufen. In unserem Fall, wird unser Content-Block aufgerufen. Du kannst den Trigger an deine individuellen Anforderungen anpassen, indem du die Einstellungen des Triggers per Doppelklick oder Drücken der [Enter]-Taste aufrufst.
2. Das ist der Content also ist der Inhalt unseres Akkordeons, der aufgerufen wird. 
3. In unserem Beispiel, nutzen wir ein Container-Element, dass ein Text-Element (4.) enthält.

Du kannst den Content-Bereich genauso zusammenstellen, wie du ihn benötigst, bspw. indem du weitere Elemente, wie Bilder, Abstand oder Videos hinzufügst. Hier haben wir bspw. noch ein Bild-Element ergänzt: 

Um den typischen "auf- und zuklappenden Effekt" des Akkordeons zu erzielen, benötigen wir für den Content-Container eine Animation. Elemente mit Animation sind durch einen Stern vor dem Elementnamen in den Breadcrumbs gekennzeichnet. Da wir hier mit einem Section-Template arbeiten, ist die Animation bereits unter den Element-Einstellungen des Containers unter Animation hinterlegt worden, aber genau hier hast du auch die Möglichkeit noch Anpassungen an der Animation vorzunehmen, bspw. um die Art oder Schnelligkeit der Animation zu ändern. 

Sobald du das Akkordeon angepasst hast, kannst du die Funktion über den Vorschau-Modus probieren. Klicke dazu einfach auf das Augen-Icon im oberen Menü. 

Tipp: Der erste Content-Container wird standardmäßig eingeblendet. Wenn du möchtest, dass dieser Container erst nach einem Klick auf den Trigger angezeigt wird, passe die Animation entsprechend an. Dazu ist lediglich der Wert Initial auf Element ausgeblendet zu setzen (siehe oberes Bild auf der linken Seite).

Bilder-Akkordeon

Du kannst unterschiedliche Elemente als Trigger verwenden. Zum Beispiel kannst du statt einer Überschrift auch ein Bild-Element nutzen. In diesem Fall ist Bilder-Tabs ein hilfreiches Section-Template.

Wenn du das Section-Template auf deiner Website einfügst, sieht es so aus: 

1. In diesem Fall ist das Bild unser Trigger. Lade einfach ein Bild hoch oder wähle es auf Dateien aus. 
2. Über dem Bild kannst du noch einen Text hinzufügen.
3. Unter Verlinken kannst du auswählen, welcher Content aufgerufen werden soll. Das kann entweder eine andere Unterseite sein, eine externe Quelle oder ein bestimmtes Element. Bei den meisten Akkordeons ist das Folge-Element, also das Element, was direkt nach dem Trigger eingefügt wurde, die beste Wahl. Deswegen ist es standardmäßig im Section-Template schon ausgewählt.

Um mehr Trigger und Content-Blöcke zu ergänzen, kannst du entweder auf den Trigger klicken und [Strg] + [D] (oder [Cmd] + [D] auf macOS) drücken, um es zu duplizieren oder du nutzt das Kopieren-Icon, das erscheint, wenn du über das Trigger-Element hoverst. Wenn du Akkordeon-Elemente kopierst und die Verlinkung Folge-Element nutzt, prüfe am besten, ob die zusammengehörigen Trigger und Content-Blöcke weiterhin untereinander sind, ansonsten funktioniert das Akkordeon nicht wie gewünscht. Durch Hovern über den Elementen siehst du das entsprechende Label Trigger 1 und Content 1 usw., wodurch du schnell die Reihenfolge prüfen kannst.