Eine Marketing-Landingpage erstellen.

DXPR Builder lernenReferenzKonfiguration und API

Hier bauen Sie eine Landingpage für ein Angebot: einen Foto-Hero mit einem Button Demo anfordern, drei Funktionen mit Icons, zwei Testimonials und eine abschließende Aufforderung. Nutzen Sie sie für eine Kampagnen- oder Produktseite mit einem Ziel. Für eine ganze Website auf einer scrollenden Seite folgen Sie stattdessen Eine einseitige Scroll-Website erstellen.

Das Video baut eine Seite für ein Analyseprodukt namens Insight.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Die Medienbibliothek enthält ein breites Foto für den Hero.
  • 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 Hero hinzufügen

  1. Klicken Sie auf der leeren Seite auf Add Elements und wählen Sie Section aus dem Tab Layout. Fahren Sie darüber und öffnen Sie More > Settings.
  2. Wählen Sie unter HTML classes Align text center.
  3. Öffnen Sie das Panel Style. Klicken Sie unter Background image auf Select Image, haken Sie ein Foto an und klicken Sie auf Insert selected. Setzen Sie Background style auf Cover.
  4. Wählen Sie ein dunkles Navyblau als Background und Weiß als Font color und klicken Sie dann auf Save.
  5. Klicken Sie auf + auf dem Abschnitt und wählen Sie Button. Setzen Sie Title auf „Demo anfordern“, Link auf /demo, Type auf Light und Size auf Large, und klicken Sie dann auf Save.
  6. Klicken Sie erneut auf + und wählen Sie Text; er landet über dem Button. Geben Sie die Überschrift als Heading 2 und den Untertitel darunter ein. 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: Funktionen hinzufügen

  1. Fahren Sie über den Hero 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 Text. Geben Sie den Funktionsnamen als Heading 3 ein, fügen Sie eine Zeile 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 bolt und klicken Sie auf das Icon. Setzen Sie Size auf Very Large (3x), öffnen Sie Icon utilities, setzen Sie Style auf Circle und klicken Sie auf Save.
  5. Wiederholen Sie das für die zweite Spalte mit chart-line und die dritte mit shield.

Schritt 3: Testimonials hinzufügen

  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 Block quote. Geben Sie das Zitat ein, füllen Sie Cite mit Name und Funktion der Person aus und klicken Sie auf Save.

Schritt 4: Die Aufforderung 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 „Produktführung buchen“, Link auf /demo, 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 „Sehen Sie Insight auf Ihren eigenen Daten“ 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:

  • Lead-Formular: Fügen Sie statt des letzten Buttons einen Webform-Block aus dem Tab Drupal Blocks ein; siehe Formulare zu Seiten hinzufügen
  • Dunkleres Foto: Setzen Sie im Panel Background effects des Heros Background effect auf Gradient. Wählen Sie dieselbe dunkle Farbe mit etwa 60 % Deckkraft als Start color und End color
  • Höherer Hero: Geben Sie dem Hero-Abschnitt 100 Pixel oberes und unteres Padding im Style-Panel
  • Aus einer Vorlage starten: Klicken Sie auf einer leeren Seite auf Choose a template und wählen Sie ein Landingpage-Layout; siehe Seitenvorlagen

Was Sie sehen

Überschrift, Untertitel und der Button Demo anfordern sitzen zentriert in Weiß auf dem Foto. Es folgen drei Funktionen, jedes ein Icon im Kreis über einer kurzen Überschrift und Zeile. Zwei Zitate stehen nebeneinander auf einem grauen Band, und ein violettes Band schließt die Seite mit Produktführung buchen.

Wenn Sie die Seite nicht wie gezeigt sehen

  • Die Icons haben keinen Kreis. Style sitzt im Panel Icon utilities, nicht in General. Öffnen Sie die Icon-Einstellungen, öffnen Sie Icon utilities und setzen Sie Style auf Circle.
  • Das Hero-Foto füllt den Abschnitt nicht. Background style steht noch auf Theme defaults. Öffnen Sie das Panel Style des Abschnitts und setzen Sie es auf Cover.
  • Ein Icon sitzt unter seinem Funktionstext. Das Icon kam vor dem Text hinein, und neue Elemente landen oben in ihrer Spalte. Ziehen Sie das Icon am Zieh-Anfasser in seiner Kontrollleiste über den Text.
  • 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?