Możesz łatwo dostosować kolory i czcionki do stylu swojej firmy. W tym przewodniku dowiesz się, jak aktualizować czcionki, ustawiać kolory marki, tworzyć tła z gradientem i nie tylko — wszystko to z poziomu pulpitu nawigacyjnego Notiondesk.
Dostosowywanie czcionek
Wybierz podstawową czcionkę (tytuły i nagłówki)
Możesz zmienić czcionkę używaną w tytułach, nagłówkach i innych głównych elementach centrum pomocy.
Aby zaktualizować podstawową czcionkę:
- Otwórz pulpit nawigacyjny Notiondesk.
- Przejdź do sekcji Dostosowanie.
- W ustawieniach Branding znajdź opcję Primary Font (Główna czcionka).
- Wybierz czcionkę z dostępnej listy. Dostępne opcje to między innymi Inter, Lora, Montserrat, Noto, Roboto i inne.
Po wybraniu nowa czcionka zostanie automatycznie zastosowana do tytułów i nagłówków centrum pomocy.
Wybierz drugą czcionkę (tekst główny)
Możesz również ustawić inną czcionkę dla tekstu artykułów centrum pomocy.
Aby zaktualizować drugą czcionkę:
- W panelu Notiondesk przejdź do sekcji Dostosowanie.
- W sekcji „Branding” znajdź opcję „Czcionka dodatkowa”.
- Wybierz czcionkę z dostępnej listy, np. Inter, Lora, Montserrat, Noto, Roboto i inne.
Wybrana czcionka będzie stosowana we wszystkich tekstach artykułów w całym centrum pomocy.
Dobra czcionka dodatkowa sprawia, że artykuły są łatwe do czytania. Możesz łączyć czcionki, aby uzyskać charakterystyczny styl, lub używać tej samej czcionki jako głównej i dodatkowej, aby zachować spójność.
Dostosowywanie kolorów
Zaktualizuj kolory marki
Możesz łatwo zaktualizować główne kolory centrum pomocy, aby dopasować je do swojej marki.
Aby zmienić kolory marki:
- Otwórz pulpit nawigacyjny Notiondesk.
- Przejdź do sekcji Dostosowanie.
- W zakładce Branding możesz zaktualizować następujące kolory:
| Kolor | Opis |
|---|---|
| Kolor podstawowy | Używany dla elementów nawigacyjnych, takich jak przyciski i aktywne linki. |
| Kolor tekstu | Używany w głównym tekście centrum pomocy. |
| Kolor linków | Używany dla standardowych hiperłączy. |
| Kolor linku po najechaniu kursorem | Zmienia kolor linku, gdy użytkownik najeżdża na niego kursorem. |
| Kolor tła | Ustawia kolor tła całego centrum pomocy. |
Za każdym razem, gdy wybierzesz nowy kolor, zmiana zostanie natychmiast odzwierciedlona na Twojej stronie internetowej.
Dostosuj kolory nagłówka
Sekcja nagłówka centrum pomocy zawiera linki nawigacyjne, które odwiedzający widzą jako pierwsze. Możesz zaktualizować kolory linków, aby dopasować je do swojej marki lub poprawić widoczność.
Aby zmienić kolory linków nagłówka:
- Przejdź do sekcji Dostosowanie w panelu sterowania Notiondesk.
- Otwórz zakładkę Nagłówek.
- Zaktualizuj następujące opcje:
| Kolor | Opis |
|---|---|
| Kolor linków | Ustawia domyślny kolor linków w nagłówku. |
| Kolor linku po najechaniu kursorem | Ustawia kolor linków po najechaniu na nie kursorem. |
Dostosuj tło bloku Hero
Blok Hero to górna sekcja centrum pomocy, często pierwsza rzecz, którą widzą odwiedzający. Możesz go spersonalizować, wybierając kolor tła lub gradient, aby lepiej odzwierciedlał charakter Twojej marki.
Użyj prostego koloru tła
Jeśli wolisz czyste, jednolite tło zamiast obrazu:
- Przejdź do sekcji „Dostosowanie” na pulpicie nawigacyjnym.
- Otwórz zakładkę Hero Block.
- Wybierz tło: Kolor.
- Wybierz kolor tła z palety lub wklej kod szesnastkowy swojej marki.
Wybrany kolor wypełni całe tło bloku Hero.
Użyj tła z gradientem
Gradienty pozwalają na płynne łączenie wielu kolorów, co jest doskonałym sposobem na dodanie głębi nagłówkowi bez użycia obrazów.
Aby ustawić gradient:
- W zakładce Hero Block ustaw opcję Background na Gradient.
- Wybierz typ gradientu:
- Liniowy: kolory płyną w linii prostej.
- Promieniowy: kolory rozchodzą się promieniście od środka.
- W przypadku gradientów liniowych dostosuj obrót (kąt), aby kontrolować kierunek mieszania.
- Dodaj kolory gradientu. Możesz ustawić maksymalnie 5 kolorów, każdy z własną wartością procentową i kodem koloru.
Gradienty można w dużym stopniu dostosować do własnych potrzeb. Możesz tworzyć subtelne przejścia między dwoma kolorami lub zdecydować się na odważniejsze, wielokolorowe połączenia. Pamiętaj tylko, aby tekst pozostał czytelny.
Dostosuj kolory kart i stopek
Możesz również spersonalizować kolory używane w kartach kolekcji, kartach artykułów i stopce centrum pomocy, aby wszystko było spójne wizualnie i zgodne z wizerunkiem marki.
Karty kolekcji i artykułów
Każda kolekcja lub artykuł jest wyświetlany w formie karty w centrum pomocy. Możesz zmienić kolor tła tych kart, aby dopasować je do swojego stylu lub rozróżnić sekcje.
Aby zaktualizować kolory kart:
- Przejdź do sekcji Dostosowanie w panelu sterowania Notiondesk.
- Otwórz zakładkę Kolekcje lub Artykuły.
- Wybierz kolor tła
Wybierz jednolite kolory, które zapewnią czytelność tekstu wewnątrz kart.
Kolory stopki
Stopka to sekcja znajdująca się na dole każdej strony centrum pomocy. Zazwyczaj zawiera linki lub dane kontaktowe, dlatego kluczowa jest jej przejrzystość.
Aby zaktualizować kolory stopki:
- Przejdź do sekcji Dostosowanie.
- Otwórz zakładkę „Stopka”.
- Ustaw kolor tła stopki i kolor tekstu stopki.
Dzięki temu stopka będzie wyglądać dobrze i pozostanie widoczna na wybranym tle.
Najlepsze praktyki dotyczące stylizacji centrum pomocy
Dostosowanie czcionek i kolorów pomaga sprawić, że centrum pomocy będzie pasowało do Twojej marki, ale równie ważne jest, aby było czytelne i spójne. Oto kilka wskazówek, które pomogą Ci uzyskać najlepsze wyniki:
- Trzymaj się kolorów swojej marki
Używaj tych samych kolorów, które stosujesz na swojej stronie internetowej i produkcie. Dzięki temu użytkownicy będą czuli się komfortowo.
- Używaj czytelnych czcionek
Unikaj zbyt ozdobnych czcionek, zwłaszcza w przypadku tekstu głównego. Wybieraj czcionki przejrzyste, czytelne i łatwe do skanowania.
- Zadbaj o dobry kontrast
Upewnij się, że kontrast między tekstem a tłem jest wystarczający. Na przykład unikaj jasnoszarego tekstu na białym tle.
- Uważaj na gradienty
Gradienty mogą zwiększyć atrakcyjność wizualną, ale zbyt wiele kolorów lub ostre przejścia mogą utrudniać czytanie treści. Aby uzyskać najlepsze wyniki, należy stosować dwa lub trzy kolory.
- Podgląd na komputerze stacjonarnym i urządzeniu mobilnym
Sprawdź swój projekt na ekranach o różnych rozmiarach, aby upewnić się, że wszystko wygląda schludnie i profesjonalnie.