Пријавите се на главни садржај

Стилови навигације

Прилагодите боје траке за навигацију на веб-сајту ваше цркве како би одговарале вашем брендингу. Можете подесити боје и за пуну позадину и за провидне преклопе, чиме имате потпуну контролу над тим како навигација изгледа на различитим страницама.

Пре почетка

  • Потребна вам је дозвола за управљање веб-сајтом ваше цркве. Погледајте Улоге и дозволе за детаље.
  • Припремите боје вашег бренда, укључујући хекс кодове боја (на пример, #03A9F4).
  • Разумите разлику између пуних и провидних стилова навигације на вашем веб-сајту.

Разумевање режима навигације​

Навигација на вашем веб-сајту може да се појави у два различита стила, у зависности од странице:

  • Пуна навигација -- Трака за навигацију са позадинском бојом, обично се користи на страницама са садржајем
  • Провидна навигација -- Навигација која се преклапа преко садржаја странице, обично се користи на страницама са херо сликама или позадинама преко целог екрана

Боје за оба режима можете прилагодити независно.

Приступање стиловима навигације​

  1. У B1 Admin-у отворите Jump мени (траку за претрагу у горњем левом углу) и проширите Website
  2. Кликните на Appearance
  3. На листи Style Settings кликните на Navigation

Уређивач Navigation Styling има две картице: Header (solid) и Header over hero (transparent).

Подешавање пуне навигације​

Пуна навигација се приказује са позадинском бојом иза траке за навигацију. Ова подешавања се налазе у картици Header (solid). Можете прилагодити:

Боја позадине​

  1. Укључите прекидач Override за Background color
  2. Кликните на бирач боја
  3. Изаберите жељену боју позадине
  4. Подразумевана вредност је бела (#FFFFFF)

Боја линкова​

  1. Укључите прекидач Override за Link color
  2. Изаберите боју за текст навигационих линкова
  3. Ово утиче на линкове у њиховом подразумеваном стању
  4. Подразумевана вредност је тамносива (#555555)

Боја линка при задржавању показивача​

  1. Укључите прекидач Override за Link hover color
  2. Изаберите боју у коју се линкови мењају када корисници задрже показивач миша изнад њих
  3. Ово пружа визуелну повратну информацију за линкове на које се може кликнути
  4. Подразумевана вредност је светлоплава (#03A9F4)

Боја активног линка​

  1. Укључите прекидач Override за Active link color
  2. Изаберите боју за линк тренутно активне странице
  3. Ово помаже корисницима да знају на којој су страници
  4. Подразумевана вредност је светлоплава (#03A9F4)

Подешавање провидне навигације​

Провидна навигација се преклапа преко садржаја странице без позадине. Ова подешавања се налазе у картици Header over hero (transparent). Можете прилагодити:

Боја линкова​

  1. Укључите прекидач Override за Link color
  2. Изаберите боју која добро контрастира са позадином странице
  3. Често најбоље функционишу беле или светле боје преко тамних позадина
  4. Подразумевана вредност је тамносива (#555555)

Боја линка при задржавању показивача​

  1. Укључите прекидач Override за Link hover color
  2. Изаберите боју стања при задржавању показивача
  3. Уверите се да је видљива на позадини странице
  4. Подразумевана вредност је светлоплава (#03A9F4)

Боја активног линка​

  1. Укључите прекидач Override за Active link color
  2. Изаберите боју индикатора активне странице
  3. Треба да се истиче, а да и даље одговара вашем дизајну
  4. Подразумевана вредност је светлоплава (#03A9F4)
инфо

Провидна навигација нема подешавање боје позадине, јер се преклапа директно преко садржаја странице.

Чување измена​

  1. Након подешавања боја кликните на Save Navigation
  2. Ваше измене се одмах примењују на ваш активни веб-сајт
  3. Посетите веб-сајт да бисте видели навигацију у оба режима

Враћање на подразумеване вредности​

Ако желите да се вратите на подразумеване боје:

  1. Искључите прекидаче Override за све прилагођене боје
  2. Кликните на Save Navigation
  3. Навигација се враћа на подразумевану шему боја

Или кликните на Cancel да бисте одбацили све измене без чувања.

Најбоље праксе​

Контраст боја​

  • Читљивост -- Уверите се да боје линкова имају довољан контраст са позадином
  • Усаглашеност са WCAG-ом -- Циљајте на најмање однос контраста 4,5:1 ради приступачности
  • Тестирајте оба режима -- Прегледајте свој веб-сајт са пуном и провидном навигацијом

Доследност бренда​

  • Користите боје вашег бренда -- Усклађујте их са вашим логотипом и темом веб-сајта
  • Ограничите палету -- Држите се 2-3 боје за складан изглед
  • Размислите о сликама -- Ако користите провидну навигацију, тестирајте је на типичним позадинама страница

Стања при задржавању показивача и активна стања​

  • Јасна повратна информација -- Учините да стања при задржавању показивача буду очигледно различита од подразумеваних линкова
  • Разликујте активне странице -- Користите посебну боју да корисници знају где се налазе
  • Глатки прелази -- Систем аутоматски анимира промене боја

Решавање проблема​

Боје не изгледају добро​

  • Обришите кеш -- Кеширање у прегледачу може приказивати старе боје
  • Проверите хекс кодове -- Уверите се да сте унели важеће хекс кодове боја
  • Тестирајте на различитим позадинама -- Боје могу изгледати другачије у зависности од странице

Навигација није видљива​

  • Провидни режим -- Ако користите провидну навигацију преко светлих слика, тамни текст може бити тешко видљив
  • Решење -- Прилагодите боје линкова или користите тамније позадине страница
  • Алтернатива -- Додајте суптилну сенку или позадински преклоп на подручју навигације

Технички детаљи​

Стилови навигације се чувају као JSON и примењују помоћу CSS променљивих:

  • Промене се одмах примењују без поновног изградње сајта
  • Боје се преносе на све елементе навигације
  • Прескакање подешавања је опционо; неподешене боје користе подразумеване вредности теме

Повезани чланци​