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«
- Beispiel Nr. 1: Die Mentoring-FAQ
- Beispiel Nr. 2: Das WP-Lexikon
- Andere Akkordeon-Blöcke
- Die beliebtesten Beiträge auf dieser Website
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 ungestalteten 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
Praktische Beispiele für den Einsatz des Details-Blocks finden Sie weiter unten.
Beispiel Nr. 1: Die Mentoring-FAQ
Ein kostenloses Plugin, das komplett dieselben Funktionen wie Accordion Items bietet, habe ich bisher jedenfalls leider nicht wieder finden können.
Deshalb habe ich zum Beispiel die Mentoring-FAQ auf meiner Website neu durchdenken und umbauen müssen. Sie basiert jetzt auf dem Details-Block von WordPress und sieht so aus:
Dazu gehört dieser Zusatz an individuellem CSS:
Beispiel Nr. 2: Das WP-Lexikon
Das von Peter erstellte WP-Lexikon basiert ebenfalls auf dem Details-Block von WordPress:
Die Umsetzung des WP-Lexikons, von der Block-Struktur über das CSS zur Gestaltung bis zum JavaScript für das Verhalten, wurde im folgenden Beitrag ausführlich dokumentiert:
Mit ein bisschen zusätzlicher Arbeit ist der Details-Block recht vielseitig einsetzbar.
Andere Akkordeon-Blöcke
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 beliebtesten Beiträge auf dieser Website
Diese Liste wird manuell gepflegt und immer wieder mal aktualisiert:
Kommentare
3 Antworten zu „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!