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

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

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

Перед началом работы

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

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

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

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

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

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

  1. Перейдите в раздел Веб-сайт в B1 Admin
  2. Нажмите на Внешний вид в боковой панели
  3. Прокрутите до раздела Стили навигации
  4. Нажмите Редактировать стили навигации

Настройка сплошной навигации​

Сплошная навигация отображается с цветом фона за панелью навигации. Вы можете настроить:

Цвет фона​

  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-коды -- Убедитесь, что вы ввели действительные hex-коды цветов
  • Тестируйте на разных фонах -- Цвета могут выглядеть по-разному в зависимости от страницы

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

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

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

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

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

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