Собирайте страницы из секций любой структуры: от простого заголовка с текстом до галерей, FAQ и своих блоков. Правите в черновике, публикуйте на сайт. Поле content ресурса не трогаем. 11 секций и 30 типов полей из коробки.



Зачем это

Страницу собираете из секций во вкладке ресурса. Пока правите, всё лежит в черновике. Нажали «Опубликовать» — на сайт уходит тот же набор блоков. Поле «Содержимое» ресурса для секций не трогаем. На витрине HTML отдаёт сниппет PageBuilder.

Если нужен свой блок (не только hero и FAQ), описываете схему в CMP, пишете Fenom-chunk и добавляете секцию на страницу. Без патча ядра.

Ключевые возможности Free

Секция любой структуры. Встроенные типы и свои JSON-схемы. Поля, repeater, вкладки инспектора, showWhen. Chunk на Fenom, классы pb-*.

30 типов полей. Текст, richtext, Editor.js, Ace, select/multiselect, дата, файл, image, video, color, resourcelist, repeater и остальные из списка ниже.

Черновик и публикация. Правки в draft_json. Publish пишет published_json и поднимает revision. Unpublish снимает вывод с сайта, черновик остаётся. Checklist перед publish открывает первую проблемную секцию. Два редактора не затирают друг друга: при конфликте revision клиент перезагружает документ.

Таблицы на ресурсе. Вкладка Tables для больших наборов строк: фильтры, import CSV/JSON, export, bulk. На сайте строки отдаёт PageBuilderTableRows.

UTM и контексты. Реестр меток в CMP. На секции: settings.utm и settings.contexts. В полях работает {{utm:key}}.

Collections. Набор вкладок ресурса по шаблону: sections, table, resources, empty, iframe, bridge к MODX Collections.

Копирование и корзина страницы. Дублирование секции, копирование с другого ресурса, per-page trash с restore/purge. Глобальный архив по сайту — в Pro.

Public API. Read-only JSON опубликованных секций для headless: assets/components/pagebuilder/api.php.

Как создать свою секцию

Право pagebuilder_manage_types. Путь: Компоненты → PageBuilder → модели секций.

1. Создайте chunk, например pagebuilder_promo (Fenom, оболочка pb-section).
2. В CMP задайте тип: key, label, category, chunk, fields.
3. Сохраните. Запись уходит в pb_section_types.
4. При необходимости ограничьте availability или requires.
5. Сбросьте кеш MODX. Тип появится в каталоге на ресурсе.

Встроенные strong-типы можно переопределить, скрыть из каталога или убрать tombstone.

Как добавить секции на ресурс

1. Включите вкладку: pagebuilder_resource_tab_enabled=1 (или Collection типа sections). По умолчанию вкладка выключена.
2. Откройте ресурс. Нужны pagebuilder_view / pagebuilder_save и политика save на документ.
3. «Секции» → Добавить → Hero, Rich text или свой тип.
4. Заполните инспектор. Черновик пишется в draft_json.
5. Превью (Desktop 1280 / Tablet 768 / Mobile 390). При необходимости переставьте блоки.
6. «Опубликовать». Закройте ошибки checklist, если есть.
7. Сам ресурс MODX тоже должен быть published.

Как вывести на фронте (Fenom)

В шаблоне или чанке темы (pdoTools). Незакэшированный вызов: префикс !.

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

{'!PageBuilder' | snippet}

Только выбранные типы:

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

JSON значений для SEO / плагинов (вместо HTML):

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

Без CSS пакета и без кеша HTML (отладка render):

{'!PageBuilder' | snippet : [
  'load_css' => 0,
  'use_cache' => 0
]}

PageBuilderResource — секции другого ресурса (resource_id обязателен).

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

PageBuilderSitemap — XML urlset по страницам с опубликованным PageBuilder.

{'!PageBuilderSitemap' | snippet}

PageBuilderUtmSession — кладёт UTM из запроса в $_SESSION. Ставьте до вывода секций, если нужны правила показа по меткам.

{'!PageBuilderUtmSession' | snippet}
{'!PageBuilder' | snippet}

PageBuilderUtmUrl — дописывает UTM из реестра к URL.

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

В chunk секции удобнее модификатор Fenom:

<a href="{$button.url|utm_query}">{$button.label}</a>

PageBuilderTableRows — строки resource data table через chunk (вкладка Tables).

{'!PageBuilderTableRows' | snippet : [
  'table_key' => 'price_list'
]}

Тема без правки chunks:

.pb-page {
  --pb-color-accent: #c2410c;
  --pb-content-max: 64rem;
}

[Скриншот] Страница на сайте с секциями pb-*
файл: frontend.png

Секции Free из коробки (11)

• hero (Главный экран) — title, description, кнопка, background, alignment
• richtext (Текстовый блок) — content (richtext)
• gallery (Галерея) — title + items (image, alt, caption)
• faq (Вопросы и ответы) — title + items (question, answer)
• cta (Призыв к действию) — title, text, кнопка
• spacer (Отступ) — size
• stats (Статистика) — title + items (value, label)
• testimonials (Отзывы) — title + items (quote, name, role, avatar)
• contact (Контакты) — title, text, phone, email, кнопка
• image (Изображение) — image, alt, caption
• cards (Карточки) — title + items (title, text)

Поля Free из коробки (30)

• text — однострочный текст
• textarea — многострочный текст без HTML-редактора
• richtext — HTML-редактор MODX
• ace — редактор кода (Ace)
• editorjs — блочный Editor.js
• number — число
• url — ссылка
• slug — ЧПУ-строка
• select — одиночный выбор из options
• multiselect — множественный выбор
• radio — радиогруппа
• checkbox — один чекбокс
• checkboxgroup — группа чекбоксов
• yesno — да / нет
• toggle — переключатель
• date — дата
• time — время
• datetime — дата и время
• file — файл из медиабраузера
• image — изображение (media record)
• video — видео URL / запись
• color — цвет
• colorpalette — выбор из палитры
• resourcelist — выбор ресурса MODX
• button — пара label + url для кнопки
• heading — заголовок-разделитель в инспекторе (без значения в data)
• hidden — скрытое значение
• readonly — только чтение
• xtype — произвольный ExtJS/xtype-виджет
• repeater — повторяемые строки с вложенными полями

Скоро: PageBuilder Pro
Отдельный transport pagebuilderpro, выходит следом за Free. Ставится поверх ядра. Версии независимы.

Появится то, чего нет в Free: библиотека секций, серверные версии и History, responsive-значения полей, условия

settings.conditions, пресеты каталога, глобальный Basket, Agent API (snapshot / apply).

Ещё 20 полей: relation, multirelation, gallery, map, table, embeddedTable, keyvalue, tag, currency, imask, combo, multicombo, tablecombo, tablemulticombo, fieldset, dependent, tv, chunk, snippet, jsongrid.

Секции Pro: data_table, features, video, team, pricing_table, tabs, structured_content, gallery_carousel, contact_form, spec_table, map, contact_map, logos, blog_posts. С miniShop3: products_grid, categories_row, product_spotlight, promo_banner, related_products, brands_row, product_comparison, curated_products, products_carousel.

Сводка: Free — 30 полей и 11 секций. Pro добавляет 20 полей и блоки выше. Вместе 50 типов полей.

Ещё в Free

• редактор: drag-reorder, Alt+↑/↓, undo/redo сессии, signed preview, fake-данные, delivery panel
• CMP: модели секций, UTM-реестр, Collections
• события pbOn* для save, publish, render, каталога
• права pagebuilder_view, pagebuilder_save, pagebuilder_manage_types

Требования

• MODX Revolution ≥ 3.0.3, PHP ≥ 8.2
• VueTools ≥ 1.1.2, pdoTools ≥ 3.0
• MySQL / MariaDB (xPDO 3)

Установка

1. VueTools → Package Manager → pagebuilder.
2. Кеш MODX. Права pagebuilder_*. Включите pagebuilder_resource_tab_enabled.
3. В шаблон: {'!PageBuilder' | snippet}.
4. Ресурс → «Секции» → опубликовать.

Скриншоты