---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/about-us-seite'
title: 'Eine About-Us-Seite erstellen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:40:34+00:00'
updated: '2026-10-24T19:36:26+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bauen Sie eine About-Us-Seite: einen Leitbild-Header, Ihre Geschichte neben einem Foto, drei hochzählende Zahlen, Team-Cards und eine abschließende Aufforderung. Nutzen Sie sie, wenn eine Seite Besuchern sagen soll, wer Sie sind. Für eine Seite, die alle Teammitglieder listet, folgen Sie stattdessen Ein Teamverzeichnis erstellen.
  Das Video baut die Seite für ein Designstudio in Rotterdam.
tags:
  - 'Get help'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T19:36:26+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Eine About-Us-Seite erstellen'
      description: |-
        Hier bauen Sie eine About-Us-Seite: einen Leitbild-Header, Ihre Geschichte neben einem Foto, drei hochzählende Zahlen, Team-Cards und eine abschließende Aufforderung. Nutzen Sie sie, wenn eine Seite Besuchern sagen soll, wer Sie sind. Für eine Seite, die alle Teammitglieder listet, folgen Sie stattdessen Ein Teamverzeichnis erstellen.
        Das Video baut die Seite für ein Designstudio in Rotterdam.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:40:34+0000'
      dateModified: '2026-10-24T19:36:26+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/about-us-seite'
      articleSection: 'Hilfe erhalten'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/about-us-seite'
      description: |-
        Hier bauen Sie eine About-Us-Seite: einen Leitbild-Header, Ihre Geschichte neben einem Foto, drei hochzählende Zahlen, Team-Cards und eine abschließende Aufforderung. Nutzen Sie sie, wenn eine Seite Besuchern sagen soll, wer Sie sind. Für eine Seite, die alle Teammitglieder listet, folgen Sie stattdessen Ein Teamverzeichnis erstellen.
        Das Video baut die Seite für ein Designstudio in Rotterdam.
      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) /[Hilfe erhalten](/de/hc/documentation/learn-dxpr-builder/reference/get-help) # Eine About-Us-Seite erstellen.

 DXPR Builder lernenReferenzHilfe erhalten

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Ein Teamverzeichnis erstellen](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/teamverzeichnis)
- [Eine Card hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/card)

Hier bauen Sie eine About-Us-Seite: einen Leitbild-Header, Ihre Geschichte neben einem Foto, drei hochzählende Zahlen, Team-Cards und eine abschließende Aufforderung. Nutzen Sie sie, wenn eine Seite Besuchern sagen soll, wer Sie sind. Für eine Seite, die alle Teammitglieder listet, folgen Sie stattdessen [Ein Teamverzeichnis erstellen](/de/hc/documentation/learn-dxpr-builder/tutorials/team-directory).

Das Video baut die Seite für ein Designstudio in Rotterdam.

  ## Bevor Sie beginnen

- Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**.
- Die Medienbibliothek enthält ein Foto Ihres Büros, Teams oder Produkts.
- Die Seite existiert: Gehen Sie zu **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`), geben Sie „Über uns“ als **Title** ein und klicken Sie auf **Save**. Die Seite öffnet sich mit dem Builder darauf.
- Blenden Sie auf DXPR CMS den Seitentitel des Themes auf dieser Seite aus: Öffnen Sie in ihrem Bearbeitungsformular **DXPR Theme Settings** und haken Sie **Page Title** unter **DXPR Hide Regions** an. Der **Title** des Jumbotrons ist dann die einzige Heading 1 der Seite, wie [SEO-freundliche Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2) erklärt.
- Neue Elemente landen oben in ihrem Abschnitt oder ihrer Spalte. Fügen Sie die Zeilen eines Abschnitts oder die Elemente einer Spalte in umgekehrter Reihenfolge hinzu oder ziehen Sie sie danach an ihren Platz.

## Schritt 1: Einen Leitbild-Header hinzufügen

1. Klicken Sie auf der leeren Seite auf **Add Elements** und wählen Sie **Section** aus dem Tab **Layout**.
2. Fahren Sie über den Abschnitt und öffnen Sie **More** > **Settings**. Öffnen Sie das Panel **Style**, wählen Sie ein dunkles **Background**-Farbfeld und klicken Sie auf **Save**.
3. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Jumbotron** aus dem Tab **Content**.
4. Geben Sie Ihr Leitbild als **Title** ein: „Wir bauen Websites, die Menschen gern nutzen“.
5. Geben Sie einen Begleitsatz im Feld **Lead** ein: „Ein 24-köpfiges Studio in Rotterdam, das seit 2012 mit Marken in ganz Europa arbeitet“.
6. Setzen Sie **Type** auf **Primary** für weißen Text auf Ihrer Primärfarbe und klicken Sie dann auf **Save**.

## Schritt 2: Ihre Unternehmensgeschichte erzählen

1. Fahren Sie über den Abschnitt und klicken Sie auf **Add Section Below**, das **+** darunter.
2. Klicken Sie auf **+** auf dem neuen Abschnitt und wählen Sie **Row**; sie kommt mit zwei gleichen Spalten. Klicken Sie auf das Grid-Icon (**Column layout**) in der Zeile, wählen Sie das Preset **2/3 + 1/3** und klicken Sie auf **Save**.
3. Klicken Sie in der breiteren Spalte auf **+** und wählen Sie **Text**. Geben Sie „Unsere Geschichte“ als **Heading 2** ein, dann zwei kurze Absätze: wie Sie angefangen haben und wie ein Projekt abläuft. Klicken Sie auf **Save**.
4. Klicken Sie in der schmaleren Spalte auf **+** und wählen Sie **Image**.
5. Klicken Sie auf **Select Image**, durchsuchen Sie die Medienbibliothek mit **Apply filters**, haken Sie ein Foto Ihres Büros oder Teams an und klicken Sie auf **Insert selected**.
6. Öffnen Sie das Panel **SEO**, füllen Sie das **Alt attribute** aus und klicken Sie auf **Save**.

**Tipp**

Halten Sie die Geschichte kurz und gliedern Sie sie mit einer Zwischenüberschrift. Besucher überfliegen, bevor sie lesen.

## Schritt 3: Kennzahlen mit Zählern 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**. 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 ein **Text**-Element mit der Beschriftung der Kennzahl hinzu: „Abgeschlossene Projekte“, „Jahre im Geschäft“, „Wiederkehrende Kunden“.
4. Klicken Sie in jeder Spalte erneut auf **+** und wählen Sie **Number counter**; er landet über der Beschriftung. Setzen Sie:
    - **End**: die Kennzahl (140, 12, 98)
    - **Suffix**: „+“ oder „%“, wo es passt
    - **Thousands separator**: **Comma**
    - **Speed**: 2500, die Millisekunden, die das Zählen dauert
5. Klicken Sie auf jedem Zähler auf **Save**.

Der Zähler hat kein eigenes Beschriftungsfeld, weshalb ein Text-Element darunter sitzt.

## Schritt 4: Einen Teamabschnitt bauen

1. Fügen Sie mit **Add Section Below** einen vierten Abschnitt hinzu.
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 jeder Spalte auf **+** und wählen Sie **Card**. Öffnen Sie ihr **More** > **Settings**, setzen Sie den **Header** auf den Namen der Person („Sofia Andersen“) und den **Title** auf ihre Funktion („Creative Director“), und klicken Sie dann auf **Save**.
4. Klicken Sie auf **+** auf dem Abschnitt selbst und wählen Sie **Text**; er landet über der Card-Zeile. Geben Sie „Lernen Sie das Team kennen“ als **Heading 2** ein, zentrieren Sie ihn und klicken Sie auf **Save**.

## Schritt 5: Einen Schlussabschnitt hinzufügen

1. Fügen Sie mit **Add Section Below** einen letzten Abschnitt hinzu und öffnen Sie sein **More** > **Settings**. Wählen Sie unter **HTML classes** **Align text center**, sodass Text und Button gemeinsam zentriert sind. Wählen Sie im Panel **Style** Ihre Markenfarbe als **Background** und Weiß als **Font color**, und klicken Sie dann 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 **+** auf dem Abschnitt und wählen Sie **Text**; er landet über dem Button. Geben Sie „Möchten Sie mit uns arbeiten?“ als **Heading 2** ein, dann „Wir nehmen jedes Quartal eine Handvoll neuer Kunden an.“ Setzen Sie im Panel **Style** **Font color** auf Weiß und klicken Sie dann auf **Save**.

## Schritt 6: 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**.
3. Scrollen Sie durch die Seite, um jeden Abschnitt zu prüfen.

## Weiter gehen

Nicht im Video gezeigt, aber des Hinzufügens wert:

- Einen Bio-**Text** und ein Porträt-**Image** in jeder Card sowie **Social links** darunter
- **100% height** in den Einstellungen des ersten Abschnitts für einen Header, der den Bildschirm füllt

## Was Sie sehen

Die Vorschau zeigt fünf Bänder. Der dunkle Header trägt Ihr Leitbild und seinen Begleitsatz in Weiß. Ihre Geschichte sitzt neben dem Foto. Auf dem grauen Band zählen die drei Zahlen von null hoch, wenn sie ins Sichtfeld scrollen.

Die Teamüberschrift sitzt zentriert über drei Cards, jede mit einem Namen und einer Funktion. Das Schlussband zentriert eine weiße Überschrift über einem hellen Button **Kontakt aufnehmen**. Wählen Sie **Edit** im Augen-Menü, um weiterzuarbeiten.

## Wenn Sie die Seite nicht wie gezeigt sehen

- **Es gibt keinen Add-Elements-Button auf der leeren Seite.** Der Seitenerstellungs-Assistent ist ausgeschaltet, sodass die Seite nur **Choose a template** anbietet. Klicken Sie stattdessen auf den leeren Bereich, um den Element-Picker zu öffnen.
- **Ein neues Element sitzt über dem zuvor hinzugefügten.** Der Builder fügt neue Elemente oben in ihrem Abschnitt oder ihrer Spalte ein. Ziehen Sie es am Zieh-Anfasser in seiner Kontrollleiste an seinen Platz.
- **Number counter oder Card fehlt im Picker.** Ihr Builder-Benutzerprofil blendet es aus. Bitten Sie die Website-Administration, es unter **Elements** unter **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`) anzuhaken.
- **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?

- [Teamverzeichnis](/de/hc/documentation/learn-dxpr-builder/tutorials/team-directory) für eine eigene Teamseite
- [Card-Element](/de/hc/documentation/learn-dxpr-builder/elements/card) für Card-Typen und Kindelemente
- [Elements](/hc/documentation/learn-dxpr-builder/elements) für die vollständige Elementreferenz