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

Использование редактора страниц

Редактор страниц B1 -- это визуальный конструктор с функцией перетаскивания, который позволяет проектировать страницы веб-сайта вашей церкви без написания кода. Вы можете добавлять разделы и блоки контента, настраивать стили, просматривать свою работу и отменять изменения -- всё в браузере.

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

Открытие редактора​

  1. В B1 Admin нажмите Веб-сайт в левом меню.
  2. Найдите страницу, которую хотите редактировать, в таблице Страницы и нажмите Редактировать.

Редактор открывается в полноэкранном режиме. Левая панель показывает структуру вашей страницы и доступные элементы контента; центральная область показывает просмотр вашей страницы в реальном времени.

Информация

Редактор всегда отображается в светлом режиме, независимо от настройки темы B1 Admin. Это обеспечивает точное соответствие предпросмотра тому, как ваша страница будет выглядеть для посетителей веб-сайта.

Структура страницы: разделы и элементы​

Каждая страница построена из двух уровней:

  • Разделы -- Контейнеры верхнего уровня, которые делят вашу страницу на горизонтальные полосы (например, героический раздел, блок контента или полоса нижнего колонтитула). Каждая страница должна иметь хотя бы один раздел, прежде чем вы сможете добавить контент.
  • Элементы -- Отдельные части контента, размещённые внутри раздела, такие как текст, изображения, кнопки, карточки, формы и календари.

Добавление раздела​

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

Добавление элементов в раздел​

  1. Нажмите внутри раздела в предпросмотре, чтобы выбрать его.
  2. Нажмите Добавить контент и выберите тип элемента из списка:
    • Текст -- Заголовки, абзацы и форматированный текст
    • Изображение -- Загрузите или дайте ссылку на фотографию
    • Кнопка -- Кликабельная ссылка с призывом к действию
    • Карточка -- Изображение с заголовком и описанием
    • Форма -- Встройте форму прямо на страницу
    • Календарь -- Отобразите календарь событий
    • FAQ -- Блоки вопросов и ответов в стиле аккордеона
    • Видео -- Встройте видео по URL
  3. Настройте элемент, используя появившуюся панель настроек.

Изменение порядка контента​

Перетащите разделы или элементы, используя значок ручки (шесть точек) слева от каждого элемента, чтобы изменить их порядок. Вы можете перетаскивать элементы внутри раздела или перемещать их между разделами.

Стилизация вашей страницы​

Стили разделов​

Нажмите на любой раздел, чтобы открыть его панель стилей. Вы можете установить:

  • Фон -- Сплошной цвет, градиент или изображение
  • Отступы -- Верхние и нижние отступы внутри раздела
  • Ширина -- Полная ширина или центрированная/ограниченная

Стили элементов​

Нажмите на любой элемент, чтобы открыть его панель стилей. Общие параметры включают размер шрифта, цвет, выравнивание, поля и отступы. Для изображений вы можете установить альтернативный текст и цели ссылок.

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

Для продвинутой стилизации каждый раздел и элемент имеет поле Пользовательский CSS, где вы можете написать свои собственные правила CSS. Они ограничены этим элементом, поэтому они не повлияют непреднамеренно на остальную часть страницы.

Совет

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

Предпросмотр вашей страницы​

Используйте элементы управления предпросмотром на панели инструментов, чтобы проверить, как ваша страница выглядит на разных размерах экрана:

  • Десктоп -- Полноширинный вид браузера
  • Мобильный -- Узкий вид размером с телефон

Нажмите Предпросмотр, чтобы открыть живую версию страницы в новой вкладке браузера, именно так, как посетители увидят её.

Отмена изменений​

Редактор автоматически отслеживает вашу историю редактирования. Используйте кнопки панели инструментов или сочетания клавиш для навигации:

  • Отменить (Ctrl+Z / Cmd+Z) -- Отменить последнее действие
  • Повторить (Ctrl+Y / Cmd+Y) -- Повторить отменённое действие

Вы также можете восстановить страницу к более раннему снимку. Нажмите История на панели инструментов, чтобы увидеть список сохранённых снимков с описаниями, и нажмите на любую запись, чтобы восстановить до этой точки.

Предупреждение

Восстановление снимка заменяет текущее содержимое вашей страницы версией снимка. Это нельзя отменить стандартной кнопкой отмены. Сохраните снимок вашего текущего состояния перед восстановлением старого, если хотите сохранить возможность вернуться.

Сохранение вашей работы​

Изменения сохраняются автоматически во время работы. Индикатор состояния на панели инструментов показывает, были ли сохранены ваши изменения. Вы также можете нажать Сохранить в любое время, чтобы принудительно сохранить.

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

  • Управление страницами -- Создавайте страницы, устанавливайте URL и управляйте навигацией сайта
  • Внешний вид -- Устанавливайте общесайтовые цвета, шрифты и брендинг
  • Файлы -- Загружайте изображения и документы для использования в редакторе
  • Создание форм -- Создавайте формы, которые можно встроить на страницы