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
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 Inhalt, um 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.
Besonderheit im medatsu-Theme
Das medatsu-Theme bietet Ihnen Optionen zur individuellen Website-Gestaltung im toujou-Backend. Passen Sie das Design des einzelnen Elements nach Ihren Wünschen an und ändern Sie je nach Element die Hintergrundfarbe und die Hintergrundfarbe der Headline oder Pfeile.
- Mit Klick auf das Element Design erhalten Sie im Dropdown-Menü die Wahl für eine individuelle Designfarbe, die sich auf die Hintergrund- und Headlinehintergrundfarbe auswirkt.
- Als Möglichkeiten stehen default, primary, secondary sowie inverted zur Verfügung. Die Optionen orientieren sich an den im toujou settings definierten Farben.
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.