---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/teamverzeichnis'
title: 'Ein Teamverzeichnis erstellen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:37:13+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bauen Sie eine Teamseite: eine zentrierte Kopfzeile, drei Leadership-Cards mit einem LinkedIn-Link unter der dritten und ein Grid mit vier Team-Cards. Nutzen Sie sie, wenn das ganze Team leicht zu finden sein soll. Für einen kurzen Teamabschnitt auf Ihrer Unternehmensseite folgen Sie stattdessen Eine About-Us-Seite erstellen.
  Das Video baut die Teamseite eines Logistikunternehmens.
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Ein Teamverzeichnis erstellen'
      description: |-
        Hier bauen Sie eine Teamseite: eine zentrierte Kopfzeile, drei Leadership-Cards mit einem LinkedIn-Link unter der dritten und ein Grid mit vier Team-Cards. Nutzen Sie sie, wenn das ganze Team leicht zu finden sein soll. Für einen kurzen Teamabschnitt auf Ihrer Unternehmensseite folgen Sie stattdessen Eine About-Us-Seite erstellen.
        Das Video baut die Teamseite eines Logistikunternehmens.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:37:13+0000'
      dateModified: '2026-10-24T17:19:22+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/teamverzeichnis'
      articleSection: 'Tutorial folgen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/teamverzeichnis'
      description: |-
        Hier bauen Sie eine Teamseite: eine zentrierte Kopfzeile, drei Leadership-Cards mit einem LinkedIn-Link unter der dritten und ein Grid mit vier Team-Cards. Nutzen Sie sie, wenn das ganze Team leicht zu finden sein soll. Für einen kurzen Teamabschnitt auf Ihrer Unternehmensseite folgen Sie stattdessen Eine About-Us-Seite erstellen.
        Das Video baut die Teamseite eines Logistikunternehmens.
      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) /[Seiten erstellen](/de/hc/documentation/learn-dxpr-builder/build) /[Tutorial folgen](/de/hc/documentation/learn-dxpr-builder/tutorials/overview) # Ein Teamverzeichnis erstellen.

 DXPR Builder lernenSeiten erstellenTutorial folgen

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Eine Card hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/card)
- [Ein Social-Links-Element hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/social-links)
- [Sicherheit](/de/hc/documentation/learn-dxpr-builder/tutorials/about-page)

Hier bauen Sie eine Teamseite: eine zentrierte Kopfzeile, drei Leadership-Cards mit einem LinkedIn-Link unter der dritten und ein Grid mit vier Team-Cards. Nutzen Sie sie, wenn das ganze Team leicht zu finden sein soll. Für einen kurzen Teamabschnitt auf Ihrer Unternehmensseite folgen Sie stattdessen [Eine About-Us-Seite erstellen](/de/hc/documentation/learn-dxpr-builder/tutorials/about-page).

Das Video baut die Teamseite eines Logistikunternehmens.

  ## Bevor Sie beginnen

- Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**.
- 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. Darum kommen die Social Links vor die Card darüber.

## Schritt 1: Die Kopfzeile hinzufügen

1. Klicken Sie auf **Add Elements** auf der leeren Seite und wählen Sie **Section** aus dem Tab **Layout**.
2. Fahren Sie über den Abschnitt und öffnen Sie **More** > **Settings**. Wählen Sie unter **HTML classes** **Align text center** und klicken Sie auf **Save**.
3. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Text** aus dem Tab **Content**.
4. Geben Sie „Our team“ als **Heading 2** ein, fügen Sie eine Einführungszeile hinzu 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: Die Leadership-Cards hinzufügen

1. Fahren Sie über den Abschnitt und klicken Sie auf **Add Section Below**. Öffnen Sie **More** > **Settings** des neuen Abschnitts, wählen Sie einen hellgrauen **Background** im Panel **Style** und klicken Sie auf **Save**.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Row**. Klicken Sie auf sein Grid-Icon (**Column layout**), wählen Sie das Preset **1/3 + 1/3 + 1/3** und klicken Sie auf **Save**.
3. Klicken Sie auf **+** in der ersten Spalte und wählen Sie **Card**. Öffnen Sie ihr **More** > **Settings**, setzen Sie den **Header** auf die Rolle und den **Title** auf den Namen und klicken Sie auf **Save**.
4. Fügen Sie der zweiten Spalte genauso eine **Card** hinzu.
5. Klicken Sie auf **+** in der dritten Spalte und wählen Sie **Social links**. Sie kommt mit zwei Beispielzeilen. Geben Sie `linkedin` über „Facebook“ in der ersten Zeile ein und die Profil-URL daneben. Entfernen Sie die zweite Zeile mit ihrem **×**, setzen Sie **Style** auf **Circle** und **Size** auf **2x** und klicken Sie auf **Save**.
6. Klicken Sie auf **+** in derselben Spalte und wählen Sie **Card**; sie landet über den Links. Setzen Sie **Header** und **Title** genauso und klicken Sie auf **Save**.
7. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Text**; es landet über der Zeile. Geben Sie „Leadership“ als **Heading 2** ein und klicken Sie auf **Save**.

## Schritt 3: Das Team-Grid hinzufügen

1. Fügen Sie mit **Add Section Below** einen dritten Abschnitt hinzu, dann eine **Row**. Klicken Sie auf sein Grid-Icon (**Column layout**), wählen Sie das Preset **1/4 + 1/4 + 1/4 + 1/4** und klicken Sie auf **Save**.
2. Fügen Sie jeder Spalte eine **Card** hinzu. Öffnen Sie ihr **More** > **Settings**, setzen Sie die Rolle als **Header** und den Namen als **Title** und klicken Sie auf **Save**.
3. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Text**; es landet über der Zeile. Geben Sie „The team“ als **Heading 2** ein und klicken Sie auf **Save**.

## Schritt 4: Speichern und Vorschau

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

## Weiter gehen

Nicht im Video gezeigt:

- **Photos and biographies**: Klicken Sie auf **+** auf einer Card und fügen Sie eine **Text**-Biografie hinzu. Klicken Sie dann erneut auf **+** auf der Card und fügen Sie ein **Image** hinzu; es landet über dem Text. Füllen Sie das **Alt attribute** mit dem Namen der Person.
- **Rounded photos**: Setzen Sie auf jedem Bild **Border radius** im Panel **Style**. Der Wert ist in Pixeln, bis 100.
- **Lift on hover**: Setzen Sie in der Card im Panel **Hover style** **Drop shadow** auf 2.
- **Team that updates itself**: Erstellen Sie einen Inhaltstyp „Team member“ und eine **Grid**-Ansicht mit Blockanzeige. Fügen Sie die Ansicht über den Tab **Drupal Views** ein, und die Redaktion fügt Personen hinzu, ohne die Seite anzufassen.

## Was Sie sehen

„Our team“ sitzt zentriert oben. Auf dem grauen Band zeigen drei Leadership-Cards jede Rolle im Header und den Namen darunter, mit einem runden LinkedIn-Icon unter der dritten. „The team“ folgt mit vier Cards nebeneinander.

## Wenn Sie die Seite nicht wie gezeigt sehen

- **Eine Card zeigt nach dem Hinzufügen keinen Einstellungsdialog.** Cards öffnen sich leer, ohne Dialog. Fahren Sie über die Card und öffnen Sie **More** > **Settings**, um **Header** und **Title** auszufüllen.
- **Ein Social Link zeigt „No matching brand icon found“.** Die Marke ist kein bekannter Icon-Name. Geben Sie sie klein ein, etwa `linkedin`.
- **Das LinkedIn-Icon sitzt über der Card.** Die Card kam vor den Links hinein, und neue Elemente landen oben in ihrer Spalte. Ziehen Sie die Card am Zieh-Anfasser in ihrer Kontrollleiste über die Links.
- **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 speichern nicht](/de/hc/dokumentation/dxpr-builder-lernen/fehlerbehebung/speichern-schlaegt-fehl).

## Wie geht es weiter?

- [Card-Element](/de/hc/documentation/learn-dxpr-builder/elements/card) für Card-Typen und Kind-Elemente
- [Social-Links-Element](/de/hc/documentation/learn-dxpr-builder/elements/social-links) für Icon-Stile und Farben
- [About-Seite](/de/hc/documentation/learn-dxpr-builder/tutorials/about-page), um einen kürzeren Teamabschnitt auf Ihrer Unternehmensseite zu platzieren