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

Внешний вид

Страница «Внешний вид» позволяет настроить общий вид и стиль вашего церковного сайта. От цветов и шрифтов до отступов и пользовательского CSS — вы можете управлять каждым визуальным аспектом вашего сайта из одного места.

Прежде чем начать

  • Завершите Первоначальную настройку вашего сайта
  • Подготовьте логотип церкви в формате PNG с прозрачным фоном и соотношением сторон 4:1
  • Знайте фирменные цвета вашей церкви (в шестнадцатеричном формате), если у вас уже есть гайд по стилю

Доступ к настройкам внешнего вида​

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

Цветовая палитра​

  1. Нажмите Цветовая палитра на панели настроек стиля.
  2. Вы увидите Базовые цвета (светлые, акцентные и темные оттенки) и Семантические цвета (Основной, Дополнительный, Успех, Предупреждение и Ошибка).
  3. Нажмите на любой цветовой образец, чтобы открыть выбор цвета. Перетащите ползунок или введите шестнадцатеричное значение, чтобы выбрать цвет.
  4. Предпросмотр цветовых сочетаний показывает, как ваши выбранные цвета сочетаются друг с другом.
  5. Используйте Рекомендуемые палитры, чтобы быстро применить готовую цветовую схему.
  6. Нажмите Сохранить, когда будете довольны результатом.

Типографика​

  1. Нажмите Настройки типографики на панели настроек стиля.
  2. Нажмите Выбрать шрифт, чтобы открыть браузер шрифтов. Вы можете искать по названию или просматривать категории, такие как «С засечками», «Без засечек», «Дисплейный», «Рукописный» и «Моноширинный».
  3. Задайте шрифты как для заголовков, так и для основного текста.
  4. Нажмите Масштаб типографики, чтобы настроить иерархию размеров от заголовка 1 до заголовка 4. Используйте множитель масштаба и поля базового размера для тонкой настройки.
  5. Нажмите Сохранить, чтобы применить выбор шрифтов.

Отступы​

  1. Нажмите Шкала отступов на панели настроек стиля.
  2. Настройте значения отступов от «Очень маленький» до «Очень большой». Практические примеры показывают, как каждое значение влияет на макет.
  3. Нажмите Сохранить отступы, чтобы применить значения по всему сайту.

Логотип и брендинг​

  1. Нажмите Логотип на панели настроек стиля.
  2. Загрузите Логотип для светлого фона и Логотип для темного фона. Используйте изображения с прозрачным фоном и соотношением сторон 4:1 для наилучшего результата.
  3. Загрузите Изображение для соцсетей для предпросмотра ссылок и Favicon для значка вкладки браузера.
Совет

Для лучшего результата используйте логотип с прозрачным фоном в формате PNG. Это гарантирует, что он будет отлично смотреться как на светлом, так и на темном фоне на вашем сайте и в мобильном приложении.

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

Настройте цвета навигационной панели вашего сайта как для сплошного, так и для прозрачного режимов:

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

Подробные инструкции см. в разделе Стили навигации.

Виджеты сайта​

Виджеты сайта появляются на каждой странице вашего сайта, отображаясь поверх содержимого страницы:

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

Аналитика​

Добавьте свой идентификатор измерения Google Analytics 4 на панели настроек стиля, чтобы отслеживать посещаемость вашего сайта.

Пользовательский CSS и JavaScript​

  1. Нажмите CSS и JavaScript на панели настроек стиля.
  2. Добавьте Пользовательский CSS, чтобы переопределить стили по умолчанию для расширенной настройки.
  3. Добавьте Пользовательский HTML для кодов отслеживания или других скриптов.
  4. Используйте раздел Примеры распространенного JavaScript для фрагментов кода, например для интеграции Google Analytics.
Предупреждение

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

Темы стиля​

Если вам нужна быстрая отправная точка, раздел Рекомендуемые палитры в разделе «Цветовая палитра» предлагает готовые темы, которые одним щелчком задают согласованные цвета. Вы всегда можете точно настроить отдельные параметры после применения темы.

Дальнейшие шаги​