Technologische Neuigkeiten, Bewertungen und Tipps!

So erstellen Sie einen FAQ-Bereich mit Gutenberg

Der folgende Artikel hilft Ihnen dabei: So erstellen Sie einen FAQ-Bereich mit Gutenberg

Haben Sie eine lange Liste häufig gestellter Fragen Ihrer Zielgruppe 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, jeder Seite mit Gutenberg einen stilvollen FAQ-Bereich hinzuzufügen.

Wir werden das kostenlose verwenden Ultimate Blocks-Plugin für dieses.

Installieren des Ultimate Blocks-Plugins

Das Ultimate Blocks-Plugin ist kostenlos über das offizielle 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, sodass an dieser Stelle nichts weiter eingerichtet werden muss.

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, sollten Sie erwägen, Ihre Fragen so anzuzeigen, wie sie sind, ohne sie hinter einem Umschaltelement zu verstecken.

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

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

Es geht lediglich darum, in jeder Spalte Absatzblöcke zu platzieren und das Gleiche wie zuvor zu tun:

Der Spaltenansatz eignet sich auch hervorragend für FAQ-Abschnitte mit einer Länge von 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, durch alle Fragen zu scrollen. Wenn es um moderne Blogbeiträge und Webseiten geht, funktionieren scanbare Benutzeroberflächen am besten.

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

Fügen Sie zunächst den Block zu Ihrer Seite hinzu.

Platzieren Sie Ihre Frage im Feld „Panel-Titel“ und die Antwort im weißen Textfeld darunter. Ultimate Blocks stellt den Titel standardmäßig nicht in Fettschrift dar. 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 kreisförmigem Rand am unteren Rand des Textfelds, um eine weitere Frage und Antwort hinzuzufügen. Dies ist nicht mit der Plus-Schaltfläche von Gutenberg zu verwechseln, die einen quadratischen Rand verwendet.

Sie können jedoch einen Content Toggle-Block in einem anderen Content Toggle-Block verschachteln, indem Sie auf Gutenbergs Plus-Schaltfläche 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 Block „Content Toggle“ zu öffnen.

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

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

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

Fahren Sie fort und passen Sie diese Einstellungen an, bis Sie Ihr gewünschtes 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. Aktivieren Sie daher am besten die Optionen „Reduziert“ oder „Nur jeweils ein Bedienfeld anzeigen“, um zu verhindern, dass die Seite beim Laden gestreckt wird.

Dieser Teil ist schwierig, da Sie möglicherweise die Einstellungen für den Anfangsstatus jedes Panels einzeln bearbeiten müssen, damit der FAQ-Bereich ordnungsgemäß 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 „Reduziert“ deaktiviert ist.

Es gibt auch Rahmen- und Symboloptionen, mit denen Sie herumspielen können. Wenn alles gesagt und getan ist, sollten Sie etwas Ähnliches haben:

Aktivieren Sie abschließend die Option „FAQ-Schema“. Dies verbessert das Ranking Ihrer Seite in Suchmaschinen, da Google jetzt in seinen Suchergebnissen häufig gestellte Fragen (FAQs) anzeigt.

Alternativen zu Ultimate Blocks

Ultimate Blocks bietet eine schnelle und einfache Möglichkeit, FAQ-Abschnitte in Beiträgen und Seiten einzufügen, und zwar auf eine Art und Weise, die gut aussieht und SEO-freundlich ist. Wenn Sie einen anderen Weg bevorzugen, können Sie genauso einfach die integrierten Funktionen von Gutenberg nutzen, um Ihren eigenen FAQ-Bereich zu erstellen, oder ein spezielles FAQ-WordPress-Plugin verwenden.

Heroic FAQs ist eine bemerkenswerte Option, die einige mehr Funktionen bietet als der Content Toggle-Block von Ultimate Blocks. Der Rank Math SEO Das Plugin verfügt außerdem über einen integrierten FAQ-Block für Gutenberg.