Перейти к основному содержимому

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

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

Перед началом

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

Понимание режимов навигации​

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

  • Сплошная навигация — панель навигации с цветным фоном, обычно используется на страницах с содержимым
  • Прозрачная навигация — навигация, которая перекрывает содержимое страницы, обычно используется на страницах с героическими изображениями или полноэкранными фонами

Вы можете настраивать цвета для обоих режимов независимо друг от друга.

Доступ к стилям навигации​

  1. В B1 Admin откройте меню Jump (строка поиска в верхнем левом углу) и разверните Веб-сайт
  2. Нажмите Внешний вид
  3. В списке Параметры стиля нажмите Навигация

В редакторе Стили навигации есть две карточки: Заголовок (сплошной) и Заголовок поверх героя (прозрачный).

Конфигурация сплошной навигации​

Сплошная навигация отображается с цветным фоном позади панели навигации. Эти настройки находятся в карточке Заголовок (сплошной). Вы можете настроить:

Цвет фона​

  1. Включите переключатель Переопределение для Цвет фона
  2. Нажмите на палитру цветов
  3. Выберите желаемый цвет фона
  4. По умолчанию белый (#FFFFFF)

Цвет ссылки​

  1. Включите переключатель Переопределение для Цвет ссылки
  2. Выберите цвет для текста ссылки навигации
  3. Это влияет на ссылки в их состоянии по умолчанию
  4. По умолчанию темно-серый (#555555)

Цвет наведения ссылки​

  1. Включите переключатель Переопределение для Цвет наведения ссылки
  2. Выберите цвет, на который изменяются ссылки, когда пользователи наводят на них курсор
  3. Это обеспечивает визуальную обратную связь для интерактивных ссылок
  4. По умолчанию светло-синий (#03A9F4)

Активный цвет​

  1. Включите переключатель Переопределение для Цвет активной ссылки
  2. Выберите цвет для ссылки на текущую активную страницу
  3. Это помогает пользователям узнать, на какой странице они находятся
  4. По умолчанию светло-синий (#03A9F4)

Конфигурация прозрачной навигации​

Прозрачная навигация перекрывает содержимое вашей страницы без фона. Эти настройки находятся в карточке Заголовок поверх героя (прозрачный). Вы можете настроить:

Цвет ссылки​

  1. Включите переключатель Переопределение для Цвет ссылки
  2. Выберите цвет, который хорошо контрастирует с фоном вашей страницы
  3. Часто белые или светлые цвета работают лучше всего на темных фонах
  4. По умолчанию темно-серый (#555555)

Цвет наведения ссылки​

  1. Включите переключатель Переопределение для Цвет наведения ссылки
  2. Выберите цвет состояния наведения
  3. Убедитесь, что он виден на фоне вашей страницы
  4. По умолчанию светло-синий (#03A9F4)

Активный цвет​

  1. Включите переключатель Переопределение для Цвет активной ссылки
  2. Выберите цвет индикатора активной страницы
  3. Должен выделяться, но при этом соответствовать вашему дизайну
  4. По умолчанию светло-синий (#03A9F4)
Информация

Прозрачная навигация не имеет параметра цвета фона, так как она перекрывает содержимое страницы непосредственно.

Сохранение ваших изменений​

  1. После конфигурации ваших цветов нажмите Сохранить навигацию
  2. Ваши изменения немедленно применяются к вашему активному веб-сайту
  3. Посетите ваш веб-сайт, чтобы увидеть навигацию в обоих режимах

Сброс на значения по умолчанию​

Если вы хотите вернуться к цветам по умолчанию:

  1. Выключите переключатели Переопределение для любых пользовательских цветов
  2. Нажмите Сохранить навигацию
  3. Навигация возвращается к цветовой схеме по умолчанию

Или нажмите Отмена, чтобы отменить все изменения без сохранения.

Лучшие практики​

Контраст цветов​

  • Читаемость — убедитесь, что цвета ссылок имеют достаточный контраст с фоном
  • Соответствие WCAG — стремитесь к коэффициенту контраста не менее 4.5:1 для доступности
  • Тестируйте оба режима — просмотрите ваш сайт как со сплошной, так и с прозрачной навигацией

Согласованность бренда​

  • Используйте цвета вашего бренда — совпадайте с логотипом и темой вашего веб-сайта
  • Ограничьте вашу палитру — придерживайтесь 2-3 цветов для связного вида
  • Рассмотрите ваши изображения — если используете прозрачную навигацию, протестируйте ее на типичных фонах страниц

Состояния наведения и активности​

  • Четкая обратная связь — сделайте состояния наведения явно отличными от ссылок по умолчанию
  • Отличайте активные страницы — используйте отличительный цвет, чтобы пользователи знали, где они находятся
  • Плавные переходы — система автоматически анимирует изменения цветов

Устранение неполадок​

Цвета выглядят неправильно​

  • Очистите кэш — кэширование браузером может показывать старые цвета
  • Проверьте коды hex — убедитесь, что вы ввели правильные коды цветов в шестнадцатеричной системе
  • Протестируйте на разных фонах — цвета могут выглядеть по-разному в зависимости от страницы

Навигация не видна​

  • Прозрачный режим — если используете прозрачную навигацию на светлых изображениях, темный текст может быть трудно разглядеть
  • Решение — отрегулируйте цвета ссылок или используйте более темные фоны страниц
  • Альтернатива — добавьте слабую тень или фоновое наложение в область навигации

Технические детали​

Стили навигации хранятся как JSON и применяются с помощью переменных CSS:

  • Изменения вступают в силу немедленно без перестроения сайта
  • Цвета каскадируют ко всем элементам навигации
  • Переопределения являются опциональными; неустановленные цвета используют темные стандарты

Связанные статьи​