Eine FAQ-Seite erstellen.

DXPR Builder lernenSeiten erstellenTutorial folgen

Hier bauen Sie eine FAQ-Seite, auf der sich jede Frage per Klick öffnet und schließt. Am Ende haben Sie eine zentrierte Überschrift, eine Kategorie von Fragen in einem Collapse-Panel und eine Kontaktaufforderung. Nutzen Sie sie für eine kurze Liste häufiger Fragen. Für Hilfsartikel nach Themen gruppiert folgen Sie stattdessen Eine Wissensdatenbank erstellen.

Das Video baut die FAQ einer Arztpraxis.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Die Seite ist im Builder geöffnet. Für eine neue gehen Sie zu Content > Add content > Landing Page (/node/add/landing_page) und klicken Sie auf Save.
  • Neue Elemente und neue Toggles landen oben in ihrem Container. Fügen Sie Fragen von der letzten zur ersten hinzu oder ziehen Sie sie danach an ihren Platz.

Schritt 1: Den Header hinzufügen

  1. Klicken Sie auf der leeren Seite auf Add Elements und wählen Sie Section aus dem Tab Layout.
  2. Fahren Sie über den Abschnitt und öffnen Sie More > Settings. Wählen Sie unter HTML classes Align text center und klicken Sie dann auf Save.
  3. Klicken Sie auf + auf dem Abschnitt und wählen Sie Text aus dem Tab Content.
  4. Geben Sie „Häufig gestellte Fragen“ ein und setzen Sie es in der Symbolleiste auf Heading 2. Fügen Sie eine Zeile hinzu, die sagt, was die Seite abdeckt, und klicken Sie dann auf Save. Das Theme gibt den Seitentitel als Heading 1 der Seite aus. Um stattdessen diese Überschrift zur Heading 1 zu machen, siehe SEO-freundliche Seiten erstellen.

Schritt 2: Eine Kategorie mit Fragen hinzufügen

  1. Fahren Sie über den Abschnitt und klicken Sie auf Add Section Below.
  2. Klicken Sie auf + auf dem neuen Abschnitt und wählen Sie Collapse panel aus dem Tab Layout; es kommt mit einem leeren Toggle.
  3. Öffnen Sie More > Settings auf dem Panel. Schalten Sie Collapse ein, sodass jede Frage geschlossen startet, setzen Sie Expand icon auf + und klicken Sie dann auf Save.
  4. Öffnen Sie More > Settings auf dem Toggle, geben Sie die Frage als seinen Toggle title ein und klicken Sie auf Save. Neue Toggles landen oben, also beginnen Sie mit der letzten Frage.
  5. Klicken Sie auf die Frage, um ihren Inhalt zu öffnen, klicken Sie auf + darin und wählen Sie Text. Geben Sie die Antwort ein und klicken Sie auf Save.
  6. Klicken Sie auf Add toggle auf dem Panel und wiederholen Sie die Schritte 4 und 5 für jede Frage, rückwärts bis zur ersten.
  7. Klicken Sie noch einmal auf + auf dem Abschnitt und wählen Sie Text; er landet über dem Panel. Geben Sie den Kategorienamen als Heading 2 ein und klicken Sie auf Save.

Zielen Sie auf 3 bis 6 Fragen pro Kategorie.

Schritt 3: Eine Kontaktaufforderung hinzufügen

  1. Fügen Sie mit Add Section Below einen dritten Abschnitt hinzu und öffnen Sie sein More > Settings. Wählen Sie Align text center unter HTML classes und ein hellgraues Background im Panel Style. Klicken Sie auf Save.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Button. Setzen Sie Title auf „Kontakt aufnehmen“, Link auf /contact, Type auf Primary und Size auf Large, und klicken Sie dann auf Save.
  3. Klicken Sie erneut auf + und wählen Sie Text; er landet über dem Button. Geben Sie „Haben Sie noch Fragen?“ als Heading 2 ein, fügen Sie eine Zeile hinzu, die auf Ihr Team verweist, und klicken Sie dann auf Save.

Schritt 4: Speichern und Vorschau

  1. Klicken Sie in der Builder-Symbolleiste auf Save.
  2. Öffnen Sie das Ansichtsmenü (das Augen-Icon) und wählen Sie Preview.

Weiter gehen

Nicht im Video gezeigt:

  • Weitere Kategorien: Wiederholen Sie Schritt 2 für jede Kategorie, je ein Abschnitt und ein Collapse-Panel. Übliche sind Einstieg, Konto und Abrechnung, Funktionen, Fehlerbehebung sowie Datenschutz und Sicherheit.
  • Tabs statt Abschnitte: Fügen Sie bei wenigen Kategorien ein Tabs-Element aus dem Tab Layout hinzu, einen Tab pro Kategorie, und platzieren Sie ein Collapse-Panel in jedem Tab. Jede Kategorie bleibt ohne Scrollen erreichbar.

SEO-Tipps

  • Nutzen Sie die echte Frage als Toggle title
  • Antworten Sie im ersten Satz und fügen Sie dann Details hinzu
  • Verlinken Sie Antworten auf die Seite, auf die sie sich beziehen
  • Fügen Sie strukturierte FAQ-Daten über Ihr Theme oder ein Drupal-Modul hinzu

Was Sie sehen

Die Überschrift sitzt zentriert oben. Unter der Kategorieüberschrift ist jede Frage geschlossen und zeigt ein +. Ein Klick öffnet die Antwort, und das Schlussband bietet den Button Kontakt aufnehmen.

Wenn Sie die Seite nicht wie gezeigt sehen

  • Alle Fragen starten offen. Collapse ist auf dem Collapse-Panel aus. Öffnen Sie das More > Settings des Panels, schalten Sie Collapse ein und klicken Sie auf Save.
  • Es gibt kein + in einem Toggle. Der Inhalt des Toggles ist geschlossen. Klicken Sie auf die Frage, um ihn zu öffnen, und klicken Sie dann auf + darin.
  • Die Fragen erscheinen in der falschen Reihenfolge. Neue Toggles landen oben im Panel. Ziehen Sie jeden Toggle am Zieh-Anfasser in seiner Kontrollleiste an seinen Platz.
  • Ihre Änderungen sind nach einem Neuladen weg. Sie haben die Seite verlassen, bevor Sie auf Save in der Builder-Symbolleiste geklickt haben. Wenn Save einen Fehler zeigt, siehe Änderungen werden nicht gespeichert.

Wie geht es weiter?