Preistabellen erstellen und bearbeiten

Du kannst auf einer Seite Preise und Leistungen in übersichtlichen Tabellen oder Karten darstellen. Preistabellen zeigen Preise, Leistungsmerkmale und Aktionsschaltflächen in einer vergleichbaren Form – entweder als große Karten nebeneinander oder als tabellarische Übersicht.

Voraussetzungen

Du brauchst die Berechtigung, eine Website zu bearbeiten. Es gibt zwei verschiedene Preistabellen-Varianten – wähle die, die zu deinem Layout passt.

So gehst du vor

Variante 1: Preiskarten nebeneinander

Diese Variante zeigt Preise als Karten in einer Reihe. Jede Karte hat einen Titel, einen Preis, eine Liste von Merkmalen und einen Aktionsschaltfläche.

1. Füge einen neuen Block hinzu – wähle dabei den Block für Preistabellen.

2. Öffne die Einstellungen des Blocks. Im Bereich Allgemein trägst du eine Bezeichnung ein – diese ist intern und hilft dir später, den Block zu erkennen, wenn du ihn verlinken möchtest.

3. Mit dem Schieberegler Karten pro Zeile bestimmst du, wie viele Karten nebeneinander auf dem Bildschirm stehen sollen. Du kannst zwischen 1 und 12 wählen.

4. Scrolle zum Bereich Aktionen. Dort klickst du auf Karte hinzufügen, um die erste Preiskarte zu erstellen.

5. Jetzt bearbeitest du die neue Karte:

   • Icon auswählen: Klicke auf das Symbol links in der Karte. Ein Fenster öffnet sich, in dem du aus einer Liste von Icons wählst. Das Icon wird neben dem Kartentitel angezeigt.
   • Titel eingeben: Trage unter Titel den Namen der Leistungsstufe ein (z. B. „Basis", „Standard").
   • Animation (optional): Wähle aus dem Auswahlfeld Animation eine Bewegung, die die Karte beim Laden der Seite zeigt, oder lass es auf „Keine Animation" stehen.
   • Preis eintragen: Im Feld Text unter der Karte trägst du die Preiszahl ein (z. B. „49,00").
   • Preiseinheit: Im Feld daneben notierst du, in welchem Zeitraum oder Menge der Preis gilt (z. B. „/Monat").
   • Schaltflächentext: Trage den Text für die Aktionsschaltfläche ein (z. B. „Jetzt buchen").
   • Schaltflächendesign: Wähle mit dem Auswahlfeld daneben das Aussehen der Schaltfläche – Farbe und Größe.
   • Navigationsziel: Klicke auf das Feld, um eine Seite auszuwählen, zu der die Schaltfläche führen soll.

6. Merkmale hinzufügen: Scrolle in der Karte nach unten. Klicke auf Feature hinzufügen, um ein Leistungsmerkmal zur Karte hinzuzufügen (z. B. „10 Nutzer", „Kostenloser Support").

7. Bei jedem neuen Merkmal:

   • Wähle ein kleines Icon aus.
   • Trage den Text des Merkmals ein.
   • Wiederhole den Vorgang für alle Merkmale dieser Karte.

8. Speichere die Karte, indem du oben rechts auf Speichern klickst.

9. Für jede weitere Preisstufe klickst du erneut auf Karte hinzufügen und wiederholst die Schritte 5–8.

10. Karten umsortieren: Falls nötig, nutze die Pfeile neben jeder Karte, um sie nach oben oder unten zu verschieben.

Variante 2: Tabellarische Preisübersicht

Diese Variante zeigt Preise in einer Tabellenform mit Kopfzeile und mehreren nebeneinander angeordneten Tabellen.

1. Füge einen neuen Block hinzu – wähle diesmal die Variante für Preistabellen-Übersicht.

2. Öffne die Einstellungen. Im Bereich Allgemein trägst du wieder eine Bezeichnung ein.

3. Im Bereich Text:

   • Überschrift: Trage eine Hauptüberschrift ein (z. B. „Unsere Preise").
   • Kleine Überschrift: Trage einen Untertitel ein (z. B. „Vergleichen Sie unsere Angebote").

4. Im Bereich Tabellen stellst du mit dem Schieberegler Tabellen pro Reihe ein, wie viele Tabellen nebeneinander stehen sollen (1 bis 4).

5. Klicke auf Tabelle hinzufügen, um die erste Tabelle zu erstellen.

6. Bearbeite die Tabelle:

   • Icon: Wähle ein Icon für diese Tabelle aus.
   • Überschrift: Der Name der Leistungsstufe (z. B. „Starter").
   • Badge Text: Ein Etikett, das besonders hervorsticht – oft für eine Empfehlung genutzt (z. B. „Beliebt").
   • Text zentrieren: Aktiviere diese Schaltfläche, wenn der Text mittig ausgerichtet sein soll.
   • Kleine Überschrift: Ein zusätzlicher Hinweistext unter dem Namen.
   • Preis: Die Preiszahl.
   • Preisperiode: Der Zeitraum (z. B. „pro Monat").
   • Animation: Wähle eine Bewegung beim Laden.
   • Schaltflächentext: Der Text der Aktionsschaltfläche (z. B. „Mehr erfahren").
   • Schaltflächendesign: Das Aussehen.
   • Navigationsziel: Zielseite beim Klick.

7. Merkmale hinzufügen: Klicke auf Feature hinzufügen, um Leistungsmerkmale zur Tabelle hinzuzufügen. Bei jedem Merkmal wählst du wieder ein Icon und trägst den Text ein.

8. Speichere und wiederhole für weitere Tabellen.

Aufbau der Preistabelle

Allgemein-Bereich: Hier legst du fest, wie breit eine Karte oder Tabelle ist und wie sie auf der Seite verteilt werden soll.

Text-Bereich: Überschrift und Untertitel der gesamten Tabellen-Gruppe (nur bei der tabellarischen Variante).

Aktionen/Tabellen-Bereich: Hier erstellst, bearbeitest und sortierst du einzelne Karten oder Tabellen. Jede Karte oder Tabelle enthält einen Preis, ein Icon, einen Namen und eine Liste von Merkmalen, die die Leistung beschreiben.

Schaltflächen pro Karte/Tabelle:

• Der Pfeil nach unten verschiebt die Karte/Tabelle nach unten.
• Der Pfeil nach oben verschiebt sie nach oben.
• Das Kopiersymbol erstellt eine Kopie mit allen Einstellungen.
• Das Mülleimersymbol löscht die Karte/Tabelle.

Merkmale: Eine Liste von Text-Icons-Paaren, die einzeln nach oben und unten verschoben, kopiert oder gelöscht werden können.

Was danach passiert

Deine Preistabelle wird auf der Seite angezeigt, sobald du sie speicherst und die Seite veröffentlichst. Besucher können die Schaltflächen anklicken und werden zur eingestellten Zielseite geleitet.

Du kannst die Tabelle jederzeit erneut öffnen und bearbeiten: Karten und Tabellen hinzufügen oder entfernen, die Reihenfolge ändern, Preise anpassen oder Merkmale ergänzen.

Tipps und Hinweise

• Icon-Auswahl: Du brauchst kein Icon zu wählen – lässt du das Feld leer, wird nur Text angezeigt.
• Merkmale kopieren: Mit dem Kopiersymbol duplizierst du schnell ähnliche Preismerkmale – spare Zeit bei mehreren Tabellen.
• Text formatieren: Überschrift und Untertitel unterstützen Markdown – du kannst also Text fett oder kursiv formatieren (siehe Website-Inhalte mit Markdown formatieren).
• Reihenfolge zählt: Besucher vergleichen Preise von links nach rechts – lege deine beste Leistung an zweiter Stelle, damit sie ins Auge fällt.
• Große Unterschiede: Nutze das Badge-Text-Feld bei der tabellarischen Variante, um eine Empfehlung hervorzuheben.
• Mobile Ansicht: Die Karten und Tabellen passen sich automatisch an kleinere Bildschirme an – teste deine Seite auch am Smartphone.