Einen Hero-Abschnitt gestalten.

DXPR Builder lernenReferenzKonfiguration und API

Hier bauen Sie einen Hero, der den Bildschirm füllt: ein Hintergrundfoto, eine Überschrift, eine Einführungszeile und einen Button, wobei sich das Foto beim Scrollen langsamer bewegt als die Seite. Nutzen Sie ihn oben auf jeder Seite. Um die ganze Seite darum herum zu bauen, folgen Sie als Nächstes Eine Marketing-Landingpage erstellen.

Das Video baut den Hero eines Reporting-Produkts.

Bevor Sie beginnen

  • Ihre Rolle hat die Berechtigung Edit with DXPR Builder.
  • Die Medienbibliothek enthält ein breites Foto, mindestens 1920 Pixel breit.
  • 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.

Schritt 1: Den Abschnitt 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, sodass Überschrift, Text und Button gemeinsam zentriert sind.
  3. Schalten Sie 100% height ein, sodass der Hero den Bildschirm füllt, und Vertical centering, sodass der Inhalt in der Mitte sitzt.
  4. Öffnen Sie das Panel Style. Klicken Sie unter Background image auf Select Image, haken Sie ein breites Foto an und klicken Sie auf Insert selected.
  5. Setzen Sie Background style auf Cover, sodass das Foto den Abschnitt füllt.
  6. Wählen Sie eine dunkle Background-Farbe, die sich zeigt, während das Foto lädt. Setzen Sie Font color auf Weiß und klicken Sie dann auf Save.

Tipp

Komprimieren Sie das Foto auf unter 500 KB, sodass der Hero schnell lädt.

Schritt 2: Den Button hinzufügen

  1. Klicken Sie auf + auf dem Abschnitt und wählen Sie Button aus dem Tab Content.
  2. Setzen Sie Title auf „Kostenlose Testversion starten“, Link auf /trial, Type auf Light für Kontrast auf dem Foto und Size auf Large, und klicken Sie dann auf Save.

Schritt 3: Die Überschrift hinzufügen

  1. Klicken Sie erneut auf + auf dem Abschnitt und wählen Sie Text aus dem Tab Content. Er landet über dem Button, denn neue Elemente landen oben.
  2. Geben Sie Ihre Überschrift ein, „Reporting, das mit Ihrem Team Schritt hält“, und wählen Sie Heading 2 aus dem Überschriften-Dropdown. 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.
  3. Fügen Sie eine Einführungszeile hinzu: „Dashboards, Alerts und Integrationen in einem Arbeitsbereich. In Minuten eingerichtet, ohne Entwicklungsteam.“
  4. Setzen Sie im Panel Style Font color auf Weiß und klicken Sie dann auf Save.

Schritt 4: Parallax hinzufügen

  1. Fahren Sie über den Abschnitt und öffnen Sie erneut More > Settings.
  2. Öffnen Sie das Panel Background effects und setzen Sie Background effect auf Parallax image. Parallax speed startet bei 20; ziehen Sie ihn auf 35 für einen stärkeren Effekt und klicken Sie auf Save.

Schritt 5: Inhalt unter dem Hero hinzufügen

  1. Fahren Sie über den Hero und klicken Sie auf Add Section Below, sodass die Seite Inhalt zum Scrollen hat.
  2. Klicken Sie auf + auf dem neuen Abschnitt und wählen Sie Text aus dem Tab Content. Geben Sie eine Überschrift und einen kurzen Absatz ein, setzen Sie die erste Zeile auf Heading 2 und klicken Sie auf Save.

Schritt 6: Speichern und Vorschau

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

Weiter gehen

Nicht im Video gezeigt:

  • Overlay: Setzen Sie Background effect auf Gradient und wählen Sie eine dunkle Start color und End color mit etwa 50 % Deckkraft. Text bleibt auf jedem Foto lesbar. Der Effekt hält einen Wert, also ersetzt ein Overlay Parallax.
  • Kürzerer Hero: Schalten Sie 100% height aus und geben Sie dem Abschnitt im Panel Style ein eigenes oberes und unteres Padding, zum Beispiel 100 Pixel.
  • Breiter Button: Schalten Sie Block button ein für einen Button so breit wie seine Spalte.

Varianten

Alternativen zum Bau im Video:

Hero mit Videohintergrund

  1. Setzen Sie im Panel Background effects Background effect auf YouTube video.
  2. Fügen Sie die Video-URL in YouTube video URL ein.
  3. Haken Sie unter Video options Loop und Disable on mobile devices an; lassen Sie Audio aus.

Hero nur mit Verlauf

Überspringen Sie das Hintergrundbild und nutzen Sie den Gradient-Effekt mit zwei satten Markenfarben für einen Hero, der schnell lädt.

Geteilter Hero

  1. Fügen Sie eine Row im Abschnitt hinzu; sie kommt mit zwei gleichen Spalten.
  2. Platzieren Sie Text und Button in der linken Spalte und ein Bild in der rechten Spalte.

Was Sie sehen

Das Foto füllt den Bildschirm, mit Ihrer Überschrift, Einführungszeile und dem Button Kostenlose Testversion starten zentriert in Weiß darüber. Während Sie zum zweiten Abschnitt scrollen, bewegt sich das Foto langsamer als die Seite.

Wenn Sie den Hero nicht wie gezeigt sehen

  • Der Hero ist nur so hoch wie sein Text. 100% height ist aus. Schalten Sie es in den Abschnittseinstellungen ein und klicken Sie auf Save.
  • Das Foto bleibt beim Scrollen still. Background effect steht noch auf Simple image, Parallax speed ist 0, oder nichts sitzt unter dem Hero zum Scrollen. Setzen Sie Parallax image, ziehen Sie Parallax speed über 0 und fügen Sie den zweiten Abschnitt aus Schritt 5 hinzu.
  • Die Überschrift bleibt dunkel auf dem Foto. Das Text-Element hat keine eigene Font color. Öffnen Sie sein Panel Style und setzen Sie Font color auf Weiß.

Wie geht es weiter?