Hinzufügen von Akkordeons im WordPress-Block-Editor

Hinzufügen von Akkordeons im WordPress-Block-Editor

Ein Akkordeon ist ein umschaltbares Layout-Element, das Inhalte ein- und ausblendet, wenn sie angeklickt werden. Sie sehen eine Überschrift, klicken darauf, und der Rest des Inhalts wird nach unten geschoben. Klicken Sie erneut darauf und es wird ausgeblendet. Es ist wie ein Dropdown-Element, aber für Inhalte anstelle von Menüs.

Was passiert nun, wenn Sie Akkordeons richtig einsetzen? Ihr Inhalt wird leichter zu erkunden sein, die Nutzer bleiben konzentriert, die mobile Navigation verbessert sich und die Suchmaschinen können Sie mit einer besseren Sichtbarkeit belohnen. Wenn Sie alles richtig machen, funktionieren sie wie ein Inhaltsverzeichnis, das Fragen beantwortet, bevor die Nutzer sie überhaupt stellen.

Dieser Leitfaden zeigt Ihnen, wie Sie Akkordeons in WordPress mit Hilfe von editorfreundlichen Tools implementieren, die den Prozess einfach und sauber halten, ohne dass Sie programmieren müssen.


Akkordeons in WordPress hinzufügen

Es gibt mehr als eine Möglichkeit, Akkordeons in WordPress hinzuzufügen, aber nicht alle davon sind im Block-Editor einfach zu verwenden. In den nächsten Abschnitten beginnen wir mit einer einfachen Methode mit einem integrierten Block und gehen dann zu einer flexibleren Option mit einem Plugin über.

Methode 1: Verwendung des Native Details Blocks

Der einfachste Weg, ein Akkordeon in WordPress zu erstellen, ist die Verwendung der eingebauten Details blockieren. Schauen wir mal, wie es funktioniert.

Schritt 1: Hinzufügen des Details-Blocks

Öffnen Sie Ihren Beitrag oder Ihre Seite im Block-Editor. Klicken Sie auf das Pluszeichen (+), suchen Sie nach Details und fügen Sie den Block ein.

Den Details-Block hinzufügen

Schritt 2: Titel und Inhalt hinzufügen

Geben Sie den Titel Ihres Akkordeons in den Platzhalter "Zusammenfassung schreiben" ein. Klicken Sie dann auf das Pfeilsymbol daneben, um den Abschnitt zu erweitern. Nach dem Erweitern wird darunter ein Inhaltsbereich angezeigt, in dem Sie Text, Bilder, Listen oder andere Blöcke hinzufügen können.

Schritt 3: Zusätzliche Toggles hinzufügen

Um weitere Akkordeon-Elemente hinzuzufügen, wiederholen Sie den gleichen Vorgang, indem Sie neue Details-Blöcke einfügen. Für ein verschachteltes Layout erweitern Sie den Inhaltsbereich eines vorhandenen Details-Blocks, klicken auf das Plus-Symbol (+) darin und fügen einen weiteren Details-Block hinzu.

Diese Methode ist perfekt für schnelle FAQs oder minimale Setups. Denken Sie aber daran, dass sie nur grundlegende Gestaltungsmöglichkeiten bietet und keine erweiterten Designoptionen umfasst.


Methode 2: Verwendung des Ultimate Blocks Plugin

Wenn Sie mehr Stylingoptionen und eine bessere Kontrolle über Ihr Akkordeon wünschen, können Sie die Ultimative Blöcke Plugin ist eine gute Wahl. Es bietet einen Content Toggle Block, der perfekt im Block Editor funktioniert.

Schritt 1: Fügen Sie das Plugin zu Ihrer Website hinzu

Rufen Sie in Ihrem WordPress-Dashboard das Menü Plugins auf und klicken Sie auf Neu hinzufügen. Geben Sie in der Suchleiste Ultimate Blocks ein und klicken Sie dann auf der Plugin-Karte auf Jetzt installieren. Sobald die Installation abgeschlossen ist, aktivieren Sie es, damit die neuen Blöcke im Editor verfügbar sind.

Hinzufügen von Ultimate Blocks zu Ihrer Website

Schritt 2: Einfügen des Content Toggle Blocks

Öffnen Sie die Seite oder den Beitrag, auf der/dem Sie das Akkordeon haben möchten. Klicken Sie auf das Pluszeichen (+), suchen Sie nach Content Toggle und fügen Sie es hinzu. Dieser Block erstellt einen erweiterbaren Abschnitt mit einem Titel und einem Inhaltsbereich.

Einfügen des Content Toggle Blocks

Schritt 3: Titel und Inhalt hinzufügen

Geben Sie den Titel des Akkordeons in das Beschriftungsfeld ein und fügen Sie dann den Inhalt darunter ein. Sie können jede Art von Block innerhalb des Toggles einfügen, z. B. Text, Bilder, Schaltflächen, Listen oder sogar einen weiteren Content Toggle-Block innerhalb des Inhaltsbereichs, um ein verschachteltes Akkordeon zu erstellen. 

Titel und Inhalt hinzufügen

Um weitere Bereiche hinzuzufügen, klicken Sie einfach auf das (+)-Symbol, wenn Sie den Mauszeiger über die vorhandenen Bereiche bewegen. Um einen Bereich zu entfernen, gehen Sie genauso vor, nur dass Sie statt auf das (+)-Symbol auf das (x)-Symbol in der oberen rechten Ecke klicken. 

Weitere Panels hinzufügen

Schritt 4: Anpassen des Akkordeons

Im Einstellungsbereich des Blocks auf der rechten Seite können Sie den Titel des Bereichs steuern, den Umschaltstatus anpassen, das FAQ-Schema aktivieren, eine integrierte Suchoption für Ihr Akkordeon hinzufügen, ein Statussymbol auswählen, Text- oder Hintergrundfarben ändern und vieles mehr. 

Anpassen des Akkordeons
Anpassen des Akkordeons

Wenn Sie es für FAQs verwenden, können Sie in den Einstellungen auch die FAQ-Schema-Auszeichnung aktivieren, damit sich Ihre Inhalte für Rich Snippets in der Google-Suche qualifizieren.

Schema einschalten

Schlussfolgerung

Wenn es Ihr Ziel ist, lange Inhalte leichter zu überblicken, bieten Akkordeons eine saubere Lösung. Sie haben zwei Ansätze kennengelernt: Der systemeigene Details-Block bietet eine leichtgewichtige Einrichtung ohne zusätzliche Plugins und schnelles Laden. Der Content Toggle-Block von Ultimate Blocks bietet erweiterte Styling-Steuerelemente, verschachtelte Bereiche und ein integriertes FAQ-Schema. Beide Methoden verbessern die mobile Benutzerfreundlichkeit und das SEO-Potenzial. Wählen Sie den Ansatz, der am besten zu Ihrem Workflow und Ihren inhaltlichen Anforderungen passt.



Das Tischberg-Team

Erstellen Sie schöne WordPress-Tabellen - visuell!

Verabschieden Sie sich von langweiligen Tabellen. Mit Tableberg können Sie reaktionsschnelle, interaktive Tabellen mit dem Block-Editor erstellen - ganz ohne Code.

Tableberg Schnittstelle
🛒 Neu: Erstellen Sie schöne WooCommerce Produkttabellen!
Dies ist der Standardtext für die Benachrichtigungsleiste