Wie gestaltet man eine Pricing Section?
Eine Pricing Section macht aus Interesse eine Entscheidung, deshalb müssen sich die Optionen leicht vergleichen lassen. Die Sections hier umfassen klassische Tabellen mit drei Spalten, gestapelte Karten, einen Schieberegler, der ein Angebot berechnet, Zusatzleistungen zum Einpacken in einen Warenkorb, Stufen für Abos und Mitgliedschaften sowie Zeilen, die Tarife Punkt für Punkt vergleichen.
Drei Tarife sind die übliche Wahl: ein Einstieg, ein empfohlener Tarif, der sichtbar markiert ist, und einer für größeren Bedarf. Liste die Leistungen als kurze Zeilen, die man gegen den eigenen Bedarf abhaken kann, und setz Preis und Abrechnungszeitraum auf jeder Karte an dieselbe Stelle. Jede Section ist eine React-Datei mit Tailwind-Klassen, Preise und Leistungen stehen als einfache Werte in der Datei.
Passende Guides
Weitere Section-Kategorien
Häufige Fragen
In den meisten Fällen drei. Zwei lassen keine Mitte, vier und mehr machen den Vergleich schwer. Markiere den Tarif, den du empfiehlst.
Beide mit einem Umschalter, wenn du beides anbietest. Zeig den Jahrespreis pro Monat und nenne die Ersparnis, etwa „2 Monate gratis“.
Ja. Preise sind einfache Werte in der Datei. Ändere Zahl und Währungszeichen oder formatiere sie mit Intl.NumberFormat für andere Länder.
Deine Frage war nicht dabei? Wir helfen gern weiter.
Kontakt aufnehmen