Elemente - Akkordeon

Akkordeons sind eine großartige Möglichkeit, weniger relevante Inhalte zu verbergen, bis sie benötigt werden, oder einfach nur, um ein sauberes Layout zu erhalten. Wie du Akkordeons in Sitejet verwendest, zeigen wir dir in diesem Artikel.

ABSCHNITT

Basiswissen

Trigger mit Content-Elementen verknüpfen

Bilder-Akkordeons verwenden

Achte auf die Anzahl an Triggern


Basiswissen

Um ein Akkordeon-Preset auf deiner Website einzufügen, führe folgende Schritte aus:

  1. Bewege deine Maus über "+ Inhalt hinzufügen" in der linken oberen Menüleiste
  2. Klicke auf "Presets" 
  3. Öffne die Registerkarte "Struktur" oder suche nach "Accordion"
  4. Ziehe das Preset per Drag and Drop an die gewünschte Stelle auf der Website 
  5. Per Doppelklick auf das Puzzleteil-Symbol kannst du die Preset-Einstellungen öffnen

Trigger mit Content-Elementen verknüpfen

Sieh dir das untere Bild an. Die folgende Beschreibung nimmt darauf Bezug.

  1. Das ist der Trigger. Es handelt sich hierbei im Grunde um ein Container-Element dem die Klasse ".ed-headline" und ".accordion-trigger" zugewiesen wurde und einem <h3> Child-Element. Überschriften können unter anderem als Link verwendet werden, um auf Websites, Dateien, andere Elemente, etc. zu verweisen. Die Details der Struktur kannst du in der "Config"-Ansicht im Code-Editor nachsehen. Rufe die Einstellungen des Trigger per Doppelklick oder Drücken der [Enter]-Taste auf.
  2. Dies ist der Inhalt unseres Akkordeons. Der Inhalt wird in einem Container-Element, auf dem eine Animation (siehe 3.) eingestellt wird, zusammengefasst. In diesem Beispiel ist bereits ein Text-Element hinterlegt, es können aber auch weitere Elemente - Spacer, Bilder, etc. - hinzugefügt werden. 
  3. Für den typisch auf- und zuklappenden Effekt wird, wie bereits erwähnt, eine Animation auf unserem Container benötigt. Elemente mit Animation sind durch ein Sternchen vor dem Elementnamen in den Breadcrumbs unten gekennzeichnet (linker Ausschnitt). Sollte der Content-Container nicht direkt unter dem Trigger sein, ist dies auch das Element, dessen ID wir benötigen, um es mit dem Trigger zu verknüpfen. Im linken Ausschnitt werden die Einstellungen des Triggers gezeigt. Hier kann im Abschnitt "Element" die Animation eines bestimmten Elements ausgelöst werden. Füge dafür lediglich die Element-ID in das Feld "Element" oder klicke auf das Icon rechts neben dem Feld und wähle anschließend das entsprechende Element aus. Sollte sich, wie in diesem Beispiel, der Content-Container direkt unter dem Trigger liegen, kann einfach "Folge-Element" ausgewählt werden.

Tipp: Achte darauf, dass kein anderes Element (z. B. ein Spacer) zwischen Auslöser und Inhalt platziert ist, da sonst die Verknüpfung mit dem "Folge-Element" nicht funktioniert.

Damit ist der Trigger mit dem Content-Container verbunden.

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-Akkordeons verwenden

Akkordeons sind eine schöne Möglichkeit, bestimmte Inhalte nur auf Wunsch des Website-Besuchers anzuzeigen. Durch die Verwendung eines Bilder-Akkordeons kann dies auf kreative Weise erreicht werden, wobei Bilder als Thumbnails bzw. Trigger verwendet werden.

Preset einbinden

1. Du kannst auf die Presets zugreifen, indem du [Strg] + [Enter] drückst oder den Mauszeiger über "+ Inhalt hinzufügen" bewegst und anschließend auf "Preset" klickst. Wähle im Abschnitt "Akkordeon" das Preset "Image-Accordion" aus und füge es mit einem Doppelklick nach dem aktuell ausgewählten Element oder per Drag and Drop an der gewünschten Stelle auf der Website ein. 

2. Du erhältst ein Bild-Trigger (2.) und ein Content-Container (3.) mit einem Platzhaltertext. Die orangefarbenen Bezeichnungen (mit einem roten Rahmen markiert) zeigen an, dass Trigger 1 zum Content 1 gehört. Doppelklicke auf das Bild, um auf das Einstellungsfenster auf der linken Seite zuzugreifen. Hier kannst du das Bild ändern und nach Bedarf bearbeiten (z. B. auf ein bestimmtes Seitenverhältnis zuschneiden, entsättigen oder einen Unschärfe-Effekt anwenden). Der Text auf dem Bild-Trigger wird im Feld "Bildunterschrift" im Einstellungsfenster angepasst (jeweils wieder mit rotem Rahmen markiert).

3. Dies ist der Content-Container direkt unter dem Bild-Trigger. Achte darauf, dass nichts anderes zwischen den beiden Elemente liegt, da sonst die in Schritt 4 beschriebene standardmäßige Verlinkung nicht richtig funktioniert.

4. Hier kannst du festlegen, mit welchem Container der Trigger verknüpft sein soll. Wie auch für die meisten anderen Akkordeon-Presets ist auch für dieses Akkordeon die Option "Folge-Element" standardmäßig vorausgewählt und in den meisten Fällen auch am nützlichsten. Es verknüpft den Trigger, wie im Abschnitt " Trigger mit Content-Elementen verknüpfen" beschrieben, mit dem nachfolgenden Element oder Container im Editor - in diesem Fall unseren "Content"-Container. 

5. Um weitere Trigger (und Content-Container) zu erstellen, kannst du entweder das entsprechende Element auswählen und mit [Strg] + [D] duplizieren oder auf das kleine Symbol klicken, während du mit der Maus über das Element fährst. Dadurch wird direkt nach dem Original eine Kopie erstellt. Sämtliche Akkordeon-Elemente (Trigger und Content-Container) werden im Website Builder (CMS) untereinander angeordnet. Auf der Website selbst werden sie dann aber, wie in den Preset-Einstellungen angegeben, in der entsprechenden Spalten-Anzahl angeordnet.

So sieht beispielsweise folgender Website Builder Inhalt...:

...auf der Website dann so aus:


Achte auf die Anzahl an Triggern

Es gibt praktisch keine Begrenzung, wie viele Trigger und Content-Container du in deinen Akkordeons anzeigen kannst. Solltest du mal mehr als insgesamt 24 Trigger-Elemente anzeigen wollen, so passe die maximal zulässige Anzahl einfach in den Einstellungen an. Diese Einstellung gewährleistet die Performance der Website und soll lediglich deinen Kunden daran hindern, mehr Elemente als von dir vorgesehen, zu erstellen.

Wechsle dazu per Klick auf das Puzzleteil-Symbol in die Preset-Einstellungen und passe im Abschnitt "Akkordeon" die Elementanzahl an. Dies gilt für alle Akkordeon-Presets.

Zurück zum Anfang

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Hilfe benötigt? Kontakt aufnehmen Kontakt aufnehmen