10 kostenlose CSS-Snippets zum Erstellen responsiver Preistabellen

Die Preisseite ist ein Grundnahrungsmittel für jeden Online-Shop. Es wird für SaaS-Produkte, Dienstleistungsunternehmen und E-Commerce-Shops im gesamten Internet verwendet.

Und keine Preisseite wäre vollständig ohne eine Preistabelle, in der Optionen, Funktionen und (natürlich) Preise verglichen werden. Es kann jedoch mühsam sein, Ihre eigenen von Grund auf neu zu entwerfen.

Hier können diese Open-Source-Preistabellen helfen. Diese sind alle vollständig reaktionsschnell und eignen sich hervorragend als Vorlagen, unabhängig davon, ob Sie Ihren eigenen Code anpassen oder einfach vorhandenen Code wiederverwenden möchten, um Zeit zu sparen.

1. Icon Table von Travis Williamson

Großartige Bilder verkaufen sich immer. Dies können Produktfotos oder benutzerdefinierte Illustrationen sein, aber visuelle Elemente erregen schneller Aufmerksamkeit als Text.

Diese symbolisierte Preistabelle ist ein hervorragendes Beispiel dafür, was mit visuellen Tabellenspalten möglich ist. Indem Sie Symbole hinzufügen, können Sie Kunden darüber informieren, was sie mit jedem Paket erhalten, bevor sie überhaupt etwas lesen. Die Symbole zeigen unterschiedliche Leistung und Funktionen. Der kleinste Plan hat ein Papierflugzeug, während der größte Plan ein volles Raketenschiff verwendet. Sprechen Sie über Kontrast!

Siehe den Stift
Preistabelle von Travis Williamson (@travisw)

2. Zebrastreifen mit Farben von Agustin Ortiz

Dieses Beispiel hat eine viel einfachere Preistabelle und folgt konventionelleren Designregeln. Es verwendet Zebrastreifen, große Preiskopfzeilen und verschiedene Farben, damit sich ein bestimmtes Preisformat von den anderen abhebt.

Die Farben können sich etwas kräftig anfühlen, daher ist es nicht für jedes Layout perfekt. Aber Sie können die Farben einfach ändern und trotzdem das gleiche Format beibehalten, damit diese Preistabelle auf Ihrer eigenen Website funktioniert.

Siehe Stift-Preistabelle | Tabla de Precios von Agustin Ortiz

3. Dunkelvioletter Tisch von Mike Torosian

Für ein dunkleres und reichhaltigeres Tischdesign sehen Sie sich diese violette Preistabelle an. Es verwendet Hintergrundverläufe und Rahmen-Hover-Effekte, um eine der professionellsten Preistabellen im Internet zu erstellen. Es reagiert auch vollständig, sodass die Tabellenelemente in Zeilen zerlegt werden, wenn der Browser kleiner wird.

Siehe Stiftpreistabelle von Mike Torosian

4. Professionelle Preise von LittleSnippets

B2B-Websites suchen oft nach professionelleren Designs, die sich von kreativen Farbschemata und überflüssigen Symbolen abheben. Dieses Preisdesign ist ein solches Beispiel, das einem typischen Farbschema aus dunklen und hellen Farbtönen folgt.

Eine Preisspalte verwendet eine dunkelblaue Hervorhebung, um sich vom Rest der Tabelle abzuheben. Es ist üblich, dieser Technik zu folgen, da sie zu einer höheren Conversion-Rate führen kann. Aus diesem Grund verwendet der „Profi“-Plan auch einen Schlagschatten, der über den anderen Spalten erscheint. Aber wenn es kleiner verkleinert wird, fällt es in eine Stapelformation, um das Durchsuchen zu erleichtern.

Siehe Pen #1214 – Preistabelle von LittleSnippets

5. Tabelle mit Hover-Effekten von Nidheesh Balachandran

In diesem Preistabellendesign finden Sie einige wunderschöne Hover-Effekte, die den abgedunkelten Tabellenkopfzeilen Farbe verleihen. Sie lassen jeweils Platz für ein Hintergrundbild Ihrer Wahl, und der Hover-Effekt wird über CSS gesteuert.

Eine andere Sache, die ich mag, ist das Click-Ereignis, das an die gesamte Tabellenspalte gebunden ist. Auf diese Weise gelangt ein Besucher, wenn er irgendwo auf die Spalte klickt, direkt zur entsprechenden Anmeldeseite.

Siehe die Preistabelle für Stifte von Nidheesh Balachandran

6. Bootstrap-Preistabellen von Sahar Ali Raza

Ich bin ein großer Fan von Bootstrap, da Sie mit dem Framework und den zugehörigen Themen so viel tun können. Ein solches Beispiel ist dieses Preistabellenbeispiel.

Ein Großteil dieses Designs ist kundenspezifisch codiert, einschließlich der schrägen Header-Hintergründe und der Hover-Animationen. Das Gesamtlayout basiert jedoch auf Bootstrap, wodurch es standardmäßig vollständig ansprechbar ist. Die Typografie ist umwerfend und ich liebe auch die Hover-Animationen, während ich mich über jede Zeile bewege. Dies ist ein sauberes Tabellendesign, das für fast jede Art von Website funktionieren könnte.

Siehe die Pen Bootstrap-Preistabelle von Sahar Ali Raza

7. Preistabelle für Materialdesign von Morten Srensen

Wenn Ihnen das Materialdesign von Google gefällt, wird Ihnen diese Preistabelle definitiv gefallen. Es ist eine materielle UI-Tabelle, die vielen der von Google vorgeschlagenen Funktionen wie Schlagschatten-Hover und flache Farbschemata folgt.

Siehe den Stift
Preistabellen für Materialdesign (Flexbox) von Morten Srensen.

8. Saubere und einfache Preistabelle von Daniel Hearn

Super sauber und leicht beschreibt diese weiße Preistabelle am besten. Es ist nicht auf viele Farben oder ausgefallene Merkmale angewiesen, um sich abzuheben. Stattdessen verwendet es Grau für die Kopfzeilen und Schwarz/Weiß für den Textkontrast. Dies funktioniert tatsächlich gut, da die CTA-Schaltflächen einen starken grünen Umrisseffekt behalten.

Wenn Sie die Farbe in einer Tabelle reduzieren, lenken Sie die Aufmerksamkeit auf die einzigen Bereiche mit Farbe, was normalerweise zu mehr Klicks führt. Da es sich um reines CSS handelt, können Sie die Schaltflächenfarbe problemlos an Ihr Design anpassen.

Siehe Pen-Preistabelle -1 von Daniel Hearn

9. WIP-Tabellen von Dylan Mcleod

Für ein in Arbeit befindliches Produkt muss ich sagen, dass dieses farbenfrohe Preistabellen-Set unglaublich aussieht. Es folgt vielen traditionellen Techniken wie dem Hervorheben der Tabellenüberschriften und dem Halten einer Spalte größer als die anderen.

Aber ich bin am meisten beeindruckt von der unterschiedlichen Farbauswahl, die so gut zusammenpasst. Es ist fast so, als hätten diese Tabellen ein paar verschiedene Überschriften, und sie alle ziehen aus verschiedenen Gründen Ihre Aufmerksamkeit auf sich.

Siehe die Preistabellen für Stifte von Dylan Mcleod

10. Flexbox Pricing Tale von CSSGirl

Sehen Sie sich für ein wirklich nach vorne gerichtetes Tischdesign diesen Flexbox-Tisch an. Wenn Sie mit der Maus über die Tabelle fahren, wird jede Spalte etwas größer und erhöht die Hintergrundfarbe. Dadurch hebt sich die Säule vom Rest ab und erregt schneller Aufmerksamkeit. Es ist ein netter Effekt, der sich auf die CSS-Übergänge der Tabelle überträgt, während die Größe des Browsers geändert wird.

Obwohl das größte Feature hier die Verwendung von Flexbox zum Formatieren der Tabellenspalten ist. Dieses Beispiel beweist, dass Flexbox die Zukunft responsiver Websites ist.

Sehen Sie sich den Pen Flexbox-Preisplan von Lindsey an