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

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

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

Перед началом

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

  1. В B1 Admin откройте меню Jump (строку поиска в верхнем левом углу), разверните Website и нажмите Pages.
  2. Найдите нужную страницу в таблице Pages и нажмите Edit Content.

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

Информация

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

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

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

  • Секции — контейнеры верхнего уровня, которые делят страницу на горизонтальные полосы (например, главный блок, блок контента или полоса подвала). Перед добавлением контента на каждой странице должна быть хотя бы одна секция.
  • Элементы — отдельные части контента внутри секции, например текст, изображения, кнопки, карточки, формы и календари.

Добавление секции​

  1. Нажмите Add Section (или кнопку + вверху левой панели).
  2. Выберите, как начать:
    • From a template — просмотрите галерею шаблонов секций по категориям (Hero, About, Services, Giving и др.) и нажмите на один, чтобы вставить полностью оформленную секцию с готовым контентом. Все можно настроить после добавления.
    • Blank section — выберите расположение колонок (одна, две, три колонки и т. д.) и создайте все с нуля.
  3. Новая секция появится в предпросмотре. Нажмите на нее, чтобы выбрать и настроить цвет фона, отступы и другие параметры оформления.

Смена макета секции​

Уже создали секцию, но хотите другую структуру? Используйте переключатель макета этой секции, чтобы заменить расположение колонок на другое из галереи, сохранив существующий контент и элементы на месте.

Добавление элементов в секцию​

  1. Нажмите внутри секции в предпросмотре, чтобы ее выбрать.
  2. Нажмите Add Content и выберите тип элемента из списка:
    • Text — заголовки, абзацы и форматированный текст
    • Image — загрузка или ссылка на фото
    • Button — кликабельная ссылка-призыв к действию
    • Card — изображение с заголовком и описанием
    • Form — встраивание формы прямо на страницу. Если у формы есть фото заголовка, оно показывается над вопросами
    • Calendar — отображение календаря событий
    • FAQ — блоки вопросов и ответов в виде аккордеона
    • Video — встраивание видео по URL
    • Groups Browser — фильтруемый каталог всех групп церкви с необязательным поиском, фильтром по категории и фильтром по меткам
    • Icon Feature — значок с заголовком и коротким описанием для выделения возможностей или направлений служения
    • Gallery — сетка из нескольких фотографий или макет masonry
    • Testimonial — одна или несколько цитат с именем автора, ролью и фото
    • Social Icons — значки со ссылками на профили церкви в социальных сетях: Facebook, Instagram, WhatsApp, YouTube, X, TikTok, Vimeo и Podcast. Заполните ссылку для каждого, который хотите показать; для WhatsApp используйте ссылку https://wa.me/ с вашим номером или ссылкой-приглашением в группу
    • Countdown — таймер, отсчитывающий время до даты или еженедельного времени служения
    • Stats — ряд крупных цифр с подписями (участники, годы, филиалы)
    • Campaign Progress — индикатор прогресса в реальном времени для кампании пожертвований, показывающий общую сумму, собранную к цели фонда
    • Staff Grid — карточки с фото участников группы; для группы должна быть включена опция public roster
    • Service Times — расписание служений ваших филиалов, автоматически берется из настроек посещаемости
    • Sermons — ваша библиотека проповедей в виде полного браузера или в макете сетки, списка или с выделением последней проповеди
    • Map — встроенная карта с центром на адресе вашей церкви
    • Table — простая сетка из строк и столбцов для табличного контента
    • Text with Photo — текст и изображение рядом
    • Logo — логотип вашей церкви, берется из раздела Appearance
    • Live Stream — ваш плеер прямой трансляции, встроенный прямо на страницу
    • Podcast — список выпусков из внешней RSS-ленты подкаста, URL которой вы указываете, с настройками количества выпусков и отображения дат и описаний. Каждый выпуск на сайте имеет аудиоплеер и ссылку Download, которая сохраняет аудиофайл выпуска под названием выпуска. Это для публикации любой ленты подкаста на вашем сайте; чтобы опубликовать собственные проповеди как подкаст, см. Управление проповедями
    • Donation — кнопка пожертвования или встроенная форма пожертвований
    • HTML — ваш собственный HTML-код для продвинутых случаев, например для встраивания стороннего виджета (см. Использование элемента HTML)
    • iFrame — встраивание внешнего контента по URL
  3. Настройте элемент с помощью панели настроек, которая появится.

Использование элемента HTML​

Элемент HTML имеет два поля:

  • HTML Content — разметка, которая будет показана на странице. Любые теги <script>, которые вы здесь добавите, будут выполняться на вашем рабочем сайте.
  • JavaScript (exclude script tag) — код скрипта, который выполняется при загрузке страницы. Сюда также можно вставить фрагмент встраивания от поставщика вместе с его тегами <script>, и он будет выполнен на рабочем сайте.

Если вы вставите в поле JavaScript только веб-адрес (например, ссылку на изображение), поле станет красным с предупреждением «This is a web address, not JavaScript.» Адрес в этом поле ничего не делает. Чтобы показать картинку, используйте элемент Image или поместите <img src="..."> в HTML Content.

Использование элемента Calendar​

Элемент Calendar показывает события одного из ваших календарей:

  1. В разделе Select выберите Group Calendar (события одной группы — в списке группы, в которых вы состоите) или Curated Calendar (календарь, созданный вами в разделе Calendars; см. Курированный календарь).
  2. В разделе Select Calendar выберите группу или календарь.
  3. В разделе Display выберите способ отображения:
    • Month calendar — сетка месяца, по которой посетители могут переходить.
    • Upcoming events — сетка плиток для следующих 12 предстоящих событий; повторяющееся событие показывается один раз на дату следующего повтора. Каждая плитка показывает фото события (или его название на темном цвете вашей темы, если фото нет), значок даты, день и время, а также первую строку описания. Кнопка Subscribe над плитками позволяет посетителям скопировать ICS-ссылку календаря или скачать его.
  4. Чтобы показать только некоторые события, введите тег в поле Only events tagged — например, youth. Появятся только события, в Tags которых есть это слово. Оставьте поле пустым, чтобы показать все события. Теги задаются для каждого события; см. Добавление и редактирование событий.

В обоих режимах при нажатии на событие открывается его собственная страница на вашем сайте. На странице события показаны фото события, название, дата и время, описание, а также блок с When (включая шаблон повторения для повторяющегося события) и Where (забронированные для него помещения). Там же есть кнопка Register for this Event, если регистрация включена, и ссылка Add to my calendar, которая скачивает событие в виде файла календаря. Страница настроена так, чтобы поисковые системы могли показывать дату и детали события в результатах поиска. Страницы событий из курированных календарей, которые показываются на ваших страницах (для событий в ближайшие шесть месяцев), также включаются в карту сайта, чтобы поисковые системы могли их найти.

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

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

Оформление страницы​

Стили секций​

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

  • Background — сплошной цвет, градиент или изображение. При фоне-изображении выбор Focal Point позволяет кликнуть и указать, какая часть изображения остается в центре при масштабировании секции, а опция Overlay добавляет полупрозрачный оттенок над изображением для улучшения читаемости текста.
  • Padding — верхний и нижний отступы внутри секции
  • Width — на всю ширину или по центру / в ограниченной ширине
  • Dividers — декоративные фигурные разделители (волна, скос, изгиб, треугольник и другие) на верхнем или нижнем крае секции с настройками цвета, высоты и отражения

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

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

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

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

Совет

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

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

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

  • Desktop — полноширинный вид в браузере
  • Mobile — узкий вид в размере телефона

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

Проверка доступности​

Нажмите значок Accessibility на панели инструментов, чтобы быстро проверить распространенные проблемы: изображения без alt-текста, низкий цветовой контраст или заголовки в неправильном порядке. Каждая проблема ведет прямо к элементу, который нужно исправить, так что вы можете исправить его на месте.

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

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

  • Undo (Ctrl+Z / Cmd+Z) — отменить последнее действие
  • Redo (Ctrl+Shift+Z или Ctrl+Y / Cmd+Shift+Z) — повторить отмененное действие

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

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

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

Сохранение и публикация​

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

Черновик и опубликованное состояние​

У страниц может быть опубликованное состояние, которое определяет, когда посетители видят ваши изменения. На панели инструментов отображается значок с текущим состоянием:

  • Live on save — страница не использует процесс публикации. Каждое сохраненное изменение сразу появляется на сайте. Это значение по умолчанию для новых страниц.
  • Unpublished changes — страница уже публиковалась, но вы внесли изменения после последней публикации. Посетители по-прежнему видят предыдущую опубликованную версию.
  • Published — страница опубликована, и ваш сохраненный контент совпадает с тем, что видят посетители.

Чтобы опубликовать изменения, нажмите кнопку Publish на панели инструментов. Страница сразу становится доступной.

Чтобы вернуться к последней опубликованной версии, не затрагивая то, что видят посетители, откройте меню с многоточием (⋮) и нажмите Discard unpublished changes.

Чтобы отказаться от процесса публикации, откройте меню с многоточием и нажмите Turn off publishing. После этого правки снова сразу появляются на сайте.

Совет

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

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

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