Akkordeon

Akkordeons sind eine schöne Möglichkeit, bestimmte Inhalte nur auf Wunsch des Website-Besuchers anzuzeigen und ein cleanes Layout zu erhalten. Wie du Akkordeons in Sitejet verwendest, zeigen wir dir in diesem Artikel.

Akkordeon

Unter "Akkordeon"-Kategorie in der Sidebar findest du unterschiedliche Akkordeon-Varianten. 

Durch Drag & Drop kannst du ein Akkordeon-Preset an die gewünschte Stelle deiner Website platzieren. Das sieht dann so aus: 

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 Trigger 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 ein Sternchen vor dem Elementnamen in den Breadcrumbs unten gekennzeichnet. Da wir hier mit einem Preset arbeiten, ist die Animation bereits unter den Container-Einstellungen "Animation" hinterlegt worden, aber genau hier hast du auch die Möglcihkeit 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 Preset.

Wenn du das Preset 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 dem Datei-Manager aus. 
2. Über dem Bild kannst du noch ein 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 Preset schon ausgewählt.

Um mehr Trigger und Content-Blöcke zu ergänzen, kannst du entweder auf den Trigger klicken und "Strg + D" 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.

Zurück zum Anfang