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

Внешний вид

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

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

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

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

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

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

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

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

  1. Нажмите Настройки типографики в панели «Настройки стилей».
  2. Нажмите Выбрать шрифт, чтобы открыть обозреватель шрифтов. Вы можете искать по названию или просматривать категории: Serif, Sans Serif, Display, Handwriting и Monospace.
  3. Установите шрифты для заголовков и основного текста.
  4. Нажмите Шкала типографики, чтобы настроить иерархию размеров от Заголовка 1 до Заголовка 4. Используйте множитель масштаба и поля базового размера для тонкой настройки.
  5. Нажмите Сохранить, чтобы применить выбранные шрифты.

Отступы​

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

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

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

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

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

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

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

Темы стилей​

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

Следующие шаги​