---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/produktseite'
title: 'Eine Produktseite erstellen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:46:37+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Hier bauen Sie eine Seite für ein Produkt. Ein Foto sitzt neben Name, Preis und Buy now-Button, gefolgt von drei Leistungen, einer Spezifikationsliste und einer Verkaufsaufforderung. Nutzen Sie sie für alles, was Sie verkaufen. Um mehrere Tarife zu vergleichen, fügen Sie eine Preistabelle hinzu.
  Das Video baut die Seite eines Hardwareprodukts namens Insight Hub.
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: 'Eine Produktseite erstellen'
      description: |-
        Hier bauen Sie eine Seite für ein Produkt. Ein Foto sitzt neben Name, Preis und Buy now-Button, gefolgt von drei Leistungen, einer Spezifikationsliste und einer Verkaufsaufforderung. Nutzen Sie sie für alles, was Sie verkaufen. Um mehrere Tarife zu vergleichen, fügen Sie eine Preistabelle hinzu.
        Das Video baut die Seite eines Hardwareprodukts namens Insight Hub.
      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:37+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/produktseite'
      articleSection: 'Tutorial folgen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/tutorials/produktseite'
      description: |-
        Hier bauen Sie eine Seite für ein Produkt. Ein Foto sitzt neben Name, Preis und Buy now-Button, gefolgt von drei Leistungen, einer Spezifikationsliste und einer Verkaufsaufforderung. Nutzen Sie sie für alles, was Sie verkaufen. Um mehrere Tarife zu vergleichen, fügen Sie eine Preistabelle hinzu.
        Das Video baut die Seite eines Hardwareprodukts namens Insight Hub.
      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 Produktseite erstellen.

 DXPR Builder lernenSeiten erstellenTutorial folgen

   ## In diesem Leitfaden

 Verwandte Leitfäden

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

Hier bauen Sie eine Seite für ein Produkt. Ein Foto sitzt neben Name, Preis und **Buy now**-Button, gefolgt von drei Leistungen, einer Spezifikationsliste und einer Verkaufsaufforderung. Nutzen Sie sie für alles, was Sie verkaufen. Um mehrere Tarife zu vergleichen, fügen Sie eine [Preistabelle](/de/hc/documentation/learn-dxpr-builder/tutorials/pricing-table) hinzu.

Das Video baut die Seite eines Hardwareprodukts namens Insight Hub.

  ## Bevor Sie beginnen

- Ihre Rolle hat die Berechtigung **Edit with DXPR Builder**.
- Die Medienbibliothek enthält ein Foto des Produkts.
- 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 ihrer Spalte. Darum wird die rechte Spalte vom Button aufwärts gebaut.

## Schritt 1: Das Produkt hinzufügen

1. Klicken Sie auf **Add Elements** auf der leeren Seite und wählen Sie **Section** aus dem Tab **Layout**.
2. Klicken Sie auf **+** auf dem Abschnitt und wählen Sie **Row**; sie kommt mit zwei gleichen Spalten.
3. Klicken Sie auf **+** in der linken Spalte und wählen Sie **Image**. Klicken Sie auf **Select Image**, wählen Sie das Produktfoto und klicken Sie auf **Insert selected**. Geben Sie das **Alt attribute** im Panel **SEO** und klicken Sie auf **Save**.
4. Klicken Sie auf **+** in der rechten Spalte und wählen Sie **Button**. Setzen Sie **Title** auf „Buy now“, **Link** auf Ihren Shop, **Type** auf **Primary** und **Size** auf **Large** und klicken Sie auf **Save**.
5. Klicken Sie erneut auf **+** in der rechten Spalte und wählen Sie **Text**; es landet über dem Button. Geben Sie den Preis als **Heading 2** und klicken Sie auf **Save**.
6. Klicken Sie noch einmal auf **+** und wählen Sie **Text**; es landet ganz oben. Geben Sie den Produktnamen als **Heading 2** ein, fügen Sie eine Beschreibungszeile 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 Leistungen 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 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 **Text**. Geben Sie den Leistungsnamen als **Heading 3** ein, fügen Sie eine Zeile hinzu und klicken Sie auf **Save**.
4. Klicken Sie auf **+** in derselben Spalte und wählen Sie **Icon**; es landet über dem Text. Wählen Sie das Set **Font Awesome Free Solid**, suchen Sie nach `plug` 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 es für die zweite Spalte mit `cloud` und die dritte mit `battery-full`.

## Schritt 3: Die Spezifikationen hinzufügen

1. Fügen Sie mit **Add Section Below** einen dritten Abschnitt hinzu. Öffnen Sie sein **More** > **Settings**, 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 **Text**. Geben Sie „Specifications“ als **Heading 2** ein, dann eine Spezifikation pro Zeile, und klicken Sie auf **Save**.

## Schritt 4: Die Aufforderung 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**, dann den lilafarbenen **Background** und weiße **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 „Talk to sales“, **Link** auf `/contact`, **Type** auf **Light** und **Size** auf **Large** und klicken Sie auf **Save**.
3. Klicken Sie erneut auf **+** und wählen Sie **Text**; es landet über dem Button. Geben Sie „Insight Hub from 249 euro“ als **Heading 2** ein und fügen Sie eine Zeile hinzu. Setzen Sie **Font color** auf Weiß und klicken Sie auf **Save**.

## Schritt 5: 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:

- **Specification table**: Fügen Sie mit dem Button **Table** in der Text-Symbolleiste eine Tabelle ein statt einer Zeile pro Spezifikation.
- **Gallery**: Ersetzen Sie das einzelne Foto durch ein **Image carousel** mit Produktbildern.
- **Plans**: Verlinken Sie den Preis mit einer [Preistabelle](/de/hc/documentation/learn-dxpr-builder/tutorials/pricing-table).

## Was Sie sehen

Das Produktfoto füllt die linke Hälfte, mit Name, Preis und **Buy now**-Button rechts. Drei zentrierte Leistungen folgen, jede ein eingekreistes Icon über ihrem Namen und ihrer Zeile. Die Spezifikationen stehen auf einem grauen Band, und ein lilafarbenes Band schließt die Seite mit **Talk to sales**.

## Wenn Sie die Seite nicht wie gezeigt sehen

- **Name, Preis und Button sind in der falschen Reihenfolge.** Sie kamen von oben nach unten hinein, und neue Elemente landen oben in ihrer Spalte. Ziehen Sie sie am Zieh-Anfasser in ihrer Kontrollleiste an ihren Platz.
- **Die Icons haben keinen Kreis.** **Style** sitzt im Panel **Icon utilities**, nicht in **General**. Öffnen Sie die Einstellungen des Icons, öffnen Sie **Icon utilities** und setzen Sie **Style** auf **Circle**.
- **Die Überschrift bleibt dunkel auf Lila.** Das Text-Element hat keine eigene **Font color**. Öffnen Sie sein Panel **Style** und setzen Sie **Font color** auf Weiß.
- **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?

- [Preistabelle](/de/hc/documentation/learn-dxpr-builder/tutorials/pricing-table) für einen mehrstufigen Preisabschnitt
- [Icon-Element](/de/hc/documentation/learn-dxpr-builder/elements/icon) für Icon-Größen und Stile
- [Marketing-Landingpage](/de/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) für eine Kampagnenseite rund um das Produkt