---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/marketing-landingpage'
title: 'Eine Marketing-Landingpage erstellen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:36:42+00:00'
updated: '2026-10-24T20:03:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  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.
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-24T20:03:43+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Eine Marketing-Landingpage erstellen'
      description: |-
        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.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:36:42+0000'
      dateModified: '2026-10-24T20:03:43+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/marketing-landingpage'
      articleSection: 'Konfiguration und API'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/marketing-landingpage'
      description: |-
        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.
      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) # Eine Marketing-Landingpage erstellen.

 DXPR Builder lernenReferenzKonfiguration und API

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Einen Hero-Abschnitt gestalten](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/hero-abschnitt)
- [Formulare zu Seiten hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/formulare-hinzufuegen)

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

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

## 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](/de/hc/documentation/learn-dxpr-builder/tutorials/add-forms)
- **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](/de/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates)

## 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](/de/hc/dokumentation/dxpr-builder-lernen/fehlerbehebung/speichern-schlaegt-fehl).

## Wie geht es weiter?

- [Hero-Abschnitt](/de/hc/documentation/learn-dxpr-builder/tutorials/hero-section) für Heros in voller Höhe und mit Parallax
- [Formulare zu Seiten hinzufügen](/de/hc/documentation/learn-dxpr-builder/tutorials/add-forms), um ein Registrierungsformular hinzuzufügen
- [A/B-Tests](/hc/documentation/learn-dxpr-builder/integrations/ab-testing-overview), um zwei Versionen der Seite zu testen