Manchmal ist es übersichtlicher, Texte in Akkordeons zu unterteilen. Das sind ein- und ausklappbare Segmente, die Text oder auch andere Elemente beinhalten können.
Leider wird der zuvor hier empfohlene Block Accordion Items von Phil Buchanan nicht mehr zuverlässig upgedatet, weswegen wir diesen Beitrag umgeschrieben haben.
Inhaltsverzeichnis
- Der Akkordeon-Block von WordPress heißt »Details«
- Andere Akkordeon-Blocks
- Die Mentoring-FAQ – ein praktisches Beispiel
Stand:
Der Akkordeon-Block von WordPress heißt »Details«
Seit der Version 6.3 hat WordPress einen eigenen Akkordeon-Block namens Details.
Ein Akkordeon besteht immer aus der Zusammenfassung, die immer zu sehen ist, und dem Inhalt, den man erst nach dem Ausklappen sieht.
Im Details-Block kann man als Zusammenfassung leider keine Überschriften nutzen, sondern nur normale Absätze:
Zudem gibt es nur wenig Einstellungen zur Gestaltung des Blocks und die wenigen vorhandenen kann man nur für das gesamte Akkordeon nutzen. Deshalb ist z. B. eine getrennte Gestaltung von Zusammenfassung und Inhalt bisher ausschließlich über zusätzliches CSS möglich.
Immerhin sind im Akkordeon-Inhalt außer Absätzen verschiedene Blockarten möglich, wie Bilder, Listen, oder ein weiterer Details-Block. Hier ein Beispiel (bitte ausklappen):
Das ist ein Beispiel für einen Details-Block
So sieht er aufgeklappt aus. Die Gestaltung erfolgt nur über die standardmäßigen WordPress-Einstellungen. Man kann auch ein Bild oder eine Liste einfügen und das sogar in Spalten:
- Ein Listenpunkt
- Noch ein Listenpunkt
- Wieder ein Listenpunkt
- und so weiter
- und so fort
Andere Akkordeon-Blocks
Im Folgenden ein kurzer Überblick zu weiteren Akkordeon-Blöcken.
Akkordeons im Block-Verzeichnis
Über die Suche im Block-Inserter links oben im Block-Editor finden sich mit dem englischen Suchwort accordion einige Ergebnisse, bei denen man aber im Backend leider nicht sehen kann, wann sie zuletzt aktualisiert wurden. So ist auch Accordion Item weiter gelistet.
Bei einer Suche nach »accordion« im Block-Verzeichnis auf wordpress.org kann man hingegen auch alle Details der einzelnen Plugins einsehen:
Akkordeons in Blocksammlungen
Die in Kapitel 18 vorgestellten Blocksammlungen wie Kadence Blocks, Spectra oder GenerateBlocks haben allesamt einen eigenen Akkordeon-Block.
Der Accordion-Block von GenerateBlocks bietet wirklich viele Einstellungsmöglichkeiten, die neben dem Aussehen auch das Verhalten betreffen, steht aber leider nur in der Bezahlvariante zur Verfügung:
Da die GenerateBlocks insgesamt sehr detaillierte Möglichkeiten zur Gestaltung und zum Layouten von Inhalten bieten (siehe z. B. GenerateBlocks statt Elementor), lohnt es sich für anspruchsvollere WordPress-Nutzer vielleicht schon, die Pro-Version anzuschaffen (kein Affiliate-Link).
Die Mentoring-FAQ – ein praktisches Beispiel
Ein kostenloses Plugin, das komplett dieselben Funktionen wie Accordion Items bietet, habe ich bisher jedenfalls leider nicht wieder finden können. Deshalb habe ich die Beispiele aus der vorherigen Version dieses Artikels leider neu durchdenken und umbauen müssen.
Das Mentoring-FAQ auf meiner Website sieht jetzt so aus:
Dazu gehört dieser Zusatz an individuellem CSS:
Das Glossar auf der Autorinnen-Website von Anna Hellmich musste die Akkordeon-Funktion leider ganz einbüßen, da keines der von mir getesteten Plugins das automatische Auf- und Zuklappen bei Ansteuern über einen Link ermöglichen konnte.
3 Antworten auf „Akkordeons im Block-Editor“
[…] ich auf einstieg-in-wp.de, wo ich als Co-Autorin tätig bin, einen Beitrag darüber geschrieben, wie sich mit dem Block „Accordion Items“ ein- und ausklappbare Elemente, sogenannte Akkordeons, …. Neben dem Beispiel der Mentoring-FAQ hier auf der Website wurde auch das Glossar angesprochen, das […]
Liebe Annabelle, das ist es, was ich gesucht habe. Denn Medizinwissen kann einfach erklärt werden. Und wer es genauer wissen will, klickt auf das Accordion.
Mit Deinen Erklärungen hoffe ich, meine Artikel straffen zu können, um niemanden zu langweilen, der´s nicht genauer wissen will. Und um mich so darauf vorzubereiten, die alte http://www.drgroh.de modernisieren zu können.
Vielen Dank!
Hui! Perfekt beschrieben und genau dass was ich suche. Danke!