Przejdź do zawartości głównej

Style nawigacji

Dostosuj kolory paska nawigacji swojej witryny kościoła, aby pasowały do Twojej marki. Kolory możesz ustawić zarówno dla jednolitego tła, jak i dla przezroczystej nakładki, dzięki czemu pełni kontrolę nad wyglądem nawigacji na różnych stronach.

Zanim zaczniesz

  • Potrzebujesz uprawnień do zarządzania witryną kościoła. Szczegóły znajdziesz w artykule Role i uprawnienia.
  • Przygotuj kolory marki, w tym kody kolorów w formacie szesnastkowym (np. #03A9F4).
  • Zrozum różnicę między jednolitym a przezroczystym stylem nawigacji w Twojej witrynie.

Tryby nawigacji​

Nawigacja w Twojej witrynie może wyglądać na dwa różne sposoby, w zależności od strony:

  • Nawigacja jednolita -- Pasek nawigacji z kolorem tła, zwykle używany na stronach z treścią
  • Nawigacja przezroczysta -- Nawigacja nałożona na treść strony, zwykle używana na stronach z dużymi obrazami w tle lub tłem na cały ekran

Kolory dla obu trybów możesz dostosowywać niezależnie.

Dostęp do stylów nawigacji​

  1. W B1 Admin otwórz menu szybkiego przejścia (pasek wyszukiwania w lewym górnym rogu) i rozwiń pozycję Witryna
  2. Kliknij Wygląd
  3. Na liście Ustawienia stylu kliknij Nawigacja

Edytor Stylizacja nawigacji ma dwie karty: Nagłówek (jednolity) oraz Nagłówek nad sekcją hero (przezroczysty).

Konfigurowanie nawigacji jednolitej​

Nawigacja jednolita wyświetla się z kolorem tła za paskiem nawigacji. Te ustawienia znajdują się na karcie Nagłówek (jednolity). Możesz dostosować:

Kolor tła​

  1. Przełącz przycisk Nadpisz przy Kolor tła
  2. Kliknij próbnik kolorów
  3. Wybierz żądany kolor tła
  4. Domyślnie jest to biel (#FFFFFF)

Kolor linków​

  1. Przełącz przycisk Nadpisz przy Kolor linków
  2. Wybierz kolor tekstu linków w nawigacji
  3. Dotyczy to linków w stanie domyślnym
  4. Domyślnie jest to ciemnoszary (#555555)

Kolor linków po najechaniu​

  1. Przełącz przycisk Nadpisz przy Kolor linków po najechaniu
  2. Wybierz kolor, na jaki zmieniają się linki po najechaniu kursorem
  3. Dzięki temu użytkownicy widzą, że link jest klikalny
  4. Domyślnie jest to jasnoniebieski (#03A9F4)

Kolor aktywnego linku​

  1. Przełącz przycisk Nadpisz przy Kolor aktywnego linku
  2. Wybierz kolor dla linku do aktualnie otwartej strony
  3. Dzięki temu użytkownicy wiedzą, na której stronie się znajdują
  4. Domyślnie jest to jasnoniebieski (#03A9F4)

Konfigurowanie nawigacji przezroczystej​

Nawigacja przezroczysta nakłada się na treść strony i nie ma tła. Te ustawienia znajdują się na karcie Nagłówek nad sekcją hero (przezroczysty). Możesz dostosować:

Kolor linków​

  1. Przełącz przycisk Nadpisz przy Kolor linków
  2. Wybierz kolor, który dobrze kontrastuje z tłem strony
  3. Na ciemnych tłach często najlepiej sprawdzają się biały lub jasne kolory
  4. Domyślnie jest to ciemnoszary (#555555)

Kolor linków po najechaniu​

  1. Przełącz przycisk Nadpisz przy Kolor linków po najechaniu
  2. Wybierz kolor dla stanu po najechaniu
  3. Upewnij się, że jest widoczny na tle strony
  4. Domyślnie jest to jasnoniebieski (#03A9F4)

Kolor aktywnego linku​

  1. Przełącz przycisk Nadpisz przy Kolor aktywnego linku
  2. Wybierz kolor wskaźnika aktywnej strony
  3. Powinien się wyróżniać, a jednocześnie pasować do Twojego projektu
  4. Domyślnie jest to jasnoniebieski (#03A9F4)
informacja

Nawigacja przezroczysta nie ma ustawienia koloru tła, ponieważ nakłada się bezpośrednio na treść strony.

Zapisywanie zmian​

  1. Po skonfigurowaniu kolorów kliknij Zapisz nawigację
  2. Zmiany są od razu widoczne w Twojej działającej witrynie
  3. Odwiedź swoją witrynę, aby zobaczyć nawigację w obu trybach

Przywracanie ustawień domyślnych​

Jeśli chcesz wrócić do domyślnych kolorów:

  1. Wyłącz przełączniki Nadpisz przy wszystkich niestandardowych kolorach
  2. Kliknij Zapisz nawigację
  3. Nawigacja wróci do domyślnego schematu kolorów

Możesz też kliknąć Anuluj, aby odrzucić wszystkie zmiany bez zapisywania.

Dobre praktyki​

Kontrast kolorów​

  • Czytelność -- Upewnij się, że kolory linków wystarczająco kontrastują z tłem
  • Zgodność z WCAG -- Dąż do współczynnika kontrastu co najmniej 4,5:1 dla zapewnienia dostępności
  • Sprawdź oba tryby -- Podejrzyj swoją witrynę zarówno z nawigacją jednolitą, jak i przezroczystą

Spójność marki​

  • Używaj kolorów marki -- Dopasuj je do logo i motywu witryny
  • Ogranicz paletę -- Trzymaj się 2-3 kolorów, aby uzyskać spójny wygląd
  • Zwróć uwagę na obrazy -- Jeśli używasz nawigacji przezroczystej, sprawdź ją na typowych tłach stron

Stany po najechaniu i aktywny​

  • Wyraźna informacja zwrotna -- Stany po najechaniu powinny wyraźnie różnić się od zwykłych linków
  • Wyróżnij aktywne strony -- Użyj wyraźnego koloru, aby użytkownicy wiedzieli, gdzie się znajdują
  • Płynne przejścia -- System automatycznie animuje zmiany kolorów

Rozwiązywanie problemów​

Kolory nie wyglądają poprawnie​

  • Wyczyść pamięć podręczną -- Pamięć podręczna przeglądarki może pokazywać stare kolory
  • Sprawdź kody szesnastkowe -- Upewnij się, że wpisany kod koloru jest poprawny
  • Testuj na różnych tłach -- Kolory mogą wyglądać inaczej w zależności od strony

Nawigacja jest niewidoczna​

  • Tryb przezroczysty -- Jeśli używasz nawigacji przezroczystej nad jasnymi obrazami, ciemny tekst może być trudno widoczny
  • Rozwiązanie -- Dostosuj kolory linków lub użyj ciemniejszych teł stron
  • Alternatywa -- Dodaj subtelny cień lub nakładkę tła w obszarze nawigacji

Szczegóły techniczne​

Style nawigacji są zapisywane w formacie JSON i stosowane za pomocą zmiennych CSS:

  • Zmiany działają od razu, bez konieczności przebudowy witryny
  • Kolory są stosowane do wszystkich elementów nawigacji
  • Nadpisania są opcjonalne; kolory bez ustawienia korzystają z domyślnych wartości motywu

Powiązane artykuły​