Technologische Neuigkeiten, Bewertungen und Tipps!

So erstellen Sie einen FAQ-Bereich mit Gutenberg

So erstellen Sie einen FAQ-Bereich mit Gutenberg

So erstellen Sie einen FAQ-Bereich mit Gutenberg

Haben Sie eine lange Liste mit häufig gestellten Fragen Ihres Publikums zu Ihrem Produkt oder Ihrer Dienstleistung?

Ein FAQ-Bereich bietet Kunden eine einfache Möglichkeit, Antworten auf ihre wichtigsten Fragen zu erhalten, ohne den Kundendienst kontaktieren zu müssen. In diesem Beitrag zeigen wir Ihnen eine schnelle und einfache Möglichkeit, mit Gutenberg jeder Seite einen stilvollen FAQ-Bereich hinzuzufügen.

Wir nutzen die kostenlose Ultimate Blocks-Plugin für dieses.

Installieren des Ultimate Blocks-Plugins

Das Ultimate Blocks-Plugin ist kostenlos im offiziellen WordPress-Plugin-Verzeichnis erhältlich. Gehen Sie im Backend von WordPress zur Seite „Neues Plugin hinzufügen“ und suchen Sie danach, um es zu installieren.

Alle Blöcke sind standardmäßig aktiviert, daher muss an dieser Stelle nichts weiter eingerichtet werden.

So erstellen Sie mit Gutenberg einen kurzen FAQ-Bereich

Wenn Sie Ihrem FAQ-Bereich nicht viele Fragen hinzufügen möchten (also etwa fünf), ziehen Sie in Erwägung, Ihre Fragen so anzuzeigen, wie sie sind, und sie nicht hinter einem Umschaltelement zu verbergen.

Markieren Sie die Fragen in Fettschrift und fügen Sie die Antworten in eigenen Absätzen ohne Fettschrift hinzu:

Alternativ können Sie den Spaltenblock verwenden, um Ihren FAQ-Bereich noch kürzer zu gestalten. Das 50/50-Layout ist für diesen Ansatz eine geeignete Wahl.

Sie müssen lediglich Absatzblöcke in jede Spalte einfügen und dasselbe tun wie zuvor:

Der Spaltenansatz eignet sich auch hervorragend für FAQ-Abschnitte mit etwa 10 Fragen.

Erstellen eines FAQ-Bereichs mit Ultimate Blocks

Wenn Sie also mit den integrierten Funktionen von Gutenberg einen einfachen FAQ-Bereich erstellen können, warum sollten Sie dann ein Plugin wie Ultimate Blocks verwenden? Die Antwort auf diese Frage ist einfach: Benutzererfahrung.

Wenn Ihr FAQ-Bereich 10 oder mehr Fragen oder sehr lange Antworten enthält, kann es für Ihre Besucher frustrierend sein, sie alle durchzublättern. Bei modernen Blogbeiträgen und Webseiten funktionieren überfliegbare Benutzeroberflächen am besten.

Dies ist die Art von Design, die Sie mit dem Content Toggle-Block von Ultimate Blocks erstellen können.

Beginnen Sie, indem Sie den Block zu Ihrer Seite hinzufügen.

Geben Sie Ihre Frage in das Feld „Paneltitel“ und die Antwort in das weiße Textfeld darunter ein. Ultimate Blocks setzt den Titel standardmäßig nicht in Fettschrift, Sie müssen dies also selbst tun, wenn Sie Ihre Fragen in Fettschrift haben möchten.

Klicken Sie auf die kleine Plus-Schaltfläche + mit einem runden Rand am unteren Rand des Textfelds, um eine weitere Frage und Antwort hinzuzufügen. Dies ist nicht zu verwechseln mit der Plus-Schaltfläche von Gutenberg, die einen quadratischen Rand verwendet.

Sie können jedoch einen Content-Toggle-Block in einen anderen Content-Toggle-Block einbetten, indem Sie auf die Plus-Schaltfläche von Gutenberg klicken, anstatt Text in das Antwortfeld einzufügen.

Fahren Sie fort, bis Sie alle Fragen hinzugefügt haben, die Sie in Ihren FAQ-Bereich aufnehmen möchten.

Anpassen Ihres FAQ-Bereichs

Wenn Sie alle Ihre Fragen hinzugefügt haben, klicken Sie auf eines der Panel-Titelfelder, um das Einstellungspanel für den Inhalts-Umschaltblock zu öffnen.

Klicken Sie auf die Einstellung „Farbschema“ und weisen Sie den folgenden Elementen Farben zu:

  • Container – Ändert den Hintergrund des Paneltitelfelds
  • Titel – Ändert die Farbe des Textes im Feld „Paneltitel“
  • Titellink – Es sollte die Farbe des Textes im Feld „Paneltitel“ ändern, wenn Sie ihm einen Link zuweisen, aber ich habe festgestellt, dass das Plugin beim Testen mit dem Astra-WordPress-Theme die Link-Stile meines Themes nicht überschreiben konnte
  • Umschaltsymbol – Ändert die Farbe des Symbols (standardmäßig ein Auf-/Ab-Pfeil), das rechts neben dem Feld „Paneltitel“ angezeigt wird

Es gibt eine Handvoll Farbvoreinstellungen, Sie können aber auch die Funktion „Benutzerdefinierte Farbe“ verwenden, um diesen Elementen das offizielle Farbschema Ihrer Marke zuzuweisen.

Passen Sie diese Einstellungen an, bis Sie das gewünschte Farbschema erreicht haben. Möglicherweise müssen Sie die Seite als Entwurf speichern und im Frontend in der Vorschau anzeigen, um zu sehen, wie die Stile wirksam werden.

Als Nächstes folgen die Einstellungen für den Anfangsstatus, die sich darauf auswirken, wie der FAQ-Bereich angezeigt wird, wenn der Benutzer die Seite zum ersten Mal lädt. Standardmäßig sind alle Bedienfelder geöffnet. Daher sollten Sie am besten die Optionen „Reduziert“ oder „Nur ein Bedienfeld gleichzeitig anzeigen“ aktivieren, um zu verhindern, dass die Seite beim Laden gestreckt wird.

Dieser Teil ist knifflig, da Sie möglicherweise die Anfangsstatuseinstellungen jedes Panels einzeln bearbeiten müssen, damit der FAQ-Bereich richtig funktioniert. Wenn Sie möchten, dass das vorherige Panel ausgeblendet wird, wenn der Benutzer ein neues öffnet, stellen Sie grundsätzlich sicher, dass für jedes Panel die Option „Nur ein Panel gleichzeitig anzeigen“ aktiviert und die Option „Ausgeblendet“ deaktiviert ist.

Es gibt auch Rahmen- und Symboloptionen, mit denen Sie herumspielen können. Wenn alles gesagt und getan ist, sollte es ungefähr so ​​aussehen:

Aktivieren Sie abschließend die Option „FAQ-Schema“. Dies verbessert das Ranking Ihrer Seite in Suchmaschinen, da Google nun FAQs in seinen Suchergebnissen anzeigt.

Alternativen zu Ultimate Blocks

Ultimate Blocks bietet eine schnelle und einfache Möglichkeit, FAQ-Abschnitte in Beiträge und Seiten einzufügen, und zwar auf eine Weise, die gut aussieht und SEO-freundlich ist.

Wenn Sie nach einem alternativen Block-Plugin suchen, das FAQ-Blöcke bereitstellt, empfehle ich Ihnen, sich Folgendes anzusehen: Kadence-Blöcke.

Wenn Sie einen anderen Weg bevorzugen, können Sie genauso einfach die integrierten Funktionen von Gutenberg verwenden, um Ihren eigenen FAQ-Bereich zu erstellen, oder ein spezielles FAQ-WordPress-Plugin verwenden. Sie können eine Menge davon finden, indem Sie das WordPress-Plugin-Repository durchsuchen.

Der Ranking-Mathe-SEO Das Plugin hat auch einen FAQ-Block für Gutenberg integriert.

Your Header Sidebar area is currently empty. Hurry up and add some widgets.