10 darmowych fragmentów CSS do tworzenia responsywnych tabel cen

Strona z cennikiem jest podstawą każdego sklepu internetowego. Jest używany w produktach SaaS, firmach usługowych i sklepach eCommerce w całej sieci.

Żadna strona z cenami nie byłaby kompletna bez tabeli cen porównującej opcje, funkcje i (oczywiście) ceny. Ale projektowanie od podstaw może być kłopotliwe.

Tutaj mogą pomóc te tabele cenowe open source. Wszystkie są w pełni responsywne i świetnie sprawdzają się jako szablony, niezależnie od tego, czy chcesz dostosować swój własny, czy po prostu ponownie wykorzystać istniejący kod, aby zaoszczędzić czas.

1. Stolik ikon autorstwa Travisa Williamsona

Świetne efekty wizualne zawsze się sprzedają. Mogą to być zdjęcia produktów lub niestandardowe ilustracje, ale wizualizacje przyciągają uwagę szybciej niż tekst.

Ta ikoniczna tabela cen jest doskonałym przykładem tego, co jest możliwe dzięki wizualnym kolumnom tabeli. Dodając ikony, możesz informować klientów, co otrzymują z każdą paczką, zanim jeszcze cokolwiek przeczytają. Ikony pokazują różną moc i funkcje. Najmniejszy plan ma papierowy samolot, podczas gdy największy plan wykorzystuje pełną rakietę. Porozmawiaj o kontraście!

Zobacz pióro
Tabela cenowa autorstwa Travisa Williamsona (@travisw)

2. Zebra Striping w/Colors by Agustin Ortiz

Ten przykład ma znacznie prostszą tabelę cen i jest zgodny z bardziej konwencjonalnymi zasadami projektowania. Wykorzystuje paski zebry, duże nagłówki cen i różne kolory, aby jeden konkretny format cen wyróżniał się na tle innych.

Kolory mogą wydawać się nieco mocne, więc nie są idealne dla każdego układu. Ale możesz łatwo zmienić kolory i nadal zachować ten sam format, aby ta tabela cen działała na Twojej własnej stronie.

Zobacz tabelę cen piór | Tabla de Precios autorstwa Agustina Ortiza

3. Ciemnofioletowy stół autorstwa Mike'a Torosiana

Aby uzyskać ciemniejszy i bogatszy projekt stołu, sprawdź tę fioletową tabelę cen. Wykorzystuje gradienty tła i efekty najechania obramowaniem, aby stworzyć jedną z najbardziej profesjonalnych tabel cenowych w Internecie. Jest również w pełni responsywny, więc elementy tabeli dzielą się na wiersze, gdy przeglądarka staje się mniejsza.

Zobacz tabelę cen piór autorstwa Mike'a Torosiana

4. Profesjonalna wycena LittleSnippets

Witryny B2B często szukają bardziej profesjonalnych projektów, które odbiegają od kreatywnych schematów kolorów i obcych ikon. Ten projekt cenowy jest jednym z takich przykładów, zgodnie z typową kolorystyką ciemnych i jasnych odcieni.

Jedna kolumna cenowa wykorzystuje ciemnoniebieskie podświetlenie, aby wyskoczyć z reszty tabeli. Stosowanie tej techniki jest standardową praktyką, ponieważ może ona prowadzić do wyższego współczynnika konwersji. Dlatego plan „profesjonalny” wykorzystuje również cień, który pojawia się na innych kolumnach. Ale po zmniejszeniu rozmiaru spada do formacji stosu, co ułatwia przeglądanie.

Zobacz pióro #1214 – Tabela cen autorstwa LittleSnippets

5. Tabela z efektami zawisu autorstwa Nidheesha Balachandran

W tym projekcie tabeli cenowej znajdziesz wspaniałe efekty najechania kursorem, które dodają koloru przyciemnionym nagłówkom tabeli. Każdy z nich pozostawia miejsce na wybrany obraz tła, a efekt najechania jest zarządzany za pomocą CSS.

Inną rzeczą, którą lubię, jest zdarzenie kliknięcia powiązane z całą kolumną tabeli. W ten sposób, jeśli odwiedzający kliknie gdziekolwiek w kolumnie, przeniesie go bezpośrednio na odpowiednią stronę rejestracji.

Zobacz tabelę cen piór autorstwa Nidheesha Balachandrana

6. Tabele cenowe Bootstrap autorstwa Sahara Ali Raza

Jestem wielkim fanem Bootstrap, ponieważ jest tak wiele do zrobienia z frameworkiem i powiązanymi z nim motywami. Jednym z takich przykładów jest ta tabela cen.

Wiele z tych projektów jest zakodowanych na zamówienie, w tym pochyłe tła nagłówka i animacje najechania kursorem. Ale ogólny układ opiera się na Bootstrap, co sprawia, że ​​domyślnie jest w pełni responsywny. Typografia jest oszałamiająca, a także uwielbiam animacje najechania kursorem podczas poruszania się po każdym rzędzie. Jest to czysty projekt stołu, który może działać na prawie każdym typie witryny.

Zobacz tabelę cenową Pen Bootstrap Sahar Ali Raza

7. Tabela cen projektowania materiałów autorstwa Morten Srensen

Jeśli podoba Ci się projekt materiałów Google, na pewno spodoba Ci się ta tabela cen. Jest to tabela interfejsu użytkownika materiałów zawierająca wiele funkcji sugerowanych przez Google, takich jak najechanie cieniem i płaskie schematy kolorów.

Zobacz pióro
Tabele cenowe do projektowania materiałów (flexbox) autorstwa Mortena Srensena.

8. Przejrzysta i prosta tabela cen autorstwa Daniela Hearna

Super czysty i lekki najlepiej opisuje tę białą tabelę cen. Nie opiera się na wielu kolorach lub wymyślnych funkcjach, aby się wyróżnić. Zamiast tego używa szarego dla nagłówków i czarno-białego dla kontrastu tekstu. To faktycznie działa dobrze, ponieważ przyciski CTA zachowują silny zielony efekt konturu.

Zmniejszając kolor w tabeli, zwracasz uwagę na jedyne obszary, w których występuje kolor, co zwykle zachęca do większej liczby kliknięć. Ponieważ jest to czysty CSS, możesz łatwo zaktualizować kolor przycisku, aby dopasować go do swojego projektu.

Zobacz tabelę cen piór -1 autorstwa Daniela Hearn

9. Tabele WIP autorstwa Dylana Mcleod

Jak na prace w toku muszę przyznać, że ten kolorowy zestaw cenników wygląda niesamowicie. Jest zgodny z wieloma tradycyjnymi technikami, takimi jak podświetlanie nagłówków tabeli i utrzymywanie jednej kolumny większej od pozostałych.

Ale jestem pod wrażeniem różnych wyborów kolorystycznych, które tak dobrze się ze sobą komponują. To prawie tak, jakby te tabele miały kilka różnych nagłówków i wszystkie przyciągają twoją uwagę z różnych powodów.

Zobacz tabele cen piór Dylana Mcleod

10. Opowieść o cenach Flexbox autorstwa CSSGirl

Teraz, aby uzyskać prawdziwy projekt stołu skierowanego do przodu, sprawdź ten stół flexbox. Po najechaniu myszą na tabelę każda kolumna powiększa się nieco i zwiększa kolor tła. Dzięki temu kolumna wyróżni się na tle innych i szybciej przyciągnie uwagę. To fajny efekt, który przenosi się na przejścia CSS tabeli podczas zmiany rozmiaru przeglądarki.

Chociaż największą cechą jest tutaj użycie flexbox do formatowania kolumn tabeli. Ten przykład udowadnia, że ​​flexbox to przyszłość responsywnych stron internetowych.

Zobacz plan cenowy pióra Flexbox autorstwa Lindsey