Eine Kontaktseite erstellen.

DXPR Builder lernenSeiten erstellenTutorial folgen

Hier bauen Sie eine Kontaktseite: eine Karte Ihrer Adresse, drei Kontaktwege mit je einem Icon und ein Kontaktformular. Nutzen Sie sie für die Seite, die Ihr Menü als „Kontakt“ verlinkt. Um nur ein Formular in eine andere Seite zu setzen, folgen Sie stattdessen Formulare zu Seiten hinzufügen.

Das Video baut die Kontaktseite einer Stadtverwaltung.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Ihr Kontaktformular existiert als Block, etwa ein offenes Webform, das mit dem Webform-Modul erstellt wurde.
  • 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: Die Karte hinzufügen

  1. Klicken Sie auf der leeren Seite auf Add Elements und wählen Sie Section aus dem Tab Layout.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Map aus dem Tab Content.
  3. Geben Sie Ihre Address ein, setzen Sie Map height auf 400 und klicken Sie auf Save.

Die Karte bettet Google Maps zentriert auf der Adresse ein.

Schritt 2: Kontaktdetails hinzufügen

  1. Fahren Sie über den Abschnitt und klicken Sie auf Add Section Below. Öffnen Sie das More > Settings des neuen Abschnitts, wählen Sie Align text center unter HTML classes, dann ein hellgraues Background im Panel Style. Klicken Sie auf Save.
  2. Klicken Sie auf + auf dem Abschnitt und wählen Sie Row; sie kommt mit zwei gleichen Spalten. 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 Text. Geben Sie „Besuchen Sie uns“ als Heading 3 ein, fügen Sie Adresse und Öffnungszeiten hinzu und klicken Sie auf Save.
  4. Klicken Sie in derselben Spalte auf + und wählen Sie Icon; es landet über dem Text. Wählen Sie das Set Font Awesome Free Solid, suchen Sie nach location-dot und klicken Sie auf das Icon. Setzen Sie Size auf Extra Large (2x) und klicken Sie auf Save.
  5. Wiederholen Sie das in der zweiten Spalte mit „Rufen Sie uns an“ und dem phone-Icon und in der dritten mit „Schreiben Sie uns“ und dem envelope-Icon.

Wählen Sie dieselbe Size für alle drei Icons, sodass die Zeile gerade steht.

Schritt 3: Das Formular hinzufügen

  1. Fügen Sie mit Add Section Below einen dritten Abschnitt hinzu und geben Sie ihm die Klasse Align text center.
  2. Klicken Sie auf + auf dem Abschnitt und öffnen Sie den Tab Drupal Blocks.
  3. Wählen Sie den Block Ihres Kontaktformulars und klicken Sie in seinem Einstellungsdialog auf Save; das Formular erscheint im Abschnitt.
  4. Klicken Sie erneut auf + auf dem Abschnitt und wählen Sie Text; er landet über dem Formular. Geben Sie „Schreiben Sie uns eine Nachricht“ als Heading 2 ein, fügen Sie eine Zeile hinzu und klicken Sie auf Save.

Formulare, die unter Structure > Contact forms (/admin/structure/contact) erstellt wurden, haben keinen Block in Drupal Core. Das Contrib-Modul Contact Block fügt demselben Tab einen Contact block hinzu.

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:

  • Anrufe per Fingertipp: Wählen Sie die Telefonnummer im Text aus, klicken Sie auf den Link-Button in der Symbolleiste und geben Sie ein: tel:+31104001234
  • E-Mail per Klick: Wählen Sie die Adresse aus und verlinken Sie sie mit mailto:info@example.com
  • Beliebige Blöcke: Der Tab Drupal Blocks bettet die Blöcke Ihrer Website ein, etwa Suchformulare, Newsletter-Anmeldungen und benutzerdefinierte Blöcke

Was Sie sehen

Eine 400 Pixel hohe Karte Ihrer Adresse füllt den oberen Teil der Seite. Darunter zeigt ein graues Band drei zentrierte Spalten, jede mit einem Icon, einer Überschrift und Ihren Details. Das Formular schließt die Seite unter seiner zentrierten Überschrift „Schreiben Sie uns eine Nachricht“.

Wenn Sie die Seite nicht wie gezeigt sehen

  • Die Karte zeigt den falschen Ort. Google Maps sucht nach der Adresse, wie sie eingegeben ist. Fügen Sie Postleitzahl, Stadt und Land zu Address hinzu und speichern Sie erneut.
  • Ihr Formular ist nicht im Tab Drupal Blocks. Der Builder listet nur offene Webforms, und Core-Kontaktformulare brauchen das Contact-Block-Modul. Setzen Sie den Status des Webforms auf Open unter Structure > Webforms (/admin/structure/webform).
  • Die Icons haben unterschiedliche Größen. Jedes Icon behält seine eigene Size. Öffnen Sie die Einstellungen jedes Icons und wählen Sie dieselbe.
  • 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?