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

Внешний вид

Страница "Внешний вид" позволяет настроить общий внешний вид веб-сайта вашей церкви. От цветов и шрифтов до отступов и пользовательского 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. Загрузите Изображение для социальных сетей для предварительного просмотра ссылок и Favicon для значка вкладки браузера.
Совет

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

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

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

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

Для получения подробных инструкций см. Стили навигации.

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

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

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

Стилевые темы​

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

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