Grafitowe tło, biała typografia, kolorowe nagłówki planów i czerwone przyciski zakupu tworzą główny system wizualny tego bloku. Ciemne tło wyraźnie odcina strefę porównawczą od reszty treści, podczas gdy żywe akcenty wyróżniają trzy kolumny z planami bez naruszania struktury informacyjnej tabeli. Cienkie krawędzie oddzielają etykiety cech od parametrów pakietów Starter, Advance i Enterprise, ułatwiając płynne śledzenie kolejnych wierszy.
Hierarchia wizualna ma kluczowe znaczenie, ponieważ tabela obejmuje sześć wierszy ze szczegółami oferty, takimi jak koszt wdrożenia w pierwszym miesiącu, opłaty w kolejnych miesiącach, czas realizacji, wsparcie 24/7 oraz certyfikat. Etykiety wyrównane do lewej określają znaczenie każdego wiersza, a wyśrodkowane wartości sprawiają, że kolumny planów są czytelne przy szybkim skanowaniu wzrokiem. Powtarzalne czerwone przyciski tworzą spójny schemat działania pod zestawieniem danych.
W kontekście szablonu CSS ta sekcja doskonale sprawdza się przy dopracowywaniu właściwości wizualnych wewnątrz bloku: kontrastu, grubości obramowania, ról kolorystycznych, skali typograficznej, zaokrąglenia przycisków, odstępów i wyrównania. Modyfikacje te mogą uwypuklić różnice między nagłówkami planów a wskaźnikami dostępności bez ingerencji w samo porównanie cenowe. W efekcie powstaje wystylizowana sekcja cennika, która stanowi atrakcyjny element większej strony marketingowej, a nie odrębny system ofertowy.
Korzystając z Konstruktor szablonów CSS, będziesz mógł dostosowywać kolory, czcionki, nagłówek i fooer, układ, kolumny i inne elementy projektu, a także zawartość i obrazy.
Dostosuj wygląd tego gotowego szablonu bezpośrednio w edytorze Nicepage. Dostosuj typografię, odstępy, tła, obramowania, kolory, pozycjonowanie i inne właściwości stylów za pomocą kontrolek wizualnych, zachowując jednocześnie łatwość zarządzania układem strony bez konieczności ręcznego pisania kodu CSS.
W przypadku wymagań dotyczących stylizacji wykraczających poza standardowe opcje edytora, użyj niestandardowego kodu CSS, aby dodać reguły docelowe. CSS można zastosować do poszczególnych elementów, określonych stron lub całej witryny, w zależności od zakresu dostosowania, a klasy CSS można wykorzystać do łączenia reguł niestandardowych z wybranymi elementami.
W przypadku projektów, w których rozmiar kodu CSS i wydajność strony mają znaczenie, Nicepage może eksportować minimalny kod CSS dla każdej strony. Zamiast polegać na jednym, większym, wspólnym arkuszu stylów, każda strona może korzystać z osobnego pliku CSS zawierającego tylko reguły stylów wymagane dla danej strony. Według dokumentacji Nicepage, te pliki CSS specyficzne dla danej strony mogą być około dziesięciokrotnie bardziej kompaktowe, co pomaga zredukować zbędny kod CSS i poprawić wydajność ładowania strony.
Ten obieg pracy łączy styl wizualny z opcjonalnym, niestandardowym kodem CSS i zoptymalizowanym, specyficznym dla danej strony kodem CSS, dając dodatkową kontrolę, gdy wymaga tego projekt, bez konieczności ręcznej edycji kodu CSS jako głównego sposobu dostosowywania szablonu.