---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/leistungsseite'
title: 'Eine Leistungsseite erstellen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:42:44+00:00'
updated: '2026-10-24T19:36:26+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bauen Sie eine Seite, die listet, was Sie anbieten. Sie hat einen Header, drei Leistungen mit Icons, eine Leistung im Detail neben einem Foto, Kundenlogos und eine Aufforderung. Nutzen Sie sie, wenn Sie mehrere Leistungen verkaufen. Für eine Seite über ein Angebot folgen Sie stattdessen Eine Marketing-Landingpage erstellen.
  Das Video baut die Leistungsseite einer Digitalagentur.
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 Leistungsseite erstellen'
      description: |-
        Hier bauen Sie eine Seite, die listet, was Sie anbieten. Sie hat einen Header, drei Leistungen mit Icons, eine Leistung im Detail neben einem Foto, Kundenlogos und eine Aufforderung. Nutzen Sie sie, wenn Sie mehrere Leistungen verkaufen. Für eine Seite über ein Angebot folgen Sie stattdessen Eine Marketing-Landingpage erstellen.
        Das Video baut die Leistungsseite einer Digitalagentur.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:42:44+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/leistungsseite'
      articleSection: 'Hilfe erhalten'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/leistungsseite'
      description: |-
        Hier bauen Sie eine Seite, die listet, was Sie anbieten. Sie hat einen Header, drei Leistungen mit Icons, eine Leistung im Detail neben einem Foto, Kundenlogos und eine Aufforderung. Nutzen Sie sie, wenn Sie mehrere Leistungen verkaufen. Für eine Seite über ein Angebot folgen Sie stattdessen Eine Marketing-Landingpage erstellen.
        Das Video baut die Leistungsseite einer Digitalagentur.
      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 Leistungsseite erstellen.

 DXPR Builder lernenReferenzHilfe erhalten

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Eine Marketing-Landingpage erstellen](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/marketing-landingpage)
- [Ein Icon hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/icon)
- [Ein Marquee hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/marquee)

Hier bauen Sie eine Seite, die listet, was Sie anbieten. Sie hat einen Header, drei Leistungen mit Icons, eine Leistung im Detail neben einem Foto, Kundenlogos und eine Aufforderung. Nutzen Sie sie, wenn Sie mehrere Leistungen verkaufen. Für eine Seite über ein Angebot folgen Sie stattdessen [Eine Marketing-Landingpage erstellen](/de/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing).

Das Video baut die Leistungsseite einer Digitalagentur.

  ## Bevor Sie beginnen

- Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**.
- Die Medienbibliothek enthält ein Foto für die Leistung im Detail und vier Kundenlogos.
- 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**.
- 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 Elemente einer Spalte in umgekehrter Reihenfolge hinzu oder ziehen Sie sie danach an ihren Platz.

## Schritt 1: Den Header 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, öffnen Sie **More** > **Settings**, wählen Sie das Navyblau als **Background** im Panel **Style** und klicken Sie auf **Save**.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Jumbotron** aus dem Tab **Content**.
3. Setzen Sie den **Title** auf „Unsere Leistungen“, den **Lead** auf eine Zeile über Ihr Angebot und den **Type** auf **Primary**, und klicken Sie dann auf **Save**.

## Schritt 2: Die Leistungsübersicht hinzufügen

1. Fahren Sie über den Abschnitt 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 „Design“ 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 `palette` 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 „Entwicklung“ mit `code` und „Marketing“ mit `bullhorn`.

## Schritt 3: Eine Leistung im Detail hinzufügen

1. Fügen Sie mit **Add Section Below** einen dritten Abschnitt hinzu, dann eine **Row**; sie kommt mit zwei gleichen Spalten.
2. Klicken Sie in der linken Spalte auf **+** und wählen Sie **Image**. Klicken Sie auf **Select Image**, haken Sie ein Foto an und klicken Sie auf **Insert selected**. Geben Sie das **Alt attribute** im Panel **SEO** ein und klicken Sie auf **Save**.
3. Klicken Sie in der rechten Spalte auf **+** und wählen Sie **Button**. Setzen Sie **Title** auf „Angebot einholen“, **Link** auf `/contact` und **Type** auf **Primary**, und klicken Sie dann auf **Save**.
4. Klicken Sie erneut in der rechten Spalte auf **+** und wählen Sie **Text**; er landet über dem Button. Geben Sie „Design“ als **Heading 2** ein, fügen Sie die Beschreibung und den Leistungsumfang hinzu und klicken Sie auf **Save**.

## Schritt 4: Kundenlogos 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** und ein hellgraues **Background** im Panel **Style**. Klicken Sie auf **Save**.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Marquee**. Entfernen Sie die drei Beispielbilder mit dem **×** auf jedem. Klicken Sie auf **Select Image**, suchen Sie nach Ihren Logos, haken Sie vier davon an und klicken Sie auf **Insert selected**. Schalten Sie **Gray scale** ein und klicken Sie auf **Save**.
3. Klicken Sie erneut auf **+** auf dem Abschnitt und wählen Sie **Text**; er landet über dem Marquee. Geben Sie „Führende Marken vertrauen uns“ als **Heading 2** ein und klicken Sie auf **Save**.

## Schritt 5: Die Aufforderung 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 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 „Beratung vereinbaren“, **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 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**.

## Weiter gehen

Nicht im Video gezeigt:

- **Ein Detailabschnitt pro Leistung**: Wiederholen Sie Schritt 3 für Entwicklung und Marketing. Schalten Sie **Mirror row** in den Einstellungen jeder zweiten Zeile ein, sodass die Fotos auf Tablets und Desktops die Seiten wechseln.
- **Sprunglinks**: Setzen Sie die **HTML ID** jedes Detailabschnitts (`design`, `development`, `marketing`). Fügen Sie unter jedem Übersichtstext einen **Button** mit **Link** `#design` und so weiter hinzu.
- **Testimonials**: Fügen Sie pro Kunde ein **Block quote** über den Logos hinzu.

## Was Sie sehen

Ein Navyblau-Band eröffnet die Seite, mit „Unsere Leistungen“ in großer weißer Schrift über einer einzeiligen Zusammenfassung. Es folgen drei zentrierte Leistungen, jede ein Icon im Kreis über ihrem Namen und ihrer Zeile. Design erhält ein eigenes Band mit einem Foto, einer Beschreibung und **Angebot einholen**. Graue Kundenlogos scrollen auf einem hellen Band vorbei, und ein violettes Band schließt die Seite.

## Wenn Sie die Seite nicht wie gezeigt sehen

- **Das Marquee zeigt noch die Beispiel-Logos.** Die drei Beispielbilder bleiben, bis Sie sie entfernen. Öffnen Sie die Marquee-Einstellungen, klicken Sie auf das **×** auf jedem Beispielbild und speichern Sie.
- **Die Logos sind farbig.** **Gray scale** ist aus. Öffnen Sie die Marquee-Einstellungen, schalten Sie es ein und klicken Sie auf **Save**.
- **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**.
- **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?

- [Landingpage](/de/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) für eine eigene Seite pro Leistung
- [Icon-Element](/de/hc/documentation/learn-dxpr-builder/elements/icon) für Größen und Stile
- [Marquee-Element](/de/hc/documentation/learn-dxpr-builder/elements/marquee) für die Einstellungen des Logobands