So fügen Sie ein Akkordeon in WordPress hinzu (Schritt-für-Schritt-Anleitung)

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

Akkordeons machen Websites leichter durchsuchbar und verbessern die Benutzererfahrung. Sie helfen auch, Unordnung zu reduzieren und übermäßig lange Webseiten zu verkürzen.

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

Eine großartige Sache bei der Verwendung von WordPress ist, dass Sie mit einem einfachen Plugin erstaunliche Funktionen wie Akkordeons zu Ihrer Website hinzufügen können. In dieser Anleitung verwenden wir Heroic FAQs, um mit nur wenigen Klicks einen Akkordeon-Bereich zu erstellen.

Wir führen Sie Schritt für Schritt durch den Prozess. Legen wir los!

Was ist ein Akkordeon?

Akkordeons sind eine sehr nützliche Designstrategie im Webdesign, um mehrere Inhaltsbereiche an einem Ort zu organisieren. Einfach ausgedrückt ermöglichen Akkordeons die Erstellung eines Bereichs mit kollabierbaren Tabs in Ihren Seitendesigns, um viele Inhalte in einem Bereich zu verpacken.

Wenn Sie beispielsweise einen Bereich mit häufig gestellten Fragen (FAQs) erstellen, können Sie ein Akkordeon verwenden, um die Fragen und Antworten übersichtlich organisieren. Auf diese Weise können Sie nur die Fragen anzeigen und die Antworten in einem zusammenklappbaren Akkordeon ausblenden. Dies spart Platz im Seitendesign und bietet den Benutzern eine einfachere Möglichkeit, Antworten zu erkunden.

So funktioniert ein Akkordeon:

Früher wurden Websites auch mit horizontalen Registerkarten-Akkordeons gestaltet. Aber sie werden heute selten in Webdesign verwendet.

Unterschied zwischen Akkordeon und Umschalter

Die meisten Leute verwechseln Akkordeons oft mit Toggles. Obwohl sie ähnlich aussehen, haben sie ein anderes Verhalten.

Wenn ein Benutzer beispielsweise auf eine Überschrift in einem Akkordeon klickt, wird der Inhalt in seiner Registerkarte angezeigt. Aber wenn sie auf eine andere Überschrift klicken, schließt sich die vorherige Registerkarte, um die neue anzuzeigen.

Mit Toggles können Sie dieses Verhalten ändern, um die Registerkarten geöffnet zu lassen. Und Benutzer können Registerkarten manuell schließen.

Kurz gesagt, Akkordeons halten immer nur eine Registerkarte gleichzeitig geöffnet. Toggles können so angepasst werden, dass mehrere Registerkarten gleichzeitig geöffnet sind.

Sie müssen sich keine Sorgen um diese beiden Optionen machen, da das von uns verwendete Plugin zum Einrichten von Akkordeons in WordPress beide Optionen unterstützt.

Warum ein Akkordeon verwenden?

Es gibt viele Vorteile bei der Verwendung von Akkordeons. Hier sind nur einige Gründe, sie auf Ihrer Website zu verwenden.

Viel Platz sparen

Haben Sie jemals eine lange Webseite besucht, die Sie dazu zwingt, ewig nach unten zu scrollen, um die gesuchten Inhalte zu finden? Glücklicherweise lösen Akkordeons dieses Problem.

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

Bessere Inhaltsorganisation

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

Überall einbetten

Akkordeons können überall auf Ihrer Website eingebettet werden. Sie können beispielsweise FAQ-Akkordeon-Bereiche auf Ihrer Preisseite oder einer Produkt-Landingpage hinzufügen. Dies ermöglicht es Ihnen, häufig gestellte Fragen zu Ihrem Produkt zu beantworten, ohne zu viel Platz einzunehmen.

Seitengröße reduzieren

Die Größe Ihrer Webseiten spielt eine Schlüsselrolle für die Ladezeit einer Website. Wie Sie wissen, ist die Ladezeit einer der Hauptrankingfaktoren, die von Google verwendet werden.

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

So fügen Sie ein Akkordeon in WordPress hinzu

Für dieses Tutorial verwenden wir das Heroic FAQs WordPress-Plugin. Nicht nur, weil es von unserem eigenen Team erfahrener Entwickler entwickelt wurde. Hauptsächlich, weil es ein Plugin ist, das viele Funktionen bietet. Und mehr Wert bietet als andere Plugins.

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

Nun kommen wir zum praktischen Tutorial.

Schritt 1: Heroic FAQs herunterladen und installieren

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

Melden Sie sich dann in Ihrem WordPress-Admin-Dashboard an. Gehen Sie zur Seite Plugins >> Neu hinzufügen und wählen Sie die Option Hochladen. Durchsuchen Sie Ihren Computer, um die heruntergeladene ZIP-Datei mit dem Heroic FAQs-Plugin zu finden und installieren Sie es.

Stellen Sie nach Abschluss der Installation sicher, dass Sie Ihr Plugin mit Ihrem Lizenzschlüssel aktivieren.

Schritt 2: Eine FAQ-Gruppe erstellen

Das Heroic FAQs-Plugin führt Sie dann durch den anfänglichen Einrichtungsprozess. Befolgen Sie einfach dessen Anweisungen.

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

Dann können Sie damit beginnen, FAQs zu dieser Gruppe hinzuzufügen. Dies können entweder Fragen und Antworten sein. Oder Details zu Produktmerkmalen. Oder was auch immer Sie möchten.

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

Schritt 3: Das Akkordeon einbetten

Jetzt können Sie Ihre FAQ-Gruppe auf einer Seite oder einem Beitrag einbetten. Mit dem neuen Gutenberg-Blockeditor ist es viel einfacher, Akkordeons mit Heroic FAQs hinzuzufügen.

Erstellen Sie eine neue Seite oder bearbeiten Sie eine vorhandene. Fügen Sie einen Neuen Block hinzu und suchen Sie nach dem Heroic FAQ Inhaltsblock.

Im Heroic FAQ-Blockfenster auf der linken Seite können Sie die FAQ-Gruppe auswählen, die Sie auf der Seite anzeigen möchten. Sowie den Stil des Akkordeon-Designs ändern.

Schritt 4: Zwischen Akkordeon und Umschalter wechseln

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

Schritt 5: Das Akkordeon in der Vorschau anzeigen

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

So fügen Sie kostenlos ein Akkordeon in WordPress hinzu

Um ein Akkordeon (oder zumindest ein Toggle) in WordPress hinzuzufügen, müssen Sie kein Plugin installieren.

WordPress verfügt über einen integrierten Block namens „Details“, mit dem Sie einen Akkordeon-ähnlichen (Toggle-)Inhalt erstellen können. Gestalten Sie ihn mit benutzerdefiniertem CSS und Sie haben einen Block, um FAQs zu erstellen.

Es gibt auch viele kostenlose WordPress-Akkordeon-Plugins. Die Funktionalität und Anpassungsmöglichkeiten sind jedoch im Vergleich zu Heroic FAQ begrenzt, und die Akkordeon-Funktionalität kann zu überladenen Seiten und niedrigen Seitengeschwindigkeitswerten führen.

Wählen Sie also die richtige Lösung!

Zusammenfassend

Es gibt viele verschiedene Möglichkeiten, wie Sie Akkordeons nutzen können, um das Benutzerengagement zu steigern und den Kunden mehr Wert 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 gerne unseren Blog nach weiteren Tipps durchsuchen. Sie werden unseren Vergleich der besten Wissensdatenbank-Software sehr hilfreich finden.