---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/fallstudie'
title: 'Eine Fallstudie schreiben | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:36:14+00:00'
updated: '2026-10-24T20:03:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier beschreiben Sie ein Kundenprojekt in drei Teilen: Herausforderung, Lösung und Ergebnisse. Am Ende haben Sie sieben Bänder: einen Foto-Hero, einen Überblick mit der wichtigsten Zahl, die Herausforderung, die Lösung neben einem Foto, drei Zähler, ein Zitat und eine Aufforderung. Um viele Projekte auf einer Seite zu zeigen, folgen Sie stattdessen Eine Portfoliogalerie erstellen.
  Das Video beschreibt die Arbeit einer Agentur für Northwind Retail.
tags:
  - 'Connect Drupal features'
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 Fallstudie schreiben'
      description: |-
        Hier beschreiben Sie ein Kundenprojekt in drei Teilen: Herausforderung, Lösung und Ergebnisse. Am Ende haben Sie sieben Bänder: einen Foto-Hero, einen Überblick mit der wichtigsten Zahl, die Herausforderung, die Lösung neben einem Foto, drei Zähler, ein Zitat und eine Aufforderung. Um viele Projekte auf einer Seite zu zeigen, folgen Sie stattdessen Eine Portfoliogalerie erstellen.
        Das Video beschreibt die Arbeit einer Agentur für Northwind Retail.
      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:14+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/fallstudie'
      articleSection: 'Drupal-Funktionen verbinden'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/fallstudie'
      description: |-
        Hier beschreiben Sie ein Kundenprojekt in drei Teilen: Herausforderung, Lösung und Ergebnisse. Am Ende haben Sie sieben Bänder: einen Foto-Hero, einen Überblick mit der wichtigsten Zahl, die Herausforderung, die Lösung neben einem Foto, drei Zähler, ein Zitat und eine Aufforderung. Um viele Projekte auf einer Seite zu zeigen, folgen Sie stattdessen Eine Portfoliogalerie erstellen.
        Das Video beschreibt die Arbeit einer Agentur für Northwind Retail.
      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) /[Website verwalten](/de/hc/documentation/learn-dxpr-builder/manage) /[Drupal-Funktionen verbinden](/de/hc/documentation/learn-dxpr-builder/integrations) # Eine Fallstudie schreiben.

 DXPR Builder lernenWebsite verwaltenDrupal-Funktionen verbinden

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Ein Blockquote hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/blockquote)
- [Einen Number Counter hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/number-counter)
- [Eine Portfoliogalerie erstellen](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/portfoliogalerie)

Hier beschreiben Sie ein Kundenprojekt in drei Teilen: Herausforderung, Lösung und Ergebnisse. Am Ende haben Sie sieben Bänder: einen Foto-Hero, einen Überblick mit der wichtigsten Zahl, die Herausforderung, die Lösung neben einem Foto, drei Zähler, ein Zitat und eine Aufforderung. Um viele Projekte auf einer Seite zu zeigen, folgen Sie stattdessen [Eine Portfoliogalerie erstellen](/de/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery).

Das Video beschreibt die Arbeit einer Agentur für Northwind Retail.

  ## Bevor Sie beginnen

- Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**.
- Die Medienbibliothek enthält ein breites Foto für den Hero und ein Foto dessen, was Sie geliefert haben.
- 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**. Die Farbe zeigt sich, während das Foto lädt.
5. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Button**. Setzen Sie **Title** auf „Website besuchen“, **Link** auf die URL des Kunden, **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 den Kundennamen als **Heading 2** und eine einzeilige Zusammenfassung 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: Den Überblick hinzufügen

1. Fahren Sie über den Hero und klicken Sie auf **Add Section Below**. Fügen Sie dem neuen Abschnitt eine **Row** hinzu, klicken Sie auf ihr Grid-Icon (**Column layout**), wählen Sie das Preset **2/3 + 1/3** und klicken Sie auf **Save**.
2. Klicken Sie in der breiten Spalte auf **+** und wählen Sie **Text**. Geben Sie „Überblick“ als **Heading 2** ein, fügen Sie die Zusammenfassung hinzu und klicken Sie auf **Save**.
3. Klicken Sie in der schmalen Spalte auf **+** und wählen Sie **Text**. Geben Sie die Beschriftung der Kennzahl ein, „Mehr Online-Bestellungen“, und klicken Sie auf **Save**.
4. Klicken Sie erneut in der schmalen Spalte auf **+** und wählen Sie **Number counter**; er landet über der Beschriftung. Setzen Sie **End** auf 32, **Suffix** auf %, **Thousands separator** auf **Comma**, setzen Sie **Speed** auf 2500 und klicken Sie dann auf **Save**.

Der Zähler hat kein eigenes Beschriftungsfeld; das Text-Element darunter übernimmt das.

## Schritt 3: Die Herausforderung 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 **Text**. Geben Sie „Die Herausforderung“ als **Heading 2** ein, beschreiben Sie das Problem und klicken Sie auf **Save**.

## Schritt 4: Die Lösung hinzufügen

1. Fügen Sie einen vierten Abschnitt hinzu, dann eine **Row**; sie kommt mit zwei gleichen Spalten.
2. Klicken Sie in der linken Spalte auf **+** und wählen Sie **Text**. Geben Sie „Die Lösung“ als **Heading 2** ein, beschreiben Sie, was Sie gebaut haben, und klicken Sie auf **Save**.
3. Klicken Sie in der rechten Spalte auf **+** und wählen Sie **Image**. Klicken Sie auf **Select Image**, haken Sie ein Foto des Ergebnisses an und klicken Sie auf **Insert selected**. Geben Sie das **Alt attribute** im Panel **SEO** ein und klicken Sie auf **Save**.

## Schritt 5: Die Ergebnisse hinzufügen

1. Fügen Sie einen fünften Abschnitt hinzu und öffnen Sie sein **More** > **Settings**. Wählen Sie **Align text center** unter **HTML classes**, dann das Navyblau als **Background** und Weiß als **Font color** im Panel **Style**. Klicken Sie auf **Save**.
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. Fügen Sie in jeder Spalte zuerst eine **Text**-Beschriftung hinzu, dann einen **Number counter** darüber, wie in Schritt 2: **End** 32 mit **Suffix** %, **End** 2 mit **Suffix** s und **End** 15000.

## Schritt 6: Das Zitat hinzufügen

1. Fügen Sie einen sechsten Abschnitt hinzu.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Block quote**. Geben Sie die Worte des Kunden ein, füllen Sie **Cite** mit Name und Funktion aus und klicken Sie auf **Save**.

## Schritt 7: Die Aufforderung hinzufügen

1. Fügen Sie einen siebten 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 „Kontakt aufnehmen“, **Link** auf `/contact`, **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 „Bereit für den Start?“ als **Heading 2** ein und fügen Sie eine Zeile hinzu. Setzen Sie **Font color** auf Weiß und klicken Sie auf **Save**.

## Schritt 8: 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**.

## Was Sie sehen

Der Kundenname und der Button **Website besuchen** sitzen zentriert auf dem Foto. Der Überblick zeigt 32 % neben seiner Zusammenfassung; Besucher sehen die Zahl hochzählen, wenn sie ins Sichtfeld scrollt. Die Herausforderung steht auf einem grauen Band, und die Lösung sitzt neben ihrem Foto.

Auf dem Navyblau-Band zählen die drei Ergebnisse hoch, wenn sie ins Sichtfeld scrollen: 32 %, 2 s und 15.000. Das Kundenzitat und ein violettes Band mit „**Kontakt aufnehmen**“ schließen die Seite.

## Wenn Sie die Seite nicht wie gezeigt sehen

- **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**.
- **Der letzte Zähler zeigt 15000 ohne Komma.** **Thousands separator** steht noch auf **None**. Öffnen Sie die Zählereinstellungen und wählen Sie **Comma**.
- **Eine Beschriftung sitzt über ihrem Zähler.** Der Zähler kam vor seiner Beschriftung hinein, und neue Elemente landen oben in ihrer Spalte. Ziehen Sie die Beschriftung am Zieh-Anfasser in ihrer Kontrollleiste unter den Zähler.
- **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?

- [Blockquote-Element](/de/hc/documentation/learn-dxpr-builder/elements/blockquote) für Testimonial-Stylingoptionen
- [Number-Counter-Element](/de/hc/documentation/learn-dxpr-builder/elements/number-counter) für jede Zählereinstellung
- [Portfolio](/de/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery), um alle Ihre Fallstudien auf einer Seite zu listen