Biały panel formularza, ciemny panel informacyjny i fotograficzne tło tworzą spójny układ wizualny bloku jeszcze przed wprowadzeniem jakichkolwiek modyfikacji stylów. Lewy panel wykorzystuje jasną powierzchnię, aby zapewnić czytelność nagłówka „Skontaktuj się z nami” oraz pól imienia, adresu e-mail i wiadomości. Subtelne podkreślenia pól tekstowych wraz z przyciskiem wysyłania nadają formularzowi lekki charakter, chroniąc go przed nadmiernym nagromadzeniem obramowanych ramek. Po prawej stronie trzy ciemne elementy powielają tę samą stylistykę kart dla sekcji Zadzwoń do nas, Lokalizacja i Godziny otwarcia, a okrągłe ikony wprowadzają drobny pomarańczowy akcent i stały punkt skupienia wzroku.
W kontekście szablonu CSS najistotniejsza praca nad stylami skupia się na relacjach między tymi elementami. Opracowanie tła pozwala zachować kontrast między fotografią a dwoma uniesionymi panelami, podczas gdy odstępy wyraźnie rozdzielają trzy karty informacyjne. Typografia może odróżniać zwarty, czarny nagłówek od mniejszych etykiet formularza i danych kontaktowych. Obramowania, zaokrąglenia rogów, kolory ikon i przezroczystość paneli można modyfikować w sposób spójny, bez wpływu na funkcję kontaktową bloku. W rezultacie powstaje sekcja, której wygląd można precyzyjnie dopracować za pomocą konkretnych reguł dotyczących kolorów, odstępów, krojów pisma i powierzchni, zamiast polegać na ogólnych, nadrzędnych dekoracjach witryny.
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.