Cennik Szablony CSS

Elastyczne szablony CSS cenników

Nadaj styl każdemu pakietowi tak, aby klienci mogli od razu zauważyć cenę, okres rozliczeniowy oraz główną różnicę między ofertami, zanim przeczytają choćby jeden wiersz z listą funkcji. Szablony CSS tabel cennikowych dają firmom subskrypcyjnym i usługowym uniwersalne reguły wizualne dla etykiet cenowych, wierszy z parametrami oraz przycisków zakupu.

Stylizacja kwot i rekomendowanych ofert

Każdy element oferty zasługuje na odpowiednią hierarchię wizualną. W pierwszej kolejności wzrok musi przyciągać liczba, następnie dopisek rozliczeniowy, a polecany pakiet często wymaga mocniejszego kontrastu niż opcje standardowe. Praktyczny cennik w CSS uwzględnia detale, których typowe układy kart nigdy nie biorą pod uwagę:

• Odrębne rozmiary czcionek dla nazwy planu, głównej ceny i przyrostka rozliczeniowego, dzięki czemu „/miesiąc” pozostaje czytelne obok kwoty.
• Niewielki odstęp między kwotą a dopiskiem o rozliczeniu, co sprawia, że „za użytkownika” tworzy spójną całość z „49 zł”.
• Wyróżniony pakiet oznaczony ramką, innym kolorem tła lub niewielką plakietką nadawaną za pomocą pojedynczej klasy.
• Przygaszony tekst lub subtelna ikona przy niedostępnych funkcjach, dzięki czemu wykluczone pozycje pozostają widoczne i nie sprawiają wrażenia wliczonych w cenę.

Rzeczywiste dane szybko weryfikują te reguły. Długa nazwa planu może przenieść się do drugiego wiersza, czterocyfrowa cena może ciasno wypełnić kartę, a jeden z pakietów może zawierać bardziej rozbudowany dopisek o rozliczeniu. Dobry arkusz stylów pozwala na zawijanie wierszy i zmniejsza rozmiar ceny na węższych kartach. Funkcja Nicepage Theme Colors pozwala utrzymać wyróżniony pakiet w tej samej palecie barw, co reszta projektu.

Wyrównanie w Gridzie w kolumnach porównawczych

Grid doskonale sprawdza się w tabelach, w których odbiorcy porównują pakiety w poszczególnych strefach. Gdy ceny, wiersze funkcji i przyciski znajdują się na wspólnych liniach poziomych, wzrok płynnie przesuwa się po kolumnach i natychmiast rejestruje różnice. Bez takiego wyrównania pakiet z dłuższą listą funkcji zepchnie swój przycisk niżej niż w sąsiednich kartach.

Flexbox świetnie nadaje się do mniejszej liczby niezależnych kart, takich jak dwa pakiety usług z odmiennymi opisami. Przypięcie każdego przycisku do dolnej krawędzi karty sprawia, że wezwania do działania pozostają w jednej linii, a jednakowa wysokość kart zapobiega wrażeniu, że krótsza oferta jest mniej atrakcyjna.

Punkty przerwania na wąskich ekranach

Trzy kolumny prezentujące się bez zarzutu na szerokim monitorze tracą czytelność na długo przed osiągnięciem szerokości telefonu. Solidny szablon zmniejsza liczbę kolumn w miarę zwężania widoku, przechodząc ostatecznie w pojedynczy pionowy stos. Punkt przerwania powinien nastąpić w momencie, gdy opisy funkcji zaczynają się nieestetycznie łamać, a każda ułożona w stosie karta musi zachować powiązanie ceny, funkcji i przycisku.

Tabele z dużą liczbą parametrów wymagają szczególnej troski, ponieważ ściskanie wielu wierszy w wąskich kolumnach utrudnia ich odbiór. Rozbicie takiego zestawienia na osobne karty pakietów na małych ekranach gwarantuje pełną czytelność każdego wiersza.

Arkusz stylów dla cennika zdaje egzamin wtedy, gdy dłuższa nazwa planu, dodatkowy wiersz funkcji czy nowa adnotacja rozliczeniowa mieszczą się w układzie bez konieczności wprowadzania poprawek wizualnych.