Wie erstelle ich eine Preistabelle?

Preistabellen eigenen sich besonders dann, wenn du für dein Produkt neben der Einmalzahlung auch ein unlimitertes Abonnement oder Ratenzahlung anbieten möchtest. Mit dem Divi Modul "Preistabelle" kannst du eine Preistabellen bestehend aus mehreren Preis-Spalten für deine Produkte erstellen:

INHALTSVERZEICHNIS
  1. Verwendung einer Preistabelle
  2. Divi Modul "Preistabelle" hinzufügen
    1. Preistabelle Spalte 1
      1. Bereich 1: Titel, Preis, Abbuchungsrhythmus
      2. Bereich 2: Features
      3. Bereich 3: Kaufen-Button
    2. Preistabelle Spalte 2
  3. Design der Preistabelle
    1. Bestimmte Preis-Spalte gestalterisch hervorheben
    2. Globales Design auf Modul-Ebene
    3. Individuelles Design auf Spalten-Ebene
    4. Gleiche Höhe der Preis-Spalten
    5. Responsive Design der Preistabelle

1. Verwendung einer Preistabelle

Überlege dir, auf welcher Seite deine Verkaufsseite eingebudnen werden soll. 

Im STARTER und ACADEMY Paket von Spreadmind hast du die Möglichkeit, die Produktseite selbst als Verkaufsseite zu nutzen. Allerdings ist die Voraussetzung, dass der Divi Builder aktiviert wird. Schaue dir dazu bitte die folgende Anleitung an: 

Ab dem EXPERT Paket kannst du eine Verkaufsseite im Backend unter "Webseite" > "Seiten" erstellen und für diese den Divi Builder aktivieren:

2. Divi Modul "Preistabelle" hinzufügen

Für unser Beispiel nutzen wir die Produktseite selbst und haben hierfür im Backend im Bearbeitungsmodus des Produktes die Ausgabe der Sidebar deaktiviert:

Im Frontend aktivieren wir nun den visuellen Builder von Divi und fügen das Modul "Preistabelle" ein. Wir empfehlen, das Modul in einer 1-spaltigen Zeile einzubinden:

Bild oben: Sektion (blau) mit einer 1-spaltigen Zeile (grün).

Standardmäßig führt das Preistabellen Modul erstmal keine Inhalte auf, daher müssen wir nun im nächsten Schritt nun mehrere Preis-Spalten innerhalb des Moduls hinzufügen. Die Spalten-Breite passt sich dabei automatisch der verfügbaren Breite des Moduls an, egal wie viele Preis-Spalten erstellt werden.

Modul Preistabelle mit 1 Preis-Spalte:

Die Preis-Spalte 1 erstreckt sich über die gesamte verfügbare Breite der Zeile.

Modul Preistabelle mit 2 Preis-Spalten:

In der Regel solltest du nicht mehr als 4 Preis-Spalten verwenden. Das ist keine festgelegte Regel, aber rein aus gestalterischer Sicht sinnvoll.

2.1 Preistabelle Spalte 1

In den Modul-Einstellungen klicken wir unter dem Reiter "Inhalt" auf das Plus-Symbol, um unsere erste Preis-Spalte zu erstellen:

Hinweis: Nach dem Erstellen einer Preis-Spalte befindest du dich innerhalb des Moduls eine Ebene tiefer in den Einstellungsoptionen der Preis-Spalte. Über den grünen Speichern-Button unten rechts im Modul springst du wieder eine Ebene höher in die allgemeinen Einstellungen des Preistabellen Moduls.

Im Grunde ist eine Preis-Spalte immer in drei Bereiche aufgeteilt, welche mit folgenden Inhalten befüllt werden:

  • Bereich 1: Titel, Preis, Abbuchungsrhythmus
  • Bereich 2: Features (welche Leistungen sind enthalten oder nicht)
  • Bereich 3: Kaufen-Button 

2.1.1 Bereich 1: Titel, Preis, Abbuchungsrhytmus

In den Preis-Spalten-Einstellung findest du unter der Option "Text" die Felder für Titel, Untertitel, Währung, Häufigkeit und Preis:

  • Titel = Titel der Spalte und somit Titel des Preispaketes
  • Untertitel = Weitere Beschreibungsmöglichkeit
  • Währung = Trage hier € oder EUR oder Euro ein
  • Häufigkeit = Abbuchungsrhythmus – handelt es sich um eine Einmalzahlung, ein Abonnement oder eine Ratenzahlung?
  • Preis = Preis des Produktes

2.1.2 Bereich 2: Features

Ebenfalls unter der Option "Text" findest du den Editor Body, um hier die Features auflisten zu können, welche in dem Preispaket enthalten sind:

Trage ein Feature pro Zeile ein. Das Modul erstellt pro Zeile automatisch eine Aufzählung. Stellst du einem Feature einen Bindestrich voran, wird dieses automatisch hellgrau dargestellt und soll somit ein Feature symbolisieren, welches in dem Preispaket nicht enthalten ist.

2.1.3 Bereich 3: Kaufen-Button

Unter der Option "Text" trägst du beim Feld Button deinen gewünschten Kaufen-Button-Text ein:

Der Button selbst ist in der Preistabelle erst dann sichtbar, wenn ein Button-Link hinterlegt wird.
Gehe also daher weiter unten zur Option "Link" und trage beim Feld Link-URL des Buttons das Linkziel ein. Hier hast du zwei Möglichkeiten:
  1. Produkt OHNE Preisvarianten => Nutze die Option "Dynamischer Inhalt verwenden" und verknüpfe das Produkt direkt mit dem Button.
  2. Produkt MIT Preisvarianten => Nutze einen individuellen Warenkorb-Link des Produktes.

Kaufen-Button: Produkt OHNE Preisvarianten

Hast du ein Produkt ohne Preisvarianten angelegt, kannst du das Produkt direkt hinterlegen und benötigst keine URL. Klicke dafür innerhalb des Feldes auf das rechte Icon:

Wähle als nächstes aus der Auswahl die Option Download Link aus:

Du kannst nun aus dem Drop-Down Menü dein Produkt auswählen (Wichtig: Es können nur Produkte ohne Preisvarianten über diesen Weg eingebunden werden!):

Klicke auf den grünen Button, um die Auswahl zu speichern.
Nun ist auch der Kaufen-Button in der Preis-Spalte selbst zu sehen:

Über das Zahnrad-Icon kannst du jederzeit ein neues Produkt auswählen. Über das Papierkorb-Symbol löschst du die Auswahl und kannst eine Link-URL eintragen.

Kaufen-Button: Produkt MIT Preisvarianten

Hast du für dein Produkt die Option "Preisvarianten" aktiviert, kannst du das Produkt über die oben beschriebene Option "Dynamischen Inhalt verwenden" nicht einbinden, sondern musst dafür einen individuellen Warenkorb-Link verwenden. 
Diese Anleitung zeigt dir, wie du einen individuellen Warenkorb-Link erstellst (sowohl für ein Produkt mit und ohne Preisvarianten):

Trage nun in das Feld Link-URL des Buttons den individuellen Warenkorb-Link ein: 

OBACHT:
Bitte trage in das Feld nicht den Kaufen-Button-Shortcode [purchase_link id="1234"] ein, da das Preistabellen-Modul mit diesem Shortcode nicht arbeiten und somit kein Kauf stattfinden kann!

Klicke zum Schluss rechts unten auf den grünen Button, um deine Einstellungen für die Preis-Spalte 1 zu speichern: 

Du springst dadurch direkt wieder innerhalb des Preistabellen Moduls eine Eben höher in die Modul-Einstellungen der Preistabelle und siehst nun deine angelegte Preis-Spalte:

2.2 Preistabelle Spalte 2

Der einfachste Weg, um eine weitere Preis-Spalte innerhalb der Preistabelle hinzuzufügen ist, die Spalte 1 einfach zu duplizieren:

Klicke bei der duplizierten Preis-Spalte auf das Zahnradsymbol, um in den Spalten-Einstellungen inhaltlich die drei Bereiche ( s.o. ab 2.1.1) entsprechend für dein Produktpaket anzupassen. 

Du kannst optional auch eine weitere Preis-Spalte hinzufügen, in dem du einfach die Spalte 1 oder 2 duplizierst. In der Regel solltest du nicht mehr als 4 Preis-Spalten verwenden. Das ist keine festgelegte Regel, aber rein aus gestalterischer Sicht sinnvoll.

3. Design der Preistabelle

Jedes Modul und somit auch das Preistabellen Modul von Divi bringt bereits ein eigenes Standard-Design mit sich, welches du auch ganz auf deine Bedürfnisse anpassen kannst. Dazu solltest du wissen, dass die gestalterische Anpassung einmal global auf der Modul-Ebene stattfinden kann und somit für alle Preis-Spalten gleichermaßen greifen.
Du kannst aber auch das Design auf Spalten-Ebene individuell anpassen oder sogar eine Spalte als Highlight hervorheben. Dies ist meist die Preis-Spalte, welche als "Am meisten gekauft" deklariert wird.
Wichtiger Hinweis:

Du wirst bei vielen Gestaltungs-Optionen immer über Optionen für "Hervorgehobene", "Ausgewählte" , "Besondere" oder "Bevorzugte" Elemente stolpern. Hiermit sind die Gestaltungs-Optionen für eine Preis-Spalte gemeint, welche du als ein Highlight hervorgehoben hast. Mehr dazu im nächsten Abschnitt.

3.1 Bestimmte Preis-Spalte gestalterisch hervorheben

Der einfachste Weg, um eine Preis-Spalte gestalterisch hervorzuheben ist, diese als "Highlight" einzustellen. Das sieht dann bei einer Preistabelle mit 3 Preis-Spalten standardmäßig so aus: 

Die 2. Preis-Spalte wurde als Highlight definiert und ist somit präsenter. Zudem hat diese Preis-Spalte automatisch eine andere Hintergrundfarbe im Titel-Bereich erhalten.

Gehe dazu in den Modul-Einstellungen der Preistabelle zu den Einstellungen der 2. Preis-Spalte:

Gehe dann zum Reiter "Design" > Option "Layout" und aktiviere die Option Diese Tabelle auf bevorzugt setzen:

Im den folgenden Abschnitten zeigen wir dir nun, wie du die Preis-Spalten gestalterisch anpassen kannst und das auch unter der Berücksichtigung, dass die 2. Preis-Spalte als bevorzugt eingestellt wurde.

3.2 Globales Design auf Modul-Ebene

Auf Modul-Ebene kannst du ein Design einstellen, welches automatisch auf alle Preis-Spalten angewandt wird. Bitte stelle hierzu sicher, dass du dich direkt in den Modul-Einstellungen der Preistabelle befindest (und nicht eine Eben tiefer in den Einstellungsoptionen der Preis-Spalte) und gehe zu Reiter "Design":

Wir möchten dir nachfolgenden nun die ersten zehn Gestaltungs-Optionen vorstellen. Bitte berücksichtige, dass wir uns in der Modul-Ebene befinden und daher alle Anpassung automatisch für alle Preis-Spalten innerhalb des Moduls greifen.

Diese sind: 

Option "Layout"

Bild: Hintergrunfarbe für hervorgehobene Preis-Spalte (hellblau) geändert.

Die hier vorgenommenen Anpassungen sind nur dann sichtbar, wenn eine Preis-Spalte als Hervorgehoben eingestellt wurde (siehe 3.1). Zudem zeigt die hervorgehobene Preis-Spalte einen Schlagschatten, welcher optional deaktiviert werden kann.

Option "Listenpunkt"

Bild: Farbe der Aufzählungspunkte für hervorgehobene Preis-Spalte (lila) und alle anderen Preis-Spalten (orange) geändert.

Hier können die Aufzählungspunkte der Features farblich angepasst werden. 

  • Option "Besondere Aufzählungsfarbe" = Für die hervorgehobene Preis-Spalte
  • Option "Farbe des Aufzählungspunktes" = Für alle Preis-Spalten (außer hervorgehobene)

Option "Text"

Standardmäßig sind die Text-Bereiche wie folgt ausgerichtet: 

  • Bereich 1 (Titel, Preis, etc) = zentriert
  • Bereich 2 (Features) = linksbündig
  • Bereich 3 (Kaufen Button) = zentriert

Über die Option Textausrichtung kann nun die Ausrichtung aller drei Bereiche geändert werden. Diese Anpassung wirkt sich auch gleichermaßen auf eine hervorgehobene Preis-Spalte aus.

Option "Titel Text"

Bild: Hintergrunfarbe für hervorgehobene Preis-Spalte (lila) und alle anderen Preis-Spalten (orange) geändert.

Hier kann neben der Hintergrundfarbe für den Bereich 1 auch die Schriftfarbe und allgemein die Anpassung für die Schriftart vorgenommen werden.

  • Optionen "Hervorgehobene Header-Hintergrundfarbe" & "Hervorgehobene Titeltextfarbe" = Für die hervorgehobene Preis-Spalte
  • Optionen "Hintergrundfarbe vom Header der Tabelle" & "Titel Schriftfarbe" = Für alle Preis-Spalten (außer hervorgehobene)

Alle weiteren Einstellungen dieser Option (Schriftart, -stärke etc.) greifen gleichermaßen für alle Preis-Spalten – egal ob hervorgehoben oder nicht.

Option "Body Text"

Bild: Schriftfarbe der Features für hervorgehobene Preis-Spalte (lila) und alle anderen Preis-Spalten (orange) geändert.

Die Anpassungen dieser Einstellungsoptionen wirken sich auf den Body Text aus, welcher den Bereich der aufgelisteten Features zeigt. 

  • Option "Bevorzugte Textfarbe für den Body" = Für die hervorgehobene Preis-Spalte
  • Option "Body Schriftfarbe" = Für alle Preis-Spalten (außer hervorgehobene)

Alle weiteren Einstellungen dieser Option (Schriftart, -stärke etc.) greifen gleichermaßen für alle Preis-Spalten – egal ob hervorgehoben oder nicht.

Hinweis:
Sind Features in einer Preis-Spalte als "deaktiviert" bzw. "nicht verfügbar" gekennzeichnet (Bindestrich vorangestellt), haben diese standardmäßig eine hellgraue Schriftfarbe. Durch Anpassung der Schriftfarbe bei dieser Option haben wird die hellgraue Schriftfarbe ebenfalls ersetzt, kann aber bei der eigenen Option "Ausgenomme Artikel Text" (s.u.) wieder angepasst werden.

Option "Untertitel Text"

Bild: Schriftfarbe der Untertitel für hervorgehobene Preis-Spalte (gelb) und alle anderen Preis-Spalten (schwarz) geändert.

Nutzt du für deine Preis-Spalten einen Untertitel – in unserem Beispiel lauten diese "Für Anfänger" und "Für Fortgeschrittene", kannst du bei dieser Option diese gestalterisch anpassen.

  • Option "Hervorgehobene Untertitel-Textfarbe" = Für die hervorgehobene Preis-Spalte
  • Option "Untertitel Schriftfarbe" = Für alle Preis-Spalten (außer hervorgehobene)

Alle weiteren Einstellungen dieser Option (Schriftart, -stärke etc.) greifen gleichermaßen für alle Preis-Spalten – egal ob hervorgehoben oder nicht.

Option "Preis Text"

Bei der Option "Preis Text" kannst du (fast) den gesamten Preis-Bereich inkl. Hintergrund gestalterisch nach deinen Wünschen anpassen. Die Anpassungen für die Währung und den Abbuchungsrhythmus nimmst du in der nächsten Option "Währung & Frequenz Text" (s.u.) vor.

  • Optionen "Hintergrundfarbe Ausgewählte Preise" & "Sonderpreis Textfarbe" = Für die hervorgehobene Preis-Spalte
  • Optionen "Preisbereich Hintergrundfarbe" & "Preis Schriftfarbe" = Für alle Preis-Spalten (außer hervorgehobene)

Alle weiteren Einstellungen dieser Option (Schriftart, -stärke etc.) greifen gleichermaßen für alle Preis-Spalten – egal ob hervorgehoben oder nicht.

Option "Währung & Frequenz Text"

Bild: Schriftfarbe der Währung & Abbuchungsrhythmus für hervorgehobene Preis-Spalte (lila) und alle anderen Preis-Spalten (orange) geändert.

Diese Anpassungen wirken sich rein auf das Währungszeichen und den Abbuchungsrhythmus neben dem Preis aus. Der Preis selbst wird über bei der Option "Preis Text" (s.o.) angepasst.

  • Option "Ausgewählte Währung und Häufigkeit Textfarbe" = Für die hervorgehobene Preis-Spalte
  • Option "Währung & Frequenz Schriftfarbe" = Für alle Preis-Spalten (außer hervorgehobene)

Alle weiteren Einstellungen dieser Option (Schriftart, -stärke etc.) greifen gleichermaßen für alle Preis-Spalten – egal ob hervorgehoben oder nicht.

Option "Ausgenommene Artikel Text"

Bild: Schriftfarbe der Währung & Abbuchungsrhythmus für hervorgehobene Preis-Spalte (lila) und alle anderen Preis-Spalten (orange) geändert.

Sind Features in einer Preis-Spalte als "deaktiviert" bzw. "nicht verfügbar" gekennzeichnet (Bindestrich vorangestellt), haben diese standardmäßig eine hellgraue Schriftfarbe. Bei dieser Option kannst du nun die Schriftfarbe anpassen. Das ist vor allem hilfreich, wenn du zuvor bei der Option "Body Text" (s.o.) die Schriftfarbe aller Features angepasst hast.

  • Option "Ausgeschlossene Artikelfarbe" = Für die hervorgehobene Preis-Spalte
  • Option "Ausgenommene Artikel Schriftfarbe" = Für alle Preis-Spalten (außer hervorgehobene)

Alle weiteren Einstellungen dieser Option (Schriftart, -stärke etc.) greifen gleichermaßen für alle Preis-Spalten – egal ob hervorgehoben oder nicht.

Option "Button"

Standardmäßig greift bei allen Buttons auf deiner Plattform – egal in welchem Modul ein Button vorhanden ist – das Design, welches du global im Theme Customizer hinterlegt hast. 

Aktivierst du nun die Option "Verwenden Sie benuzterdefinierte Stile für Button", kannst du deine Buttons für dieses Preistabellen-Modul gestalterisch anpassen. Das Besondere bei dieser Einstellung ist nun aber, dass du hier den Button einer hervorgehobenen Preis-Spalte ausnahmsweise nicht individuell anpassen kannst. 

Möchtest du den Button einer hervorgehobenen Preis-Spalte anpassen, so musst du dies in den Modul-Einstellungen auf Spalten-Ebene explizit einstellen. Das zeigen wir in dieser Anleitung unter 3.3 Individuelles Design auf Spalten-Ebene (s.u.).

Restliche Design-Optionen

Alle weiteren Optionen, welche du unter der Registerkarte "Design" findest, wirken auf die gesamte Preistabelle auf und nicht auf die Preis-Spalten. Die weiteren Design-Optionen findest du bei fast allen Modulen immer und sind:

  • Größe einstellen
  • Zwischenraum
  • Rand
  • Box Schatten
  • Filter
  • Transformieren
  • Animation

3.3 Individuelles Design auf Spalten-Ebene

Unter 3.2 (s.o.) stellen wir dir die Möglichkeit vor, die Preistabelle auf Modul-Ebene anzupassen. Dabei berückstigt ist auch jene Preis-Spalte, welche wir als Highlight hervorgehoben haben. 

Du kannst aber auch auf Preis-Spalten-Ebene eine gestalterische Anpassung nur für eine bestimmte Preis-Spalte vornehmen. In der Regel ist das eigentlich nie notwendig. Aber in einem konkreten Fall ist es tatäschlich sehr hilfreich: 

Wenn du den Kaufen-Button innerhalb einer hervorgehobenen Preis-Spalte gestalterisch anpassen möchtest. 

Gehe dazu bitte in den Modul-Einstellungen deiner Preis-Tabelle in die Einstellungen jener Spalte, welche du als hervorgehoben gesetzt hast. In unserem Beispiel ist es die 2. Preis-Spalte:

Gehe dann unter der Registerkarte "Design" zur Option "Button" und aktiviere den Regler "Verwenden Sie benuzterdefinierte Stile für Button":

Nun kannst du explizit für den Button in dieser Preis-Spalte das Design individuell anpassen.

3.4 Gleiche Höhe der Preis-Spalten

Inhalt folgt in Kürze.

3.5 Responsive Design der Preistabelle

Inhalt folgt in Kürze.

Hat das deine Frage beantwortet? Danke für dein Feedback Beim Senden Ihres Feedbacks ist ein Problem aufgetreten. Bitte versuche es später erneut.

Brauchst du noch weitere Hilfe? Kontaktiere das Spreadmind Support Team Kontaktiere das Spreadmind Support Team