Přejít na hlavní obsah

Styly navigace

Přizpůsobte barvy navigačního panelu webových stránek vaší církve tak, aby odpovídaly vaší značce. Barvy můžete nastavit jak pro plné pozadí, tak pro průhledné překrytí, takže máte úplnou kontrolu nad tím, jak navigace vypadá na různých stránkách.

Než začnete

  • Potřebujete oprávnění ke správě webových stránek vaší církve. Podrobnosti najdete v článku Role a oprávnění.
  • Připravte si barvy své značky, včetně hexadecimálních kódů barev (např. #03A9F4).
  • Pochopte rozdíl mezi plnou a průhlednou navigací na vašem webu.

Režimy navigace​

Navigace na vašem webu se může zobrazovat ve dvou různých podobách v závislosti na stránce:

  • Plná navigace -- Navigační panel s barvou pozadí, obvykle používaný na obsahových stránkách
  • Průhledná navigace -- Navigace, která se překrývá nad obsahem stránky, obvykle používaná na stránkách s hlavními obrázky nebo celoobrazovkovým pozadím

Barvy pro oba režimy můžete upravovat nezávisle na sobě.

Přístup ke stylům navigace​

  1. V B1 Admin otevřete Rychlou nabídku (vyhledávací pole vlevo nahoře) a rozbalte položku Web
  2. Klikněte na Vzhled
  3. V seznamu Nastavení stylu klikněte na Navigace

Editor Styly navigace má dvě karty: Záhlaví (plné) a Záhlaví nad hlavním obrázkem (průhledné).

Nastavení plné navigace​

Plná navigace se zobrazuje s barvou pozadí za navigačním panelem. Tato nastavení najdete na kartě Záhlaví (plné). Můžete upravit:

Barva pozadí​

  1. Přepněte přepínač Přepsat u položky Barva pozadí
  2. Klikněte na výběr barvy
  3. Zvolte požadovanou barvu pozadí
  4. Výchozí hodnota je bílá (#FFFFFF)

Barva odkazů​

  1. Přepněte přepínač Přepsat u položky Barva odkazů
  2. Zvolte barvu textu navigačních odkazů
  3. Ovlivňuje to odkazy v jejich výchozím stavu
  4. Výchozí hodnota je tmavě šedá (#555555)

Barva odkazu při najetí myší​

  1. Přepněte přepínač Přepsat u položky Barva odkazu při najetí myší
  2. Zvolte barvu, na kterou se odkazy změní, když na ně uživatelé najedou kurzorem
  3. Poskytuje to vizuální zpětnou vazbu pro klikatelné odkazy
  4. Výchozí hodnota je světle modrá (#03A9F4)

Barva aktivního odkazu​

  1. Přepněte přepínač Přepsat u položky Barva aktivního odkazu
  2. Zvolte barvu odkazu na aktuálně otevřenou stránku
  3. Pomáhá to uživatelům poznat, na které stránce se nacházejí
  4. Výchozí hodnota je světle modrá (#03A9F4)

Nastavení průhledné navigace​

Průhledná navigace se překrývá nad obsahem stránky bez pozadí. Tato nastavení najdete na kartě Záhlaví nad hlavním obrázkem (průhledné). Můžete upravit:

Barva odkazů​

  1. Přepněte přepínač Přepsat u položky Barva odkazů
  2. Zvolte barvu, která dobře kontrastuje s pozadím stránky
  3. Nejlépe se často osvědčí bílá nebo světlé barvy na tmavém pozadí
  4. Výchozí hodnota je tmavě šedá (#555555)

Barva odkazu při najetí myší​

  1. Přepněte přepínač Přepsat u položky Barva odkazu při najetí myší
  2. Zvolte barvu stavu při najetí myší
  3. Ujistěte se, že je dobře viditelná na pozadí stránky
  4. Výchozí hodnota je světle modrá (#03A9F4)

Barva aktivního odkazu​

  1. Přepněte přepínač Přepsat u položky Barva aktivního odkazu
  2. Zvolte barvu indikátoru aktivní stránky
  3. Měla by vynikat a zároveň ladit s vaším návrhem
  4. Výchozí hodnota je světle modrá (#03A9F4)
info

Průhledná navigace nemá nastavení barvy pozadí, protože se překrývá přímo nad obsahem stránky.

Uložení změn​

  1. Po nastavení barev klikněte na Uložit navigaci
  2. Změny se okamžitě projeví na vašem živém webu
  3. Navštivte svůj web a zkontrolujte navigaci v obou režimech

Obnovení výchozích hodnot​

Pokud se chcete vrátit k výchozím barvám:

  1. Vypněte přepínače Přepsat u všech vlastních barev
  2. Klikněte na Uložit navigaci
  3. Navigace se vrátí k výchozímu barevnému schématu

Nebo klikněte na Zrušit, čímž zahodíte všechny změny bez uložení.

Doporučené postupy​

Kontrast barev​

  • Čitelnost -- Ujistěte se, že barvy odkazů mají dostatečný kontrast s pozadím
  • Soulad s WCAG -- Usilujte o kontrastní poměr alespoň 4,5:1 pro přístupnost
  • Otestujte oba režimy -- Zkontrolujte web s plnou i průhlednou navigací

Soulad se značkou​

  • Používejte barvy své značky -- Sladěte je s logem a motivem webu
  • Omezte paletu -- Držte se 2 až 3 barev pro jednotný vzhled
  • Zvažte své obrázky -- Pokud používáte průhlednou navigaci, vyzkoušejte ji na typických pozadích stránek

Stavy při najetí myší a aktivní stav​

  • Jasná zpětná vazba -- Ujistěte se, že stav při najetí myší je zřetelně odlišný od výchozího odkazu
  • Rozlišení aktivních stránek -- Použijte výraznou barvu, aby uživatelé věděli, kde se nacházejí
  • Plynulé přechody -- Systém změny barev automaticky animuje

Řešení potíží​

Barvy nevypadají správně​

  • Vymažte mezipaměť -- Mezipaměť prohlížeče může zobrazovat staré barvy
  • Zkontrolujte hexadecimální kódy -- Ujistěte se, že jste zadali platné hexadecimální kódy barev
  • Otestujte na různých pozadích -- Barvy mohou vypadat jinak v závislosti na stránce
  • Průhledný režim -- Pokud používáte průhlednou navigaci nad světlými obrázky, může být tmavý text obtížně čitelný
  • Řešení -- Upravte barvy odkazů nebo použijte tmavší pozadí stránky
  • Alternativa -- Přidejte navigační oblasti jemný stín nebo překryv pozadí

Technické podrobnosti​

Styly navigace se ukládají jako JSON a uplatňují se pomocí proměnných CSS:

  • Změny se projeví okamžitě bez nutnosti znovu sestavovat web
  • Barvy se promítnou do všech prvků navigace
  • Přepsání je volitelné; nenastavené barvy používají výchozí hodnoty motivu

Související články​