PAGE BUILDER

Page Builder

40+ блоков · превью 3 устройств · SEO в том же UI · очередь к разработке на текст −90%

Page Builder

Конструктор, который не ломает прод

Модуль Page Builder / PageBuilderWrapper внутри нашей админки. Слева — библиотека: Cover, Text, Image+Text, Features, Team, Pricing, Steps, FAQ, Gallery, GIF viewport, До/После, Wave, Shop, Forms и др. По центру — canvas секций. Справа — настройки блока и SEO (title, description, slug, OG).

Контент пишется в contentJson.blocks / sections. Публичный фронт рендерит те же компоненты — нет «экспорта в HTML», который потом никто не трогает. Это не Tilda: блоки — наша дизайн-система, кастом = новый тип в коде, а не бесконечный zero-height div.

Задача

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

Решение

Схема блоков ограничивает хаос. Медиа-блоки делят константы aspect/height. Inline-edit + панель секции. Превью Desktop / Tablet / Mobile до публикации. Upsert кейса/продукта = сохранение JSON, который сразу читает SSR/клиент.

Конструктор, который не ломает прод
Конструктор, который не ломает прод

Стек редактора

Тот же React/TS, что публичный фронт. Один язык блоков — ноль рассинхрона «в билдере одно, на сайте другое».

  • React
  • TypeScript
  • Node.js
  • Figma

40+ типов блоков под бренд,3 устройства до публикации,SEO без отдельного Notion

Результат

Было: любое изменение текста/секции на кейсе или продукте — задача в разработку (часы–дни). Стало: редактор собирает страницу из 40+ блоков, смотрит 3 превью, пишет SEO и публикует; очередь на текстовые правки сократилась примерно на 90%.

Разработка подключается только к новым типам блоков и сложной логике. Визуальный контроль остаётся у дизайн-системы, не у «произвола конструктора».

Срок: 75 дн.

  • Библиотека 40+ блоков под бренд PrimeCoder
  • Canvas + настройки секции без кода
  • Превью Desktop / Tablet / Mobile до publish
  • SEO-панель в том же UI, что вёрстка
  • contentJson → тот же рендер на проде и в SSR
  • Связка с Admin CMS (роли, черновики, медиа)

Эффект для маркетинга

Score: 95

  • Типов блоков: 40+
  • Очередь к разработке на текст: −90%
  • Превью устройств: 3
  • Vendor-lock Tilda: 0

Цвета

  • Canvas dark
  • Builder blue
  • Accent
  • UI
Макет

Метрики проекта

  • Vendor-lock (Tilda): 0
  • Типов блоков: 40+
  • Превью устройств: 3
  • Очередь к разработке на текст: −90%

Стек: React, TypeScript, Node.js, Figma

Галерея

PAGE BUILDER
PAGE BUILDER
PAGE BUILDER
PAGE BUILDER