---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/hero-abschnitt'
title: 'Einen Hero-Abschnitt gestalten | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:41:32+00:00'
updated: '2026-10-24T19:12:20+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  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.
tags:
  - 'Configuration and API'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T19:12:20+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Einen Hero-Abschnitt gestalten'
      description: |-
        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.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:41:32+0000'
      dateModified: '2026-10-24T19:12:20+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/hero-abschnitt'
      articleSection: 'Konfiguration und API'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/hero-abschnitt'
      description: |-
        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.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Startseite
            item: 'https://dxpr.com/de'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: de
---
[Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Referenz](/de/hc/documentation/learn-dxpr-builder/reference) /[Konfiguration und API](/de/hc/documentation/learn-dxpr-builder/reference/config-and-api) # Einen Hero-Abschnitt gestalten.

 DXPR Builder lernenReferenzKonfiguration und API

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Eine Marketing-Landingpage erstellen](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/marketing-landingpage)
- [Einen Abschnitt hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/layout/abschnitte)
- [Das Aussehen eines Elements im Style-Tab ändern](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/style-tab)

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](/de/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing).

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](/de/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).
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?

- [Landingpage](/de/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing), um eine vollständige Seite um Ihren Hero zu bauen
- [Sections](/de/hc/documentation/learn-dxpr-builder/layout/sections) für die Layoutoptionen des Abschnitts
- [Style-Tab-Referenz](/de/hc/documentation/learn-dxpr-builder/element-settings/style-tab) für alle Styling-Optionen