Конструктор блоков для Битрикса — портфолио Егора Лободенко

Клиент: Личный продукт
Тип проекта: 1С-Битрикс
Сайт с конструктором: Загрузка…

О проекте

Разработал собственный конструктор контента EL.flexible.content, который использую как основу проектов на 1С-Битрикс. Редактор собирает страницы из готовых блоков и меняет содержимое через понятные поля, сам может собирать страницы как в конструкторе. Для разработчиков разработан дополнительные возможности по созданию уникальных компонентов по дизайну и выводу, использования стандартных компонентов Битрикса так же доступна.

Что было сделано

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

EL.flexible.content это собственный конструктор блоков для 1С-Битрикс. С его помощью страницу можно собрать из готовых частей, как в обычных конструкторах: добавить баннер, описание, карточки услуг, галерею, тарифы и форму заявки. Содержимое заполняется через поля в блоках, порядок блоков меняется внутри редактора блоков. Этот модуль часто использую как основу разработки сайтов на Битриксе, он весьма удобен.

Исходная

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

Задача

Разработать модуль, который объединит готовые блоки, удобное редактирование и возможности самой CMS. Редактор должен управлять содержимым и компоновкой страницы, для разработчика адаптировать блоки под дизайн проекта и подключать существующие компоненты Битрикса. Конструктор должен подходить для всех редакций «1С-Битрикс: Управление сайтом».

Страница из готовых частей

Сначала конструктор подключается к сайту и подготавливается оформление в настройках. После этого редактор работает с доступной библиотекой: добавляет блоки, заполняет контент поля, переставляет секции и сохраняет страницу. После сохранения, содержимое показывается на сайте.

Владельцу сайта

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

Редактору

Понятно, где менять заголовок, фотографию, цену или кнопку. Большая страница разделена на отдельные части, с которыми удобно работать по очереди.

Разработчику

Есть общая основа для новых проектов: редактор, хранение данных, библиотека блоков и возможность подключать собственные шаблоны и компоненты CMS.

Модуль подходит для всех редакций «1С-Битрикс: Управление сайтом». Техническое условие установки версия главного модуля 20.00.00 или выше. Для хранения блоков используется собственная таблица; Highload-блоки не требуются. Подключаемые возможности магазина и других компонентов зависят от лицензии и состава установленного Битрикса.

Как проходила работа

1. Сделал содержимое страницы набором самостоятельных блоков

Разделил страницу на части, у каждой из которых есть тип, настройки и содержимое. Блоки привязаны к конкретному элементу инфоблока или его разделу. Их структура, настройки и содержимое сохраняются в собственной таблице модуля в формате JSON. Благодаря этому у двух страниц одного раздела может быть разная компоновка: редактор выбирает нужные блоки из общей библиотеки.

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

Добавил вкладку «Конструктор контента» в редактор элементов и разделов выбранных инфоблоков Битрикса. Сделал поиск блока по названию, понятные поля и управление порядком мышью или кнопками «Вверх» и «Вниз». Блок можно свернуть, скопировать, временно скрыть или показать только администратору. Удаление можно отменить до сохранения записи это помогает спокойно работать с длинными страницами.

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

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

Для разработчиков предусмотрел Repeat пользовательский блок с повторяющимися группами полей. Можно задать свои текстовые поля и изображения, включить повторение и связать данные с шаблоном вывода. Так в библиотеку добавляется нестандартная секция, а редактор заполняет её подготовленными полями.

4. Предусмотрел оформление под конкретный проект

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

5. Добавил общий контент и работу с разделами

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

6. Связал конструктор с возможностями самого Битрикса

Сделал компонент «Гибкий контент: вывод блоков», который связывает страницу с её содержимым и доступен в визуальном редакторе CMS: его можно разместить в нужном месте страницы и выбрать источник элемент инфоблока, раздел или общие блоки. Добавил привязку к существующим материалам и разделам, а также отдельный блок для стандартного компонента Битрикса: например, списка новостей. Разработчик выбирает компонент, его шаблон и параметры; редактор продолжает работать с обычными блоками. В результате на одной странице можно сочетать авторские секции и штатные возможности Битрикса.

7. Объединил кнопки и формы единый сценарий внутри конструктора

Для кнопок предусмотрел три действия: открыть ссылку, перейти к нужному месту на странице или показать форму заявки. У формы можно настроить заголовок, описание, получателей письма и сохранение обращения в административной панели. Заявка может содержать контекст выбранного предложения его название и цену. Обязательные поля и согласие проверяются на сервере, а после принятой отправки посетитель видит сообщение об успехе.

8. Добавил подсказки и подготовил модуль к повседневной работе

У каждого блока есть встроенная база знаний через кнопку «?», которая объясняет назначение, заполнение полей и результат на сайте.

Библиотека блоков

Все универсальные блоки текущей версии EL.flexible.content сгруппированы по назначению. Оформление адаптируется под проект. На снимках — редактор, нейтральный баннер и примеры стандартных блоков на сайте «Сальвадор». Изображения можно открыть в полном размере.

Текст и баннеры

Текстовый блок: Заголовок, абзацы, списки, ссылки и таблицы.
Повторяемый текстовый блок: Списки с иконками, заголовками и описаниями; настраиваемые колонки.
Баннер (2 колонки): Текст, изображение, подписи и кнопки для первого экрана.

Обезличенный пример баннера: мебель для офиса, краткое описание, две кнопки и фотография рабочего пространства — **Баннер с демонстрационным контентом**

Редактор контента с настройками блока, заголовком и описанием страницы — **Редактор: поля и управление блоками**

Повторяемый блок: заголовок, ссылка и список инфраструктуры с иконками в двух колонках — **Преимущества и списки с иконками**

Карточки

Шаги (карточки с номерами): Этапы работы с автоматической нумерацией и стрелками.
Карточки с тегами: Фотографии с метками и подписями.
Ряды: текст и изображение: Заголовок, текст и фото; второе изображение может появляться при наведении.
Карточки предложений: Фото, описание, цена и кнопки для заявки или перехода к подробностям.
Фото-карточки: Сетка изображений с подписями.
Тарифные карточки: Варианты тарифов с фотографиями, стоимостью и составом пакета.
Карточки услуг (фото + цена): Описание услуги, цена, длительность и ссылка.
Карточки со сплит-панелью: Фотография и цветная панель с названием, ценой и ссылкой.
Фото-баннер + пункты: Широкая фотография и несколько колонок преимуществ.

Блок тарифов: три варианта постоя с фотографиями, списками включённых услуг и ценами — **Тарифы и состав пакетов**

Галереи

Слайдер изображений: Набор изображений с заголовками и горизонтальным пролистыванием.
Фотогалерея (слайдер): Фотографии и видео с просмотром в полном размере.

Галерея EL.flexible.content с фотографиями условий постоя и стрелками горизонтальной прокрутки — **Галерея фотографий**

Панели

Зигзаг (текст и фото): Ряды текста и фотографий с автоматическим чередованием сторон.
Текст и фото на панели: Заголовок и абзацы рядом с изображением на общей панели.
Информационный лейбл: Компактная плашка с заголовком, текстом и кнопкой или ссылкой.

Информационная панель школы верховой езды: заголовок, описание, фотография и ссылка Подробнее — **Текст с фотографией и действием**

CMS и Repeat

Привязка к элементам инфоблока: Вывод названий и подробных описаний одного или нескольких материалов CMS.
Привязка к разделам: Вывод названий и описаний выбранных разделов.
Встраиваемая область: Подключение подготовленного файла через включаемую область Битрикса.
Компонент 1С-Битрикс: Вставка установленного компонента с его шаблоном и параметрами; настраивает разработчик.
Кастомизируемый блок (Repeat): Разработчик задаёт поля и шаблон, редактор заполняет повторяющиеся группы.
Глобальный блок: Подключение блока из общей библиотеки. Его контент меняется один раз для всех размещений.

Компонент Гибкий контент: вывод блоков в списке компонентов визуального редактора 1С-Битрикс — **Конструктор в визуальном редакторе Битрикса**

Системные и формы

Навигационные крошки: Автоматическая цепочка переходов по разделам сайта.
Заголовок страницы: Главный заголовок H1 или заголовок H2.
Модальная форма обратной связи: Общая форма, которую открывают кнопки блоков; отправка письма и сохранение заявки.
Контакты с формой: Контактные карточки и форма рядом; наполняется в библиотеке глобальных блоков.

Готовая текстовая страница: навигационные крошки, главный заголовок и абзацы содержимого — **Заголовок, навигация и обычный текст**

Нативная модальная форма EL.flexible.content: имя, телефон, необязательный Telegram, согласие и кнопка отправки — **Форма открывается из кнопки блока**

Сравнение с Битриксом

EL.flexible.content объединяет работу с блоками в одном редакторе внутри записей и разделов сайта.

С EL.flexible.content

Обычный функционал Битрикса

Структура страницы

Блоки в нужном порядке, отдельная компоновка для каждой записи.

Компоновка задаётся страницей и шаблоном проекта.

Поля блоков

У каждой секции свой понятный набор полей.

Поля и интерфейс сложных секций настраиваются под проект.

Копирование

Готовый блок переносится между записями и редактируется независимо.

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

Общий контент

Один блок из библиотеки обновляет все свои размещения.

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

Наследование разделов

Общие блоки раздела с дополнениями и исключениями для страниц.

Правила наследования задаются логикой шаблона.

Компоненты

Стандартные компоненты и авторские блоки в одной последовательности.

Сочетание компонентов и секций настраивается в странице или шаблоне.

Кнопки и формы

Ссылка, переход или форма выбираются в настройках блока.

Связь кнопки с формой и предложением настраивается в проекте.

Подсказки

Инструкция рядом с полями каждого блока.

Есть документация CMS; справка для своих секций готовится отдельно.

У Битрикса уже есть компоненты, включаемые области и конструктор Сайты24. Сравнение относится к типичной работе с записями, разделами и шаблонами CMS.

Принцып работы конструктора

В EL.flexible.content структура страницы хранится как JSON в собственной таблице базы данных. При запросе страницы модуль получает эти данные через API Битрикса и собирает из них готовую HTML-разметку. Ниже цепочка сохранения и вывода в текущей реализации.

Сохранение в административной панели

Редактор блоковПоля, порядок, изображения и настройки элемента или раздела инфоблока.
Проверка и подготовка JSONМодуль проверяет данные, обрабатывает файлы и формирует структуру блоков.
Собственная таблица: JSON в поле CONTENT, с привязкой к владельцу.

Вывод при запросе страницы

Страница вызывает модульКомпонент flexible:content или методы Renderer получают ID источника.
Получение данныхStorage читает кеш или выполняет запрос через D7 ORM, затем декодирует JSON.
Сборка HTML на сервереПрименяются порядок, видимость, общие блоки и наследование. PHP-шаблоны выводят секции.
Готовая страницаHTML попадает в ответ сайта. Содержимое получают браузер посетителя.

Как устроено хранение

ORM-класс ContentTable описывает таблицу. В поле CONTENT сохраняется сериализованная структура с версией, массивом блоков и настройками. Привязку определяют IBLOCK_ID, ENTITY_TYPE и ELEMENT_ID: последний содержит ID, которым может быть как элемент, так и раздел.

Так содержимое конструктора отделено от полей и свойств инфоблока. Используется собственная ORM-сущность Изображения сохраняются через файловые механизмы Битрикса, а в данных блока остаются их идентификаторы.

Как JSON становится разметкой

Storage::getEntry() возвращает данные из кеша или читает запись через ContentTable::getList(). После json_decode() конструктор получает массив блоков. Renderer разрешает наследование разделов, подставляет общие блоки, учитывает видимость и передаёт содержимое в PHP-шаблоны нужных типов.

На выходе формируется HTML, который включается в страницу Битрикса. Стандартные компоненты внутри конструктора также выполняются на сервере. Кеш и пакетное получение блоков для списка элементов уменьшают повторные обращения к данным.

Такой подход соответствует серверному рендерингу. Доступность содержимого в исходном HTML описана в рекомендациях Google Search Central, а механизм получения данных в документации D7 ORM Битрикса.

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

Допустим, на сайте появляется новая услуга. Нужно показать фотографии, объяснить состав предложения и дать возможность оставить заявку.

Берёт подготовленную страницу или создаёт новую запись. Если страница ещё не подключена к конструктору, связь настраивается через его компонент или шаблон сайта.
Добавляет баннер. Заполняет название услуги, короткое описание и фотографию.
Раскрывает предложение. Добавляет преимущества, тарифы и галерею; ненужные секции скрывает, остальные переставляет в подходящем порядке.
Подключает действие. Выбирает форму для кнопки «Оставить заявку» или переход к нужной части страницы.
Сохраняет и проверяет. Смотрит страницу на компьютере и телефоне, проверяет изображения, ссылки, порядок блоков и заголовки.

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

Что помогает развивать сайт дальше

Контент остаётся частью CMS

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

Оформление можно менять

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

Учтена повторная загрузка

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

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

Результат

Получился собственный модуль для всех редакций «1С-Битрикс: Управление сайтом», который объединяет редактор, библиотеку блоков, общий контент, формы, стандартные компоненты и расширяемые шаблоны. Он помогает передать владельцу сайта управляемые страницы с понятными полями и сохранить возможность индивидуальной разработки.

Я часто использую EL.flexible.content как основу проектов на Битриксе: адаптирую блоки под конкретный дизайн, подключаю содержимое и добавляю нужную логику. Моя работа в этом кейсе, разработка самого модуля, его редактора, механизмов хранения и вывода, библиотеки блоков и средств интеграции с CMS.

Пример сайта, где работает конструктор: «Сальвадор» — salvador-life.ru ↗.