Prejsť na hlavný obsah

Štýly navigácie

Prispôsobte farby navigačnej lišty vášho webu tak, aby zodpovedali vašej značke. Farby môžete nastaviť pre plné pozadie aj pre priehľadné prekrytie, takže máte úplnú kontrolu nad tým, ako vyzerá navigácia na rôznych stránkach.

Než začnete

  • Potrebujete oprávnenie na správu vášho webu pre cirkev. Podrobnosti nájdete v časti Roly a oprávnenia.
  • Pripravte si farby vašej značky vrátane hexadecimálnych kódov farieb (napr. #03A9F4).
  • Pochopte rozdiel medzi plnou a priehľadnou navigáciou na vašom webe.

Režimy navigácie​

Navigácia na vašom webe sa môže zobrazovať v dvoch rôznych štýloch v závislosti od stránky:

  • Plná navigácia -- Navigačná lišta s farbou pozadia, zvyčajne používaná na obsahových stránkach
  • Priehľadná navigácia -- Navigácia, ktorá sa prekrýva s obsahom stránky, zvyčajne používaná na stránkach s hlavnými obrázkami alebo celoobrazovkovým pozadím

Farby pre oba režimy môžete prispôsobiť nezávisle.

Prístup k štýlom navigácie​

  1. V B1 Admin otvorte Rýchlu ponuku (vyhľadávacie pole vľavo hore) a rozbaľte Web
  2. Kliknite na Vzhľad
  3. V zozname Nastavenia štýlov kliknite na Navigácia

Editor Štýlovanie navigácie obsahuje dve karty: Hlavička (plná) a Hlavička nad hlavným obrázkom (priehľadná).

Nastavenie plnej navigácie​

Plná navigácia sa zobrazuje s farbou pozadia za navigačnou lištou. Tieto nastavenia sa nachádzajú na karte Hlavička (plná). Môžete upraviť:

Farba pozadia​

  1. Prepnite prepínač Prepísať pri položke Farba pozadia
  2. Kliknite na výber farby
  3. Vyberte požadovanú farbu pozadia
  4. Predvolená farba je biela (#FFFFFF)

Farba odkazov​

  1. Prepnite prepínač Prepísať pri položke Farba odkazov
  2. Vyberte farbu textu navigačných odkazov
  3. Toto ovplyvňuje odkazy v ich predvolenom stave
  4. Predvolená farba je tmavosivá (#555555)

Farba odkazov pri prejdení myšou​

  1. Prepnite prepínač Prepísať pri položke Farba odkazov pri prejdení myšou
  2. Vyberte farbu, na ktorú sa odkazy zmenia, keď používateľ prejde myšou ponad ne
  3. Táto farba poskytuje vizuálnu spätnú väzbu pre odkazy, na ktoré je možné kliknúť
  4. Predvolená farba je svetlomodrá (#03A9F4)

Farba aktívneho odkazu​

  1. Prepnite prepínač Prepísať pri položke Farba aktívneho odkazu
  2. Vyberte farbu pre odkaz na aktuálne otvorenú stránku
  3. Táto farba pomáha používateľom zistiť, na akej stránke sa nachádzajú
  4. Predvolená farba je svetlomodrá (#03A9F4)

Nastavenie priehľadnej navigácie​

Priehľadná navigácia sa prekrýva s obsahom stránky bez pozadia. Tieto nastavenia sa nachádzajú na karte Hlavička nad hlavným obrázkom (priehľadná). Môžete upraviť:

Farba odkazov​

  1. Prepnite prepínač Prepísať pri položke Farba odkazov
  2. Vyberte farbu, ktorá dobre kontrastuje s pozadím stránky
  3. Na tmavom pozadí sa často najlepšie osvedčujú biele alebo svetlé farby
  4. Predvolená farba je tmavosivá (#555555)

Farba odkazov pri prejdení myšou​

  1. Prepnite prepínač Prepísať pri položke Farba odkazov pri prejdení myšou
  2. Vyberte farbu stavu pri prejdení myšou
  3. Uistite sa, že je viditeľná na pozadí stránky
  4. Predvolená farba je svetlomodrá (#03A9F4)

Farba aktívneho odkazu​

  1. Prepnite prepínač Prepísať pri položke Farba aktívneho odkazu
  2. Vyberte farbu indikátora aktívnej stránky
  3. Mala by vyniknúť a zároveň zapadať do vášho dizajnu
  4. Predvolená farba je svetlomodrá (#03A9F4)
informácia

Priehľadná navigácia nemá nastavenie farby pozadia, pretože sa prekrýva priamo s obsahom stránky.

Uloženie zmien​

  1. Po nastavení farieb kliknite na Uložiť navigáciu
  2. Vaše zmeny sa okamžite prejavia na vašom živom webe
  3. Navštívte svoj web a skontrolujte navigáciu v oboch režimoch

Obnovenie predvolených hodnôt​

Ak sa chcete vrátiť k predvoleným farbám:

  1. Vypnite prepínače Prepísať pri všetkých vlastných farbách
  2. Kliknite na Uložiť navigáciu
  3. Navigácia sa vráti k predvolenej farebnej schéme

Alebo kliknutím na Zrušiť zahoďte všetky zmeny bez uloženia.

Osvedčené postupy​

Kontrast farieb​

  • Čitateľnosť -- Uistite sa, že farby odkazov majú dostatočný kontrast s pozadím
  • Súlad s WCAG -- Usilujte sa o kontrastný pomer aspoň 4,5:1 kvôli prístupnosti
  • Otestujte oba režimy -- Skontrolujte svoj web s plnou aj priehľadnou navigáciou

Konzistentnosť značky​

  • Používajte farby svojej značky -- Zosúlaďte ich s logom a témou vášho webu
  • Obmedzte paletu -- Držte sa 2 až 3 farieb pre súdržný vzhľad
  • Zvážte svoje obrázky -- Ak používate priehľadnú navigáciu, otestujte ju na bežných pozadiach stránok

Stavy pri prejdení myšou a aktívny stav​

  • Jasná spätná väzba -- Stavy pri prejdení myšou by mali byť zreteľne odlišné od predvolených odkazov
  • Rozlíšte aktívne stránky -- Použite výraznú farbu, aby používatelia vedeli, kde sa nachádzajú
  • Plynulé prechody -- Systém automaticky animuje zmeny farieb

Riešenie problémov​

Farby nevyzerajú správne​

  • Vymažte vyrovnávaciu pamäť -- Vyrovnávacia pamäť prehliadača môže zobrazovať staré farby
  • Skontrolujte hexadecimálne kódy -- Uistite sa, že ste zadali platné hexadecimálne kódy farieb
  • Otestujte na rôznych pozadiach -- Farby môžu vyzerať inak v závislosti od stránky
  • Priehľadný režim -- Ak používate priehľadnú navigáciu nad svetlými obrázkami, tmavý text môže byť ťažko čitateľný
  • Riešenie -- Upravte farby odkazov alebo použite tmavšie pozadia stránok
  • Alternatíva -- Pridajte jemný tieň alebo prekrytie pozadím v oblasti navigácie

Technické podrobnosti​

Štýly navigácie sa ukladajú ako JSON a uplatňujú sa pomocou premenných CSS:

  • Zmeny sa prejavia okamžite bez nového zostavenia webu
  • Farby sa uplatnia na všetky prvky navigácie
  • Prepísanie je voliteľné; nenastavené farby používajú predvolené hodnoty motívu

Súvisiace články​