Blok buduje swój charakter poprzez przemyślany kontrast między sekcją hero a rzędem usług. Przyciemnione zdjęcie osoby pracującej przy samochodzie stanowi tło dla białej typografii – w tym wysokiego, wąskiego nagłówka „Wzorowa obsługa klienta” oraz tekstu wprowadzającego. Wyrównanie do lewej nadaje sekcji edytorski ton zdominowany przez obraz, a przycisk „Zobacz więcej” harmonijnie wpisuje się w ten sam kontrastowy styl.
Poniżej sekcji hero trzy karty usług zyskują białe, prostokątne obramowania. Dedykowane fotografie motoryzacyjne i tytuły zapisane wersalikami powtarzają prostszą regułę wizualną w elementach „Wymiana opon”, „Polerowanie lakieru” i „Diagnostyka komputerowa”. Zmiana koloru tła oddziela informacje o usługach od fotograficznego wstępu, lecz wspólne odstępy i poziome wyrównanie zachowują spójność obu stref.
Z punktu widzenia projektowania stron internetowych te relacje mogą współtworzyć szerszy język wizualny, o ile podobne kontrasty, typografia, styl obróbki zdjęć czy obramowania kart pojawią się w innych częściach projektu. Pojedynczy blok nie decyduje wprawdzie o tożsamości całej witryny, lecz dostarcza konkretnych wskazówek, które mogą znaleźć odzwierciedlenie w kolejnych sekcjach. W efekcie powstaje układ, którego system wizualny pozostaje czytelny za sprawą obrazu, hierarchii typograficznej, odstępów i jednolitego stylu kart usług.
Korzystając z Kreator projektów stron internetowych, będziesz mógł dostosowywać kolory, czcionki, nagłówek i fooer, układ, kolumny i inne elementy projektu, a także zawartość i obrazy.
Użyj Ustawień motywu, aby określić wizualne podstawy witryny na wszystkich jej stronach i sekcjach. Ustaw globalne kolory, czcionki i typografię, aby witryna podążała za tym samym kierunkiem projektowania, zamiast stylizować każdą stronę osobno.
Wybierz schemat kolorów i kombinację czcionek, które pasują do charakteru witryny, a następnie dostosuj nagłówki H1-H6, zwykły tekst, linki, przyciski, cytaty, listy i inne style typograficzne. Spójne stosowanie tych ustawień pomaga stworzyć przejrzystą hierarchię wizualną i sprawia, że powtarzające się elementy projektu są rozpoznawalne w całej witrynie.
Użyj Efektów animacji, aby nadać witrynie bardziej dynamiczny i interaktywny wygląd. Elementy i kontenery mogą korzystać z efektów takich jak „Uruchom przy wyświetlaniu”, „Animacja po najechaniu kursorem” i „Synchronizacja animacji z przewijaniem”, aby wprowadzać treści w miarę poruszania się użytkowników po witrynie lub reagowania na interakcję użytkownika. Predefiniowane ustawienia animacji zapewniają gotowe efekty, które można dostosować do stylu wizualnego witryny.
Zastosuj ten sam kierunek projektowania do współdzielonych elementów witryny, takich jak nagłówek, menu i stopka. Panel ustawień motywu łączy w sobie wspólne elementy sterujące stylami dla całej witryny, ułatwiając zachowanie spójnego wyglądu w miarę rozszerzania witryny na wiele stron.
Dzięki takiemu obiegowi pracy szablon staje się użytecznym punktem wyjścia do tworzenia witryny internetowej o spójnej identyfikacji wizualnej, skoordynowanych kolorach i typografii, współdzielonych zasadach projektowania oraz interaktywnych efektach na wszystkich stronach.