Перейти до основного вмісту

Стилі навігації

Налаштуйте кольори панелі навігації на веб-сайті вашої церкви, щоб вони відповідали вашому фірмовому стилю. Ви можете налаштувати кольори для суцільного фону та прозорого накладання, що дає повний контроль над тим, як виглядає навігація на різних сторінках.

Перш ніж почати

  • Вам потрібен дозвіл на керування веб-сайтом вашої церкви. Докладніше див. Ролі та дозволи.
  • Підготуйте фірмові кольори, включно з шістнадцятковими кодами кольорів (наприклад, #03A9F4).
  • Розумійте різницю між суцільним і прозорим стилями навігації на вашому веб-сайті.

Режими навігації​

Навігація на вашому веб-сайті може виглядати у двох різних стилях залежно від сторінки:

  • Суцільна навігація -- панель навігації з фоновим кольором, зазвичай використовується на сторінках із контентом
  • Прозора навігація -- навігація, що накладається на вміст сторінки, зазвичай використовується на сторінках із головними зображеннями або повноекранним фоном

Ви можете налаштовувати кольори для обох режимів незалежно один від одного.

Доступ до стилів навігації​

  1. У B1 Admin відкрийте меню переходу (панель пошуку у верхньому лівому куті) і розгорніть 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:

  • Зміни набувають чинності одразу, без перебудови сайту
  • Кольори поширюються на всі елементи навігації
  • Перевизначення є необов'язковими; кольори, які не задано, використовують стандартні значення теми

Пов'язані статті​