toujou
+49 911 23980-870

Accordion with text left

Stellen Sie Textblöcke in Listenform mit einem links stehenden Text im Verhältnis 33:66 dar.

Item-ID: 01-020

 Beispielansicht  Anleitung  Verhalten  Hinweise


Beispielansicht

Headline-Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title: mit Subtitle as List

List element 1List element 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title: Text mit Bild ohne Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title: mit Subtitle

Subtitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Anleitung

Akkordeon anlegen

  • Klicken Sie auf den Button Inhaltum eine Akkordeon-Element zu erstellen.
  • Im Reiter Text klicken Sie auf Accordion with text left.

Textblöcke anlegen

  • Um einen Textblock mit Titel und ggf. Untertitel anzulegen, klicken Sie im Reiter Allgemein auf Neu anlegen.
  • Für SEO: Um die Schema.org-Auszeichnung für FAQs zu aktivieren, klicken Sie auf das Kästchen, sodass ein grüner Haken erscheint.

Akkordeon-Texte erstellen

  • Füllen Sie die Felder Title, ggf. Subtitle oder Subtitle as a List und den Description-Text aus.
  • Fügen Sie ggf. ein Bild (Images: Datei hinzufügen) ein.
  • Für weitere Texte klicken Sie wieder auf Neu anlegen.
  • Sie können die Reihenfolge der Textblöcke mittels Pfeiltasten auf der rechten Seite nachträglich verändern.

Elemente-Optionen 

  • Sie wählen die Option, wie viele Elemente angezeigt werden, indem Sie auf das Dropdown-Menü unter Aufgeklappte Elemente klicken.
  • Zur Auswahl stehen beim Aufrufen einer Seite mit einem Accordion keine, die erste oder alle angelegten Antworten. Standardmäßig wird das erste Element angezeigt.

Elemente schließen

  • Drücken Sie auf den Regler im Bereich Einzelner Erweiterungsmodus, um einzustellen, dass ein Element automatisch schließt, wenn ein anderes geklickt wird. 
  • In toujou voreingestellt ist die ausgeschaltete Option

Text neben dem Akkordeon

  • Im Reiter Text fügen Sie Text ein.
  • Sollten Sie den Text aus einer anderen Datei kopieren, achten Sie auf eventuell mitkopierte Formatierungen.
  • Der Text kann direkt im Textfeld, mit dem Menü über dem Textfeld, formatiert werden. 
  • Speichern Sie Ihre Einstellungen.

Element Design für mehr Individualität

In diesem Element können Sie zudem das Erscheinungsbild ganz leicht mit dem Element Design mit einem Klick ändern. Mit der Auswahl von Standard Design, Primary Design, Secondary Design oder Umgekehrtes Design wechseln Sie Hintergrundfarbe des Elements und ggfs. die Hintergrundfarbe der Headline oder Pfeile bzw. des Textbereichs entsprechend der in den Theme-Settings definierten Farbe.

  

  • Mit Klick auf das Element Design im Reiter Allgemein / General erhalten Sie im Dropdown-Menü die Wahl für eine individuelle Designfarbe.
  • Wählen Sie aus den Optionen Standard, Primary, Secondary sowie Umgekehrt die gewünschte Option aus.
  • Speichern Sie die Änderungen im Element, damit sie sichtbar werden.

Verhalten

Ein Accordion mit Text links gibt den von Ihnen eingefügten Inhalt in Form eines »Akkordeon«-Elements mit einem links nebenstehend Text im Verhältnis 33:66 wieder. Der Textblock des ersten Titels ist dabei stets sichtbar; alle weiteren (stets untereinander befindlichen) Titel und Textblöcke können mittels Klick auf den rechtsbündig platzierten Pfeil aufgeklappt und wieder geschlossen werden.

Besonderheiten: Text und ggf. Bild der Beschreibung sind stets so breit wie ihr Titel und verhalten sich je nach Ausgestaltung wie ein einfaches Textelement oder ein Text mit Bild im Text.

Responsive: Der nebenstehende Text schiebt sich bei kleiner werdenen Endgeräten über das eigentliche Akkordeon. Bilder innerhalb des Akkordeons werden bis zu einer bestimmten Bildschirmgröße in einem festen Verhältnis zum Text angezeigt. Ist nicht ausreichend Platz vorhanden, werden Bilder über dem Text auf voller Breite dargestellt.


Hinweise zur Verwendung von Akkordeon-Elementen für Texte:

Das Akkordeon-Element ist eine geläufige Darstellungsform für beispielsweise FAQs bzw. Häufig gestellte Fragen. Für SEOs interessant: Mit dem Aktivieren des Schema.org-Markups unterstützen Sie mittels strukturierter Daten Ihre Suchmaschinenoptimierung für FAQs.

Generell eignet sich das Akkordeon für die Sammlung von verschiedenartigem Content, der einzeln für sich womöglich nicht die Erstellung einer eigenen Unterseite rechtfertigt; in Summe jedoch in reiner Textform zu lang sein könnte.

Ein Akkordeon bietet demnach die Möglichkeit, Themen platzsparend zu sammeln: in »kleinen« Textblöcken und mit einem Titel zur Kategorisierung. Wir raten Redakteur*innen jedoch dazu, das Akkordeon-Element sinnvoll einzusetzen, da ausgeblendete Inhalte nicht mittels Keyword-Recherche auffindbar sind. Dies gelingt nur, wenn Sie Ihre Titel und ggf. Untertitel gut verschlagworten. Wenn die Textblöcke einen Umfang von wenigen Zeilen überschreiten, sollten Sie über die Erstellung einer Content-Page für das Thema nachdenken, um wichtige Inhalte nicht zu verstecken.