W panelu Styl strony ustawisz wszystkie najważniejsze elementy wizualne landing page’a. Możesz ustawić globalne kolory i fonty, a także zmienić szerokość strony, widoczność siatki i tło.
Globalne ustawienia pomagają zachować spójny design na całej stronie i znacznie ułatwiają późniejsze zmiany – bez konieczności edytowania każdego widgetu osobno.
Styl strony
W panelu Styl strony znajdziesz ustawienia globalne dotyczące kolorów, fontów, szerokości strony, widoczności siatki oraz tła.
1. Zaloguj się na swoje konto w Landingi i otwórz edytor landing page’a.
2. Panel Styl strony otwiera się automatycznie po wejściu do edycji.
3. Jeśli przełączysz się do innej zakładki, kliknij ikonę suwaków (1) albo użyj strzałki wstecz (2) u góry prawego panelu, żeby wrócić do Stylu strony lub Stylu elementu.
Ustaw kolory globalne
W Stylu strony możesz zdefiniować trzy kolory marki:
- kolor podstawowy,
- kolor drugorzędny,
- kolor trzeciorzędny.
Obok każdego koloru zobaczysz jego odcienie – pozwalają one wprowadzić jaśniejsze lub ciemniejsze warianty danego koloru dla wybranych elementów, zachowując spójność wizualną bez powielania identycznych barw.
Aby zmienić kolor globalny, kliknij pole z kolorem i wybierz nowy odcień.
Wszystkie widgety, w których wybrano kolor podstawowy, drugorzędny lub trzeciorzędny, automatycznie się zaktualizują po zmianie tych wartości w Stylu strony. Dotyczy to m.in. tekstów, przycisków, kształtów, tła, ramek, formularzy, liczników, akordeonów i innych.
Ustaw globalne fonty
W tym samym panelu możesz określić globalne fonty dla:
- nagłówków
- i akapitów.
Aby zmienić globalny font, rozwiń listę i wybierz krój pisma z dostępnych opcji.
Po zapisaniu każdy nowy widget tekstowy oznaczony jako nagłówek lub akapit automatycznie dostosuje się do ustawionych fontów. Jeśli użyjesz niestandardowego fontu tylko w jednym miejscu, ten fragment nie będzie już reagował na zmiany globalnych ustawień fontów.
Wszystkie nowe widgety dodawane do landing page’a automatycznie przejmują globalne kolory i fonty, co ułatwia zachowanie spójnego wyglądu od samego początku.
Inne ustawienia Stylu strony
Oprócz kolorów i fontów panel Styl strony zawiera także:
- Szerokość strony – zmień szerokość układu landing page’a.
- Siatkę – włącz lub wyłącz siatkę w edytorze, by precyzyjnie ustawiać elementy.
- Tło strony – ustaw kolor, gradient lub grafikę jako tło strony.
Stosowanie stylów globalnych w elementach
Po zaznaczeniu elementu możesz wybrać, czy chcesz używać kolorów i fontów globalnych czy własnych.
Kolory
1. Zaznacz element landing page’a i kliknij pole koloru w panelu po prawej.
2. W nowo otwartym okienku przejdź do zakładki Paleta, by wybrać jeden z globalnych kolorów (podstawowy, drugorzędny lub trzeciorzędny) albo jego odcień.
Możesz też dostosować przezroczystość.
3. Jeśli chcesz wybrać niestandardowy kolor, przejdź do zakładki Własny i skorzystaj z próbnika koloru.
UWAGA: Elementy z globalnymi kolorami aktualizują się automatycznie po ich zmianie w Stylu strony. Elementy z kolorami własnymi nie reagują na te zmiany.
4. Kliknięcie Edytuj paletę przeniesie Cię bezpośrednio do ustawień Stylu strony, gdzie możesz zmodyfikować globalne kolory.
Fonty
1. Kliknij widget tekstowy i rozwiń listę fontów w panelu po prawej.
2. Wybierz font globalny (1) – dla nagłówków lub akapitów – albo własny (2).
WAŻNE: Teksty z fontami globalnymi zmieniają się automatycznie, gdy edytujesz je w zakładce Styl strony. Własne fonty nie ulegają zmianom.
3. Kliknięcie Edytuj styl strony przeniesie Cię do ustawień fontów globalnych.
Dobre praktyki
- Zdefiniuj kolory marki, zanim zaczniesz edytować widgety.
- Używaj globalnych kolorów i fontów we wszystkich podstawowych elementach – łatwiej będzie wprowadzać zmiany.
- Zostaw kolory i fonty niestandardowe tylko dla wyjątków, np. wyróżnień lub akcentów wizualnych.
- Korzystaj z odcieni, by utrzymać spójność kolorystyczną i wprowadzić głębię wizualną.
- Wracaj do ustawień globalnych przy każdej zmianie identyfikacji wizualnej lub kampanii.
Przykłady zastosowania
1) Aktualizacja kampanii sezonowych
Przy starcie nowej kampanii możesz zmienić kolory globalne, by dopasować je do nowej stylistyki. Wybrane elementy aktualizują się automatycznie – bez potrzeby ręcznej edycji.
2) Spójność między podstronami
Jeśli duplikujesz strony lub używasz ponownie szablonów landing page’y, styl globalny zapewnia, że nowe elementy będą spójne z dotychczasowym wyglądem.
3) Szybkie testy A/B
Podczas testów A/B możesz szybko zmienić globalny font lub kolor tylko w jednej wersji. Sprawdzisz w ten sposób, który design lepiej konwertuje – bez przebudowy układu.
