Eine Wissensdatenbank erstellen.

DXPR Builder lernenWebsite verwaltenDrupal-Funktionen verbinden

Hier bauen Sie die Startseite eines Hilfebereichs: einen Navyblau-Header, drei Kategoriecards mit je einem Icon, zwei Listen beliebter Artikel und eine Supportaufforderung. Nutzen Sie sie, wenn Ihre Hilfe über viele Artikel verstreut ist. Für eine kurze Liste von Fragen und Antworten folgen Sie stattdessen Eine FAQ-Seite erstellen.

Das Video baut den Hilfebereich eines Softwareprodukts.

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 landen oben in ihrem Abschnitt oder ihrer Spalte. Fügen Sie die Elemente einer Spalte in umgekehrter Reihenfolge 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. Wählen Sie im Panel Style das Navyblau als Background und Weiß als Font color und klicken Sie dann auf Save.
  3. Klicken Sie auf + auf dem Abschnitt und wählen Sie Text. Geben Sie „Hilfebereich“ als Heading 2 ein und fügen Sie „Wie können wir Ihnen heute helfen?“ hinzu. Setzen Sie Font color im Panel Style auf Weiß und klicken Sie 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: Kategorien hinzufügen

  1. Fahren Sie über den Abschnitt und klicken Sie auf Add Section Below. Geben Sie dem neuen Abschnitt die Klasse Align text center.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Row. Klicken Sie auf ihr Grid-Icon (Column layout), wählen Sie das Preset 1/3 + 1/3 + 1/3 und klicken Sie auf Save.
  3. Klicken Sie in der ersten Spalte auf + und wählen Sie Card. Öffnen Sie ihr More > Settings, setzen Sie den Header auf den Kategorienamen und den Title auf die Artikelzahl, und klicken Sie dann auf Save.
  4. Klicken Sie in derselben Spalte auf + und wählen Sie Icon; es landet über der Card. Wählen Sie das Set Font Awesome Free Solid, suchen Sie nach rocket und klicken Sie auf das Icon. Setzen Sie Size auf Extra Large (2x) und klicken Sie auf Save.
  5. Wiederholen Sie das für die zweite Spalte mit credit-card und die dritte mit screwdriver-wrench.
  1. Fügen Sie mit Add Section Below einen dritten Abschnitt hinzu. Öffnen Sie sein More > Settings, wählen Sie ein hellgraues Background im Panel Style und klicken Sie auf Save.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Row; sie kommt mit zwei gleichen Spalten.
  3. Klicken Sie in jeder Spalte auf + und wählen Sie Text. Geben Sie drei Artikeltitel ein, einen pro Zeile, und klicken Sie auf Save.
  4. Klicken Sie auf + auf dem Abschnitt und wählen Sie Text; er landet über der Zeile. Geben Sie „Beliebte Artikel“ als Heading 2 ein und klicken Sie auf Save.

Schritt 4: Die Supportaufforderung hinzufügen

  1. Fügen Sie einen vierten Abschnitt hinzu und öffnen Sie sein More > Settings. Wählen Sie Align text center unter HTML classes, dann das violette Background und Weiß als Font color im Panel Style. Klicken Sie auf Save.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Button. Setzen Sie Title auf „Support kontaktieren“, Link auf /support, Type auf Light 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 „Finden Sie nicht, was Sie brauchen?“ als Heading 2 ein und fügen Sie eine Zeile hinzu. Setzen Sie Font color auf Weiß und klicken Sie auf Save.

Schritt 5: 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:

  • Suchfeld: Schalten Sie das Core-Modul Search unter Extend ein. Klicken Sie auf + im Header-Abschnitt, öffnen Sie den Tab Drupal Blocks und wählen Sie Block: Forms: Search form. Besucher landen auf /search/node.
  • Klickbare Cards: Fügen Sie zuerst ein Link-Element in der Spalte hinzu und setzen Sie seinen Link auf die Kategorieseite. Fügen Sie dann die Card darin hinzu.
  • Artikellinks: Wählen Sie jeden Titel in den Listen aus und verlinken Sie ihn mit dem Link-Button in der Symbolleiste.
  • Weitere Kategorien: Fügen Sie eine zweite Row mit demselben Preset hinzu. Übliche sind Den Editor nutzen, Vorlagen und Design sowie API und Entwicklung.

Was Sie sehen

Der Navyblau-Header begrüßt Besucher mit „Hilfebereich“ in Weiß. Es folgen drei zentrierte Kategorien, jede ein Icon über einer Card mit ihrem Namen und ihrer Artikelzahl. Ein graues Band listet sechs beliebte Artikel in zwei Spalten, und ein violettes Band bietet Support kontaktieren.

Wenn Sie die Seite nicht wie gezeigt sehen

  • Eine Card zeigt nach dem Hinzufügen keinen Einstellungsdialog. Cards öffnen sich leer, ohne Dialog. Fahren Sie über die Card und öffnen Sie More > Settings, um Header und Title auszufüllen.
  • Ein Icon sitzt unter seiner Card. Das Icon kam vor der Card hinein, und neue Elemente landen oben in ihrer Spalte. Ziehen Sie das Icon am Zieh-Anfasser in seiner Kontrollleiste über die Card.
  • Die Überschrift bleibt dunkel auf Navyblau. Das Text-Element hat keine eigene Font color. Öffnen Sie sein Panel Style und setzen Sie Font color auf Weiß.
  • 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?

  • Drupal-Blöcke für andere Blöcke, die Sie einfügen können
  • FAQ-Seite für aufklappbare Antworten auf einer Kategorieseite
  • Link-Element für den klickbaren Rahmen um eine Card