Preisgestaltung CSS-Vorlagen

Flexible Preistabellen-CSS-Vorlagen

Gestalten Sie jede Tarifstufe so, dass Kunden den Preis, den Abrechnungszeitraum und den Hauptunterschied zwischen den Plänen erkennen können, bevor sie eine einzige Zeile der Leistungsübersicht lesen. Preistabellen-CSS-Vorlagen bieten Abonnement- und Dienstleistungsunternehmen wiederholbare visuelle Regeln für Preiskennzeichnungen, Funktionszeilen und Kaufelemente.

Gestaltung von Preisangaben und empfohlenen Angeboten

Jeder Bestandteil eines Tarifs verdient sein eigenes visuelles Gewicht. Die Ziffer muss als Erstes wahrgenommen werden, der Abrechnungshinweis danach, und eine empfohlene Tarifstufe erfordert oft einen stärkeren Kontrast als Standardoptionen. Eine praktische CSS-Preistabelle meistert Details, die bei herkömmlichen Card-Layouts gar nicht auftreten:

• Getrennte Schriftgrößen für den Tarifnamen, den Hauptpreis und den Abrechnungszusatz, sodass „/Monat“ neben der Zahl gut lesbar bleibt.
• Geringe Abstände zwischen dem Betrag und seinem Abrechnungsvermerk, wodurch „pro Benutzer“ visuell fest mit „49 €“ verknüpft bleibt.
• Eine hervorgehobene Tarifstufe, die durch einen Rahmen, einen abweichenden Hintergrund oder ein kleines Badge über eine einzige Klasse gekennzeichnet wird.
• Abgedunkelter Text oder ein dezentes Icon für nicht enthaltene Funktionen, damit ausgeschlossene Punkte sichtbar bleiben und niemals versehentlich als enthalten wirken.

Echte Daten stellen diese Regeln schnell auf die Probe. Ein langer Tarifname bricht möglicherweise auf zwei Zeilen um, ein vierstelliger Preis kann die Karte überladen, und ein Tarif enthält vielleicht einen längeren Abrechnungshinweis. Ein gutes Stylesheet lässt Zeilenumbrüche zu und skaliert den Preis auf schmaleren Karten herunter. Über Nicepage Theme Colors bleibt die hervorgehobene Stufe stets in der Farbpalette des übrigen Projekts.

Grid-Ausrichtung über Vergleichsspalten hinweg

Grid eignet sich hervorragend für Tabellen, bei denen Besucher Tarife Bereich für Bereich vergleichen. Wenn Preise, Funktionszeilen und Buttons auf gemeinsamen horizontalen Linien liegen, wandert der Blick quer über die Spalten und erfasst sofort alle Unterschiede. Ohne diese Ausrichtung verschiebt ein Tarif mit einer längeren Funktionsliste seinen Button weiter nach unten als die Nachbarspalten.

Flexbox funktioniert ideal für wenige unabhängige Karten, wie etwa zwei Dienstleistungspakete mit unterschiedlichen Beschreibungen. Wird jeder Button am unteren Rand seiner Karte fixiert, bleiben die Handlungsaufforderungen auf gleicher Höhe, und einheitliche Höhen verhindern, dass eine Karte mit weniger Inhalt unterlegen wirkt.

Breakpoints auf schmalen Bildschirmen

Drei Spalten, die auf einem breiten Display hervorragend aussehen, wirken auf schmaleren Ansichten oft schon lange vor typischer Smartphone-Breite überladen. Eine solide Vorlage reduziert die Spaltenanzahl schrittweise, wenn der Vergleich enger wird, und endet in einem einspaltigen Stapel. Der Breakpoint sollte genau dann greifen, wenn der Text der Funktionsbeschreibungen unvorteilhaft umzubrechen beginnt, wobei jede gestapelte Karte ihren Preis, ihre Funktionen und ihren Button kompakt beisammenhalten muss.

Tabellen mit vielen Funktionen erfordern besondere Sorgfalt, da das Zusammendrängen vieler Zeilen in schmale Spalten die Lesbarkeit beeinträchtigt. Wird eine solche Tabelle auf kleinen Bildschirmen in einzelne Tarifkarten aufgeteilt, bleibt jede Zeile perfekt lesbar.

Ein CSS-Stylesheet für Preise beweist seine Qualität dann, wenn ein längerer Tarifname, eine zusätzliche Funktionszeile oder ein neuer Abrechnungshinweis ohne manuelle Layout-Korrekturen sofort passt.