Wie man ein Akkordeon in WordPress hinzufügt (Schritt-für-Schritt-Anleitung)

Entwerfen Sie eine Landing Page, eine Produktseite oder eine FAQ-Seite auf Ihrer WordPress-Website? Dann sollten Sie Akkordeons in Ihren Seitendesigns verwenden.

Akkordeons machen Websites übersichtlicher und verbessern die Benutzerfreundlichkeit. Sie tragen auch dazu bei, die Unübersichtlichkeit zu verringern und überlange Webseiten zu verkürzen.

In dieser Schritt-für-Schritt-Anleitung zeigen wir Ihnen, wie Sie einen Akkordeon-Bereich auf Ihrer Website einrichten können, ohne eine einzige Zeile Code schreiben zu müssen.

Das Tolle an WordPress ist, dass man mit einem einfachen Plugin tolle Funktionen wie Akkordeons zu seiner Website hinzufügen kann. In dieser Anleitung verwenden wir Heroic FAQs um einen Akkordeonbereich mit nur wenigen Klicks zu erstellen.

Wir werden Sie Schritt für Schritt durch den Prozess führen. Fangen wir an!

Was ist ein Akkordeon?

Akkordeons sind eine sehr nützliche Designstrategie, die im Webdesign verwendet wird, um mehrere Inhaltsbereiche an einem einzigen Ort zu organisieren. Einfach ausgedrückt, können Sie mit Akkordeons einen Abschnitt mit ausklappbaren Registerkarten in Ihren Seitendesigns erstellen, um viele Inhalte in einen Abschnitt zu packen.

Wenn Sie zum Beispiel einen Bereich für häufig gestellte Fragen (FAQs) erstellen, können Sie ein Akkordeon verwenden, um die Fragen und Antworten übersichtlich zu organisieren. Auf diese Weise können Sie nur die Fragen anzeigen und die Antworten in einem zusammenklappbaren Akkordeon ausblenden. Auf diese Weise können Sie Platz auf der Seite sparen und den Benutzern die Suche nach Antworten erleichtern.

Schauen Sie sich an, wie Tesco Akkordeons verwendet, um seine FAQ-Seite zu organisieren.

Früher gab es auf Websites auch horizontale Akkordeons mit Registerkarten. Aber sie werden heute nur noch selten in Website-Designs verwendet.

Unterschied zwischen Akkordeon und Toggle

Die meisten Menschen verwechseln Akkordeons oft mit Kippschaltern. Auch wenn sie ähnlich aussehen, verhalten sie sich unterschiedlich.

Wenn ein Benutzer beispielsweise auf eine Überschrift in einem Akkordeon klickt, wird der Inhalt auf der entsprechenden Registerkarte angezeigt. Wenn er jedoch auf eine andere Überschrift klickt, wird die vorherige Registerkarte geschlossen, um die neue Registerkarte anzuzeigen.

Mit Toggles können Sie dieses Verhalten ändern, damit die Registerkarten geöffnet bleiben. Und den Nutzern erlauben, Tabs manuell zu schließen.

Kurz gesagt, Akkordeons halten jeweils nur eine Registerkarte offen. Mit Hilfe von Kippschaltern können Sie mehrere gleichzeitig geöffnete Registerkarten anzeigen.

Sie müssen sich über diese beiden Optionen keine Gedanken machen, denn das Plugin, das wir zur Einrichtung von Akkordeons in WordPress verwenden, unterstützt beide Optionen.

Warum ein Akkordeon verwenden?

Die Verwendung von Akkordeons bietet viele Vorteile. Hier sind nur ein paar Gründe, warum Sie sie auf Ihrer Website verwenden sollten.

Sparen Sie jede Menge Platz

Haben Sie jemals eine lange Webseite besucht, die Sie zwingt, ewig nach unten zu scrollen, um den gesuchten Inhalt zu finden? Zum Glück gibt es Akkordeons, die dieses Problem lösen.

Der Hauptvorteil der Verwendung von Akkordeons ist die Möglichkeit, Platz auf Ihrer Website zu sparen. Anstatt extralange Seiten zu erstellen, können Sie alle wichtigen Informationen hinter Registerkarten verstecken. Und die Nutzer können Fragen und Antworten finden, indem sie die Überschriften überfliegen.

Bessere Organisation der Inhalte

Mit Akkordeons können Sie auch Inhalte in einer benutzerfreundlichen Struktur organisieren. Mit Akkordeons können Sie Registerkarten verschachteln, um Inhalte nach Kategorien und Themen zu organisieren. Sie können dies auf der Tesco-FAQ-Seite, die wir Ihnen zuvor gezeigt haben, in Aktion sehen.

Überall einbetten

Akkordeons können überall auf Ihrer Website eingebettet werden. Sie können zum Beispiel FAQ-Akkordeon-Abschnitte auf Ihrer Preisseite oder einer Produkt-Landingpage einfügen. So können Sie häufig gestellte Fragen zu Ihrem Produkt beantworten, ohne zu viel Platz zu beanspruchen.

Seitengröße verkleinern

Die Größe Ihrer Webseiten spielt eine wichtige Rolle für die Ladegeschwindigkeit einer Website. Wie Sie wissen, ist die Ladegeschwindigkeit einer der wichtigsten Rankingfaktoren von Google.

Wenn Sie Akkordeons in WordPress-Websites verwenden, können Sie die Ladegeschwindigkeit Ihrer Website drastisch verbessern, da sie als Widget eingebettet werden können.

So fügen Sie ein Akkordeon mit Heroic FAQs

Für dieses Tutorial verwenden wir das Heroic FAQs WordPress-Plugin. Nicht nur, weil es von unserem eigenen Team aus erfahrenen Entwicklern entwickelt wurde. Sondern vor allem, weil es ein Plugin ist, das eine Menge Funktionen bietet. Und es bietet viel mehr Wert als andere Plugins.

Mit dem Heroic FAQs Plugin können Sie auch einzigartige FAQs und Wissensbereiche für Ihre Website erstellen.

Kommen wir nun zum praktischen Teil des Tutorials.

Schritt 1: Herunterladen und Installieren Heroic FAQs

Zunächst müssen Sie das Plugin Heroic FAQs herunterladen und auf Ihrer WordPress-Website installieren. Sobald Sie das Plugin erworben haben, können Sie es von Ihrem Heroic-Konto-Dashboard herunterladen.

Loggen Sie sich dann in Ihr WordPress Admin-Dashboard ein. Gehen Sie zur Seite Plugins >> Neu hinzufügen und wählen Sie die Option Hochladen. Durchsuchen Sie Ihren Computer nach der heruntergeladenen ZIP-Datei, die das Plugin Heroic FAQs enthält, und installieren Sie es.

Nach Abschluss der Installation müssen Sie Ihr Plugin mit Ihrem Lizenzschlüssel aktivieren.

Schritt 2: Erstellen Sie eine FAQ-Gruppe

Heroic FAQs Plugin führt Sie dann durch den Einrichtungsprozess. Folgen Sie einfach seinen Anweisungen.

Beginnen Sie mit der Erstellung einer FAQ-Gruppe. Hier werden alle Ihre FAQs gruppiert und organisiert.

Dann können Sie beginnen, dieser Gruppe FAQs hinzuzufügen. Dabei kann es sich entweder um Fragen und Antworten handeln. Oder Details über Produkteigenschaften. Oder alles, was Sie wollen.

Denken Sie daran, dass Sie so viele FAQs hinzufügen können, wie Sie möchten.

Schritt 3: Das Akkordeon einbetten

Jetzt können Sie Ihre FAQ-Gruppe in eine Seite oder einen Beitrag einbetten. Mit dem neuen Gutenberg-Block-Editor ist es viel einfacher, Akkordeons mit Heroic FAQs hinzuzufügen.

Erstellen Sie eine neue Seite oder bearbeiten Sie eine bestehende Seite. Fügen Sie einen neuen Block hinzu und suchen Sie nach dem Inhaltsblock " Heroische FAQ ".

Aus dem Heroic FAQ-Block-Panel auf der linken Seite können Sie die FAQ-Gruppe auswählen, die Sie auf der Seite anzeigen möchten. Außerdem können Sie den Stil des Akkordeon-Designs ändern.

Schritt 4: Umschalten zwischen Akkordeon und Toggle

Mit Heroic FAQs können Sie mit einem einzigen Klick zwischen Akkordeon- und Toggle-Optionen wählen.

Schritt 5: Vorschau des Akkordeons

Zeigen Sie eine Vorschau der Seite an, um zu sehen, wie das Akkordeon aussieht. Dann können Sie auf Veröffentlichen klicken, um die Änderungen zu speichern.

Fazit

Es gibt viele verschiedene Möglichkeiten, wie Sie Akkordeons einsetzen können, um die Benutzeraktivität zu steigern und Ihren Kunden einen Mehrwert zu bieten. Nutzen Sie unseren Leitfaden als Sprungbrett, um Ihre eigenen, einzigartigen Ansätze für die Verwendung von Akkordeons auf andere nützliche Weise zu finden.

In der Zwischenzeit können Sie in unserem Blog nach weiteren Tipps suchen. Unser Vergleich der besten Wissensdatenbank-Software wird Ihnen dabei helfen.