PageBuilder — визуальный конструктор страниц для MODX 3

Собирайте страницы из готовых секций, редактируйте контент в удобном интерфейсе MODX и публикуйте изменения без перезаписи стандартного поля content.

PageBuilder превращает страницу MODX в структуру из независимых секций: первый экран, текст, карточки, преимущества, FAQ, отзывы, галерея, формы, товары и другие блоки.

Редактор работает в менеджере MODX, а вывод остаётся под контролем разработчика: каждая секция имеет собственную структуру данных и шаблон Fenom.

Что получает редактор

собирает страницу из готовых секций;
перетаскивает и меняет порядок блоков;
заполняет только нужные поля;
может дублировать и копировать секции;
видит изменения в черновике до публикации;
может открыть предпросмотр без публикации;
получает проверку обязательных полей перед публикацией;
удалённые секции можно восстановить из корзины.

Что получает разработчик

структурированные данные вместо большого HTML в content;
отдельный шаблон Fenom для каждой секции;
контроль HTML и CSS;
JSON-структуру страницы;
события pbOn* для расширения;
возможность создавать собственные типы секций;
Public API для опубликованных данных;
в Pro — REST API и Agent API.

Как устроен PageBuilder

PageBuilder не пытается заменить MODX и не превращает менеджер в визуальный HTML-редактор.

Страница собирается из структурированных секций: Страница → Секции → Поля → Данные → Fenom → HTML

Обычное поле content при этом не используется для хранения секций. Редактор работает с отдельным состоянием страницы, а на сайт попадает только опубликованная версия.

Черновик → Предпросмотр → Публикация

Изменения сначала остаются в черновике.

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

После нажатия Опубликовать текущая раскладка становится опубликованной.

Удалённые секции попадают в корзину и могут быть восстановлены. В редакторе также доступны Undo/Redo и проверка обязательных полей перед публикацией.

Секции вместо огромного шаблона

Вместо одного большого поля с HTML страница состоит из независимых блоков.

Например: Hero → Преимущества → Текст → Галерея → Тарифы → FAQ → CTA

Каждая секция знает:

свой тип;
набор полей;
структуру данных;
свой Fenom-шаблон;
свой BEM-блок;
версию структуры.

Порядок секций можно менять непосредственно на ресурсе.

Каталог готовых секций

В PageBuilder уже есть секции для наиболее распространённых элементов страницы.

Free

Первый экран (Hero) — Первый блок после шапки сайта. Посетитель сразу видит заголовок, короткий текст и кнопку с ссылкой. Фоновую картинку можно включить или оставить однотонный фон.
Текстовый блок — Обычный текстовый фрагмент между другими секциями. Редактор похож на стандартный richtext MODX: абзацы, списки, ссылки, базовое форматирование.
Карточки — Универсальная сетка: в каждой карточке заголовок и короткий текст. Без иконок и кнопок. только структурированный список блоков.
Контакты — Простой контактный блок: телефон и email кликабельны (tel: / mailto:), можно добавить короткий текст и кнопку.
Призыв к действию — Короткий акцентный блок посередине или в конце страницы. Заголовок, поясняющий текст и одна кнопка с URL.
Вопросы и ответы — Блок частых вопросов. Каждая строка содержит заголовок вопроса и текст ответа. Ответ может включать HTML из richtext.
Цифры и факты — Несколько показателей в одну линию или сетку: «10 лет на рынке», «500+ клиентов». Цифра крупно, пояснение мелким текстом.
Отзывы клиентов — Социальное доказательство: цитата клиента, имя, роль и аватар. Несколько отзывов выводятся сеткой.
Видео — Responsive iframe по ссылке на ролик. Поддерживаются популярные хостинги;
Изображение — Один кадр на всю ширину колонки контента. Подходит для иллюстрации, скриншота или баннера без кнопки.
Отступ — Пустая секция фиксированной высоты. Нужна, когда соседние блоки визуально слипаются и не хватает «воздуха».

Pro

Адреса — Секция выводит точки из repeater.
Аккордеон — Секция рендерит панели как details. Отдельного JS нет.
Вкладки — Длинный материал делится на вкладки: доставка, оплата, характеристики. Контент каждой вкладки. HTML из richtext.
Галерея — Несколько фото или скриншотов в одной секции. У каждого изображения свой alt и необязательная подпись под превью.
Динамический список — Секция показывает записи провайдера на момент рендера. Провайдеры: modx-resources, pagebuilder-tables, minishop3.
До и после — Секция ставит два кадра рядом.
Загрузки — Секция выводит файлы из repeater.
Записи блога — Автоматическая лента статей: вы указываете родителя-блог, лимит и сортировку. Анонс и превью подтягиваются из ресурсов.
Как это работает — Секция выводит шаги из repeater.
Карта — Точка на карте по координатам или адресу.
Карусель галереи — Те же слайды, что в Галерее, но по одному на экране с листанием. Можно включить автопрокрутку.
Карусель товаров — Те же данные, что в Сетке товаров, но в карусели. Удобно, когда места мало, а товаров много.
Кейс — Секция описывает один проект.
Квиз — Многошаговый квиз: ответы, контакты, опциональный расчёт цены, письмо на email.
Команда — Блок команды: фото, имя, роль и короткий текст «о себе». Несколько человек выводятся сеткой.
Конструктор формы — Секция берёт схему из вкладки CMP Forms. Собирайте формы разной конфигурации с помощью конструктора
Контакты с картой — Объединяет секции Контакты и Карта: слева (или сверху) контакты и CTA, рядом iframe карты.
Логотипы партнёров — Блок «Нам доверяют»: логотипы в CSS-сетке. У каждого лого alt для доступности.
Медиа и текст — Секция ставит изображение и текст в две колонки
Подборка товаров — В отличие от Сетки товаров, здесь нет привязки к одной категории: вы отмечаете конкретные ID в multirelation.
Похожие товары — На карточке товара показывает другие SKU из той же (или заданной) категории, кроме текущего ресурса.
Портфолио — Секция показывает проекты из repeater.
Преимущества — Блок «Почему мы»: у каждого пункта иконка из media, заголовок и пояснение. Визуально богаче, чем секция Карточки.
Промо-баннер — Широкий промо-блок: заголовок, текст, CTA, фон и опционально карточка товара miniShop3.
Рассылка — Секция рисует HTML-форму. Отправка идёт на внешний action_url, не через FetchIt.
Ряд брендов — Похоже на Логотипы партнёров, но можно подтянуть бренды (vendors) из категории каталога автоматически.
Ряд категорий — Навигация по каталогу: дочерние категории выбранного родителя с превью и ссылкой.
Сетка с фильтром — Секция filterable_grid показывает записи с фильтрами в URL. На сайте форма, сортировка и пагинация идут через Ajax (pagebuilder-filterable-grid.js), адрес обновляет history.pushState.
Сетка товаров — Классическая сетка интернет-магазина: карточки с фото, ценой, бейджами и кнопкой «В корзину». Товары из выбранной категории.
Сравнение товаров — Вы вручную выбираете несколько товаров в инспекторе. На сайте появится таблица характеристик по колонкам.
Структурированный контент — Альтернатива Текстовому блоку для лонгридов. Блочный редактор: заголовки H2–H4, списки, цитаты, встроенные изображения
Таблица данных — Данные хранятся в панели управления или на вкладке Таблицы ресурса, а секция только выводит выбранную таблицу с лимитом строк.
Таблица характеристик — Двухколоночная таблица для технических данных. Сверху необязательный заголовок и вступление.
Тарифы — Таблица цен для подписок и пакетов услуг. У каждого плана название, цена, период оплаты и список фич текстом.
Товар в фокусе — Hero магазина или «товар недели»: крупное фото, цена, описание и добавление в корзину. Один товар из msProducts.
Уведомление — Секция выводит короткое сообщение.
Форма обратной связи — Вы собираете набор полей в инспекторе (text, email, phone, textarea, select, radio, checkbox, date), задаёте Ключ формы и текст после отправки. Отправка идёт через FetchIt и сниппет PageBuilderContactForm.
Хронология — Секция timeline выводит события в порядке строк repeater.
Цитата — Секция выводит одну цитату.

Каталог организован по назначению: контент, конверсия, медиа, доверие, данные и магазин. Для коммерческих секций требуется MiniShop3; отдельные формы и Quiz используют FetchIt.

Инспектор — редактирование содержимого секции

После добавления секции редактор не работает с HTML.

Он получает инспектор с набором полей, которые определил разработчик.

Например, секция Преимущества может содержать:

title
items[]
icon
title
text

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

Типы полей

PageBuilder предоставляет большой набор готовых полей для построения структуры секций.

Free

ace, button, checkbox, checkboxgroup, chunk, color, colorpalette, date, datetime, email, file, heading, hidden, image, migx, multiselect, number, radio, readonly, epeater, resourcelist, richtext, select, slug, snippet, tag, text, textarea, time, toggle, tv, url, video, xtype, yesno.

Pro

address, combo, currency, datasource, daterange, dependent, documents, editorjs, embeddedTable, fieldset, form, gallery, icon, imask, jsongrid, keyvalue, link, map, multicombo, multirelation, product, products, relation, schedule, table, tablecombo, tablemulticombo.

Иконки без загрузки файлов

Pro-поле icon предоставляет готовый picker с двумя наборами SVG-иконок:

Lucide;
Heroicons.

В данные сохраняется не HTML и не файл, а структура:

{ "set": "lucide", "name": "star" }

При выводе PageBuilder добавляет SVG-представление и его можно использовать непосредственно в Fenom-шаблоне.

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

Таблицы внутри секций

Pro-поле table позволяет создавать структурированные небольшие таблицы непосредственно внутри секции.

Для колонок доступны типы:

текст;
число;
изображение;
цвет;
дата;
тег;
валюта;
URL.

В редакторе также доступны дополнительные варианты ячеек: yesno, toggle, checkbox, colorpalette, time и datetime.

Таблица поддерживает:

настраиваемое количество строк и колонок;
ограничение максимального количества строк;
ширину колонок;
заголовок;
группы строк;
colspan и rowspan;
импорт CSV;
изображения и цвета в ячейках;
предпросмотр результата прямо в Inspector.

Такой подход подходит для характеристик, сравнений, небольших прайс-листов и других таблиц, которые являются частью конкретной секции.

Для больших или внешних наборов данных предназначен embeddedTable и механизм Datasources.

PageBuilder Pro

Pro расширяет редактор не только новыми секциями.

Это набор инструментов для работы с большими и сложными страницами.

Библиотека — общие секции

Секцию можно сохранить в библиотеку и использовать на других страницах.

Есть два основных сценария:

Copy — независимая копия секции;
Link — связанная секция с master-версией.

Для связанных секций можно оставить отдельные локальные поля, а общие данные изменять централизованно.

Например, один промо-блок можно разместить на 20 страницах и изменить его содержимое из одного места.

История изменений секций

Pro ведёт журнал событий секций: create → update → copy → remove → enable → disable

Для секции можно открыть историю и восстановить её состояние.

Это именно история изменений секций, а не попытка делать полную историю всей страницы одним снимком.

Шаблоны страниц

Если на проекте используются типовые страницы, можно заранее определить их структуру.

Например: Hero → Features → Content → Products → FAQ → CTA

Шаблон содержит порядок и типы секций, после чего его можно применить к черновику страницы.

Редактору остаётся заполнить готовую структуру.

Presets — готовые примеры

Pro добавляет вкладку с готовыми примерами секций.

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

Responsive Values

Для поддерживаемых полей можно задавать разные значения для:

Desktop;
Tablet;
Mobile.

Поддерживаются, в частности, text, textarea, url, number, currency, richtext и slug.

Условия отображения

Секции могут использовать условия отображения.

В зависимости от настроек можно учитывать:

авторизацию пользователя;
гостя;
контекст;
GET-параметры;
другие условия evaluator.

Это позволяет использовать одну страницу для разных сценариев без создания нескольких копий ресурса.

Копирование между контекстами

Pro позволяет переносить секции между контекстами MODX.

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

UTM и динамический контент

PageBuilder Pro умеет работать с UTM-правилами.

Это позволяет привязывать отображение определённых вариантов контента к параметрам входящего URL.

Например, одна страница может иметь разные варианты промо-секции для разных рекламных источников.

Опубликованные UTM-правила исполняются и в Free-части PageBuilder.

Datasources

Pro позволяет строить секции не только из вручную введённых данных.

Datasources работают с источниками данных, включая:

ресурсы MODX;
таблицы PageBuilder;
MiniShop3.

На их основе работают, например:

Dynamic List;
Filterable Grid.

Так страница может получать актуальные данные из существующих сущностей проекта, а не хранить их копии внутри секции.

Формы

Pro содержит инфраструктуру для форм и секцию Form Builder.

Поддерживаются:

поля формы;
CSRF;
honeypot;
FetchIt;
отправка email;
webhook после commit.

Данные отправленных форм при этом не сохраняются в базе PageBuilder.

MiniShop3

PageBuilder Pro может использоваться как визуальный слой для коммерческих страниц MiniShop3.

Доступны секции:

сетка товаров;
карусель товаров;
товар в фокусе;
подборка товаров;
похожие товары;
сравнение товаров;
ряд брендов;
ряд категорий;
и другие commerce-секции.

Товарные секции используют данные MiniShop3, а не создают отдельную копию каталога внутри PageBuilder.

API и Headless

PageBuilder может использоваться не только для классического MODX-фронтенда.

Опубликованные секции доступны в JSON через Public API.

Это позволяет использовать PageBuilder как источник структурированного контента для:

Nuxt;
Vue;
другого JavaScript-фронтенда;
мобильного приложения;
внешнего сервиса.

В Pro дополнительно доступны REST API v1 и Agent API для программной работы с секциями.

Собственные секции

PageBuilder не ограничивается встроенным каталогом.

Разработчик может создать собственный тип секции:

описать структуру полей;
создать Fenom chunk;
определить BEM-блок;
зарегистрировать секцию;
использовать её вместе со стандартным каталогом.

Собственные типы могут регистрироваться через плагин на событии pbOnRegisterSectionDefinitions.

PageBuilder и существующий сайт

PageBuilder не требует переписывать весь проект.

Его можно подключить только там, где нужен конструктор секций.

Например:

главная страница собирается в PageBuilder;
каталог остаётся обычным MiniShop3;
статьи продолжают использовать content;
отдельные лендинги переводятся на секции;
существующие шаблоны и CSS продолжают отвечать за внешний вид.

На фронтенде достаточно вывести опубликованные секции через:

{'!PageBuilder' | snippet}

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

PageBuilder — это не визуальный редактор HTML

PageBuilder не пытается дать редактору возможность свободно двигать каждый HTML-элемент.

Вместо этого разработчик один раз определяет: структура → поля → данные → шаблон

А редактор дальше работает с готовой моделью.

Это позволяет сохранить контроль над:

HTML;
CSS;
семантикой;
адаптивностью;
структурой данных;
производительностью;
интеграцией с MODX и MiniShop3.

Вывод PageBuilder на сайте

PageBuilder отвечает не только за визуальное редактирование страниц в менеджере. Опубликованные секции можно использовать непосредственно на frontend MODX через набор специализированных сниппетов.

Базовый вариант:

{'!PageBuilder' | snippet}

Он выводит опубликованные секции текущего ресурса.

PageBuilder при этом рекомендуется вызывать некэшированно, чтобы после публикации MODX не отдавал старую HTML-версию страницы.

PageBuilderResource — получить секции другой страницы

Не обязательно выводить только секции текущего ресурса.

Например, на всех страницах сайта можно вывести Hero с главной страницы:

{'!PageBuilderResource' | snippet : [
  'resource_id' => 42,
  'section_types' => 'hero'
]}

Где 42 — ID ресурса-источника.

Это удобно для общих или централизованно управляемых блоков:

Hero;
CTA;
FAQ;
промо-блоков;
общих информационных секций.

resource_id=0 означает текущий ресурс.

Фильтрация секций

При выводе можно указать только нужные типы секций.

Например:

{'!PageBuilder' | snippet : [
  'section_types' => 'hero,cta'
]}

В результате PageBuilder обработает только секции типов hero и cta.

Это позволяет использовать одну страницу PageBuilder как источник разных частей контента.

Получение данных вместо HTML

PageBuilder может вернуть не только готовую HTML-разметку.

Например:

{'!PageBuilder' | snippet : ['return_values' => 1]}

В этом режиме можно получить опубликованные данные секций в JSON и использовать их дальше в собственном коде или интеграции.

Таким образом, PageBuilder может работать как источник структурированного контента, а не только как frontend-рендерер.

PageBuilderSitemap

Для страниц, использующих опубликованные секции, предусмотрен отдельный сниппет:

{'!PageBuilderSitemap' | snippet}

{'!PageBuilderSitemap' | snippet : [
  'context' => 'web',
  'priority' => '0.8',
  'changefreq' => 'daily'
]}

Он формирует XML sitemap страниц с опубликованными секциями.

Это позволяет учитывать страницы PageBuilder в отдельном sitemap-сценарии.

PageBuilder и UTM

Для Pro-сценариев с UTM-правилами предусмотрен:

{'!PageBuilderUtmSession' | snippet}

Он получает UTM-параметры из query string и сохраняет их в сессию.

Вызывать его нужно один раз на запрос и до вывода секций, если на странице используются UTM-правила видимости.

Также есть:

{'!PageBuilderUtmUrl' | snippet : [
  'url' => 'https://example.com/landing'
]}

который позволяет получить URL с UTM-параметрами из зарегистрированных в PageBuilder правил.

Это удобно для генерации ссылок на рекламные и маркетинговые сценарии.

PageBuilderTableRows

Для табличных данных существует отдельный сниппет:

{'!PageBuilderTableRows' | snippet : [
  'table_key' => 'offices',
  'limit' => 50
]}

Он позволяет получить строки табличных данных в JSON или передать их в chunk.

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

Сниппеты Pro для интерактивных секций

Некоторые Pro-секции имеют собственные серверные обработчики.

К ним относятся:

PageBuilderQuiz — обработчик секции Quiz;
PageBuilderContactForm — обработчик Contact Form;
PageBuilderFormBuilder — обработчик Form Builder;
PageBuilderFetchIt — отрисовка формы через Fenom.

При этом эти обработчики не нужно вызывать вручную из шаблона.

Секции quiz, contact_form и form_builder сами используют необходимый обработчик через PageBuilderFetchIt.

MODX и Fenom

Все основные сниппеты PageBuilder можно использовать как из обычного MODX-шаблона:

[[!PageBuilder]]

так и из Fenom:

{'!PageBuilder' | snippet}

Например, фильтрация секций в Fenom:

{'!PageBuilder' | snippet : ['section_types' => 'hero,cta']}

Получение секций другого ресурса:

{'!PageBuilderResource' | snippet : ['resource_id' => 42]}

Так PageBuilder одинаково хорошо вписывается как в стандартные MODX-шаблоны, так и в frontend на Fenom/pdoTools.

Типовой порядок на странице

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

PageBuilderUtmSession ↓ PageBuilder ↓ PageBuilderTableRows

PageBuilderUtmSession используется только при необходимости UTM-правил.

PageBuilder выводит опубликованные секции текущей страницы.

PageBuilderTableRows используется отдельно, если табличные данные необходимо вывести вне секции data_table.

PageBuilder как слой вывода

В результате архитектура PageBuilder выглядит не просто как:

Редактор → HTML

а как:

Редактор ↓ Секции ↓ Опубликованные данные ↓ Сниппеты / API ↓ HTML / JSON / интеграции

Это позволяет использовать один и тот же контент в разных сценариях:

выводить страницу обычным MODX-шаблоном;
выводить секции другой страницы;
фильтровать определённые типы секций;
получать структурированные данные;
использовать UTM-правила;
выводить таблицы отдельно;
строить sitemap;
обрабатывать интерактивные Pro-секции.

Именно поэтому PageBuilder можно рассматривать не только как визуальный конструктор, но и как структурированный слой контента между MODX и frontend.

Когда использовать PageBuilder

PageBuilder подходит, если:

контент-менеджеру нужно самостоятельно собирать страницы;
на сайте много лендингов и промо-страниц;
одни и те же секции используются в разных местах;
нужна структурированная модель контента;
нужно отделить контент от HTML;
нужен draft/publish;
нужен контролируемый frontend вместо свободного HTML;
нужно связать страницы с MiniShop3;
планируется headless/frontend на Vue или Nuxt.

PageBuilder не обязательно использовать для:

простого текста, который достаточно хранить в content;
данных, которые логичнее хранить в специализированном компоненте;
больших внешних наборов данных, где лучше использовать Datasources;
каталога товаров, который должен оставаться источником данных MiniShop3.

Free и Pro

PageBuilder Free

визуальный редактор секций;
draft/publish;
предпросмотр;
drag & drop;
дублирование и копирование секций;
корзина;
35 типов полей;
базовый каталог секций;
Fenom-вывод;
Public API опубликованных данных;
собственные секции и расширение через события.

PageBuilder Pro

Library и связанные секции;
история изменений;
шаблоны страниц;
Presets;
Responsive Values;
Conditions;
копирование между контекстами;
27 дополнительных типов полей;
UTM;
Collections;
Datasources;
Forms;
Image Crop;
глобальная корзина;
Pro-секции;
MiniShop3-интеграции;
REST API;
Agent API.

Технологическая основа

PageBuilder рассчитан на современный стек MODX:

MODX 3;
PHP 8.2+;
Vue 3;
VueTools;
pdoTools.

PageBuilder использует Fenom для шаблонов секций и сохраняет разделение между данными редактора и frontend-разметкой.

Для Pro добавляются: Library, Templates, Presets, Conditions, UTM, Datasources, MiniShop3, REST API, Agent API

С чего начать

Если вы впервые устанавливаете PageBuilder, достаточно начать с базового сценария:

установить PageBuilder;
открыть ресурс;
перейти во вкладку Секции;
добавить Hero;
добавить несколько секций из каталога;
заполнить поля в Inspector;
изменить порядок блоков;
открыть предпросмотр;
опубликовать страницу.

После этого уже можно перейти к собственным секциям, Library, шаблонам и Pro-возможностям.

Документация

PageBuilder — это способ дать редактору свободу собирать страницы, не отдавая ему контроль над frontend-разметкой.

Разработчик определяет систему секций и данных один раз. Контент-менеджер собирает из неё страницы. А Pro добавляет инструменты для повторного использования, масштабирования, динамических данных, коммерции и интеграции с внешним frontend.

Немного видео демонстрации rutube.ru/video/16bbf837cb0198641b2efb8c452ff51f/

Иван Бочкарев

53 минуты назад

Комментарии: 0

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

PageBuilder — визуальный конструктор страниц для MODX 3

Комментарии: 0

Здесь упомянуты