---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/preistabelle'
title: 'Eine Preistabelle erstellen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:46:29+00:00'
updated: '2026-10-24T19:36:26+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bauen Sie eine Preistabelle: drei Tarife nebeneinander, jeder ein Panel mit einem Preis, einer Funktionsliste und einem Button in voller Breite, und der mittlere Tarif hervorgehoben. Nutzen Sie sie auf einer Preisseite oder in einer Produktseite. Für die vollständige Produktseite darum folgen Sie Eine Produktseite erstellen.
  Das Video baut drei Tarife für ein Reporting-Tool.
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-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 Preistabelle erstellen'
      description: |-
        Hier bauen Sie eine Preistabelle: drei Tarife nebeneinander, jeder ein Panel mit einem Preis, einer Funktionsliste und einem Button in voller Breite, und der mittlere Tarif hervorgehoben. Nutzen Sie sie auf einer Preisseite oder in einer Produktseite. Für die vollständige Produktseite darum folgen Sie Eine Produktseite erstellen.
        Das Video baut drei Tarife für ein Reporting-Tool.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:46:29+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/preistabelle'
      articleSection: 'Tutorial folgen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/preistabelle'
      description: |-
        Hier bauen Sie eine Preistabelle: drei Tarife nebeneinander, jeder ein Panel mit einem Preis, einer Funktionsliste und einem Button in voller Breite, und der mittlere Tarif hervorgehoben. Nutzen Sie sie auf einer Preisseite oder in einer Produktseite. Für die vollständige Produktseite darum folgen Sie Eine Produktseite erstellen.
        Das Video baut drei Tarife für ein Reporting-Tool.
      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) # Eine Preistabelle erstellen.

 DXPR Builder lernenSeiten erstellenTutorial folgen

   ## In diesem Leitfaden

 Verwandte Leitfäden

- [Eine Produktseite erstellen](/de/hc/dokumentation/dxpr-builder-lernen/tutorials/produktseite)
- [Eine Card hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/card)
- [Ein Panel hinzufügen](/de/hc/dokumentation/dxpr-builder-lernen/elemente/panel)

Hier bauen Sie eine Preistabelle: drei Tarife nebeneinander, jeder ein Panel mit einem Preis, einer Funktionsliste und einem Button in voller Breite, und der mittlere Tarif hervorgehoben. Nutzen Sie sie auf einer Preisseite oder in einer Produktseite. Für die vollständige Produktseite darum folgen Sie [Eine Produktseite erstellen](/de/hc/documentation/learn-dxpr-builder/tutorials/product-page).

Das Video baut drei Tarife für ein Reporting-Tool.

  ## 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 Container, sodass in jedem Panel der Button vor dem Preis hineinkommt.

## Schritt 1: Abschnitt und Spalten 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**. Wählen Sie unter **HTML classes** **Align text center**. Öffnen Sie das Panel **Style**, wählen Sie ein hellgraues **Background** und klicken Sie auf **Save**.
3. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Row**; sie kommt mit zwei gleichen Spalten.
4. Klicken Sie auf das Grid-Icon der Zeile (**Column layout**), wählen Sie das Preset **1/3 + 1/3 + 1/3** und klicken Sie auf **Save**.

## Schritt 2: Den ersten Tarif bauen

1. Klicken Sie in der ersten Spalte auf **+** und wählen Sie **Panel** aus dem Tab **Content**.
2. Fahren Sie über das Panel und öffnen Sie **More** > **Settings**. Setzen Sie den **Title** auf „Starter“, lassen Sie den **Type** auf **DXPR** und klicken Sie auf **Save**.
3. Klicken Sie auf **+** auf dem Panel und wählen Sie **Button**. Setzen Sie **Title** auf „Tarif wählen“, **Link** auf `/signup` und **Type** auf **Primary**. Schalten Sie **Block button** ein, sodass er die Spalte füllt, und klicken Sie dann auf **Save**.
4. Klicken Sie erneut auf **+** auf dem Panel und wählen Sie **Text**; er landet über dem Button. Geben Sie den Preis als **Heading 2** ein, fügen Sie die Funktionen je eine pro Zeile hinzu und klicken Sie auf **Save**.

## Schritt 3: Die anderen Tarife bauen

1. Wiederholen Sie Schritt 2 in der zweiten Spalte für „Professional“. Wählen Sie im Panel **Style** des Panels das violette **Background** und setzen Sie den **Type** des Buttons auf **Success**, sodass der Tarif hervorsticht.
2. Wiederholen Sie Schritt 2 in der dritten Spalte für „Enterprise“, mit „Individuelle Preise“ als Preis.

**Tipp**

Die mittlere Spalte zieht den Blick an. Setzen Sie den Tarif dorthin, den Sie am liebsten verkaufen.

## Schritt 4: Die Überschrift hinzufügen

1. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Text**; er landet über der Zeile.
2. Geben Sie „Wählen Sie Ihren Tarif“ als **Heading 2** ein, fügen Sie eine Zeile wie „Einfache monatliche Preise. Jederzeit kündbar.“ hinzu 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:

- **Vier Tarife**: Wählen Sie stattdessen das Preset **1/4 + 1/4 + 1/4 + 1/4** und bauen Sie eine vierte Spalte.
- **„Am beliebtesten“-Badge**: Fügen Sie oben im hervorgehobenen Panel ein **Text**-Element mit „Am beliebtesten“ in Fettschrift hinzu.
- **Jährlich und monatlich**: Fügen Sie über der Zeile eine **Text**-Zeile wie „Monatlich \| Jährlich (20 % sparen)“ hinzu. Die Zeile ist statisch; ein echter Schalter braucht das **HTML**-Element mit Ihrem eigenen Skript.
- **Häkchen bei Funktionen**: Fügen Sie vor jede Funktionszeile ein Häkchen ein oder fügen Sie ein **Icon**-Element über der Liste hinzu.

## Was Sie sehen

„Wählen Sie Ihren Tarif“ sitzt zentriert über drei Tarifen auf einem grauen Band. Jedes Panel zeigt seinen Namen in der Titelleiste, den Preis, drei Funktionen und einen Button **Tarif wählen** in voller Breite. Der mittlere Tarif sticht in Violett mit einem grünen Button hervor.

## Wenn Sie die Tarife nicht wie gezeigt sehen

- **Ein Panel öffnet sich ohne Einstellungsdialog.** Panels öffnen sich leer, ohne Dialog. Fahren Sie über das Panel und öffnen Sie **More** > **Settings**, um seinen **Title** zu setzen.
- **Ein Panel-Type wie Primary zeigt keine Farbe.** Ihr Theme stylt diesen Paneltyp nicht. Lassen Sie den **Type** auf **DXPR** und wählen Sie ein **Background** im Panel **Style** des Panels, wie in Schritt 3.
- **Die Buttons sind nur so breit wie ihr Text.** **Block button** ist aus. Öffnen Sie die Einstellungen jedes Buttons und schalten Sie ihn ein.
- **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?

- [Produktseite](/de/hc/documentation/learn-dxpr-builder/tutorials/product-page) für eine ganze Seite mit Funktionen und Preisen
- [Card-Element](/de/hc/documentation/learn-dxpr-builder/elements/card) für einen anderen Card-Stil
- [Panel-Element](/de/hc/documentation/learn-dxpr-builder/elements/panel) für jede Panel-Einstellung