Всем привет! Постоянный клиент попросил сделать посадочную страницу (лэндинг) для бизнес-услуги. Сейчас с такими задачами легко справляется любая ИИшка, но клиент от этой «диковины» пока далек, а мне задействовать мощь ИИ для лэндинга не составило труда. Результат клиенту с посадочной страницей понравился, но… Он захотел (как все клиенты после подписания актов) внести правки и самому менять местами какие-то блоки, править текст, что-то подкрашивать, редактировать и так далее без глубоких познаний в «сайтостроительстве».
Клиент прав (всегда прав). Задача интересная… Чтобы не зависеть от популярных конструкторов, иметь возможность использовать уже имеющиеся наработки, а также реализовать динамическое обновление контента, решил реализовать все на InstantCMS. Благо на движке есть просто замечательные примеры (всем рекомендую) — Конструктор блоков Zbuilder. Вот так появилась идея реализовать собственный компонент (потом названный BlockCraft), который позволяет собирать и редактировать страницы прямо в живом интерфейсе сайта без погружения в код шаблонов (а можно и с погружением, если очень хочется).
Что сейчас из себя представляет компонент (помимо того, что это суперконструктор):
- Никаких внешних Google Fonts, CDN JS или сторонних трекеров. Локальный стек системных шрифтов и встроенные SVG. Цвета, отступы и прочие параметры — все редактируется очень легко в элементах (элементы — это разная визуализация контента).
- Инлайн-SVG иконки, нативные пресеты WebP/AVIF, адаптивная разметка.
- Легкая настройка и редактирование — плавающая компактная шестеренка для настройки/перемещений в углу экрана с индикатором активности и контекстным меню.
- Прямой клик по заголовку или параграфу на странице включает режим редактирования. Нет необходимости каждый раз открывать форму настроек элемента ради исправления пары слов.
- Живой переключатель видового экрана: Десктоп, Планшет, Смартфон.
- Встроенный Lead Hub + Telegram. Запись всех заявок с форм и квизов в базу + мгновенные пуши в Telegram-чат.
- Веб-редактор шаблонов и стилей в админке.
- Вывод любых виджетов.
- Готовые Starter Packs. 4 глубоко проработанных отраслевых пресета (Автосервис, Ремонт, Digital-агентство, Консалтинг). Развертывание полностью готовой конверсионной страницы в 1 клик из админки или шестеренки. Далее простое редактирование.
- Drag-and-Drop сортировка блоков и элементов.
- Каталог элементов контента (сейчас реализовано 44 элемента). Каждый элемент можно редактировать, а также создавать копию.
Несколько скриншотов из интерфейса системы с пояснениями:
1. Плавающая кнопка-шестеренка с индикатором статуса, выпадающим меню, модальным навигатором структуры и быстрым переходом.
2. Структура страницы — легко перетаскиваем, меняем настройки и т.п.
3. Экспорт/импорт в JSON + 4 готовых отраслевых Starter Packs (Автосервис, Ремонт, Digital-агентство, Консалтинг).
4. 44 элемента (включая интерактивный квиз, шапку с drawer-меню, каталог программ с AJAX-фильтрами, витрину RUTUBE с модальным плеером, отзывы 5 звезд, тарифные сетки, метрики и т.д.). Каждый элемент можно редактировать прямо в админке, копировать. Есть поиск по элементам, их сортировка. Количество элементов будет расти, так как разные потребности.
5. Собираем заявки
6. Встроенный Lead Hub: запись заявок, сохранение ответов квиза, экспорт в Excel CSV.
7. Лёгкое редактирование секций, элементов
8. Инлайн-редактирование текстов или более глубокая настройка разных элементов.
9. Любые имеющиеся виджеты сайта (все, что в админке есть от любых компонентов)
10. Добавляем просто свой элемент
Что сейчас с компонентом
- Компонент активно тестируется и дополняется элементами (идет сбор заявок от постоянных клиентов).
- Идет наведение красоты.
- Продолжается работа над динамическим контентом — вывод ленты записей (новости, статьи, отзывы). Еще есть опции про вывод рандомной записи в определенном блоке. Но специальный элемент, который выводит любой имеющийся виджет сайта, уже полноценно работает.
- Есть потребность сделать полноценное демо и видео про возможности компонента (но нет пока времени).
Несмотря на то, что компонент пишется с привлечением ИИ, работу планируется завершить не ранее чем через пару недель. За это время надеюсь/надо доделать все задуманное (а идей как всегда очень много), протестировать и определиться с путями распространения.
По желанию, все элементы данного компонента, можно реализовать как отдельный виджет для любого шаблона. В принципе, как и просто отредактировать элемент, изменив код или CSS.
P.S.: Если есть предложения и пожелания, заранее спасибо! Ну а пока нас всех и нашу работу полностью не заменит ИИ, компонент планирую поддерживать для своих проектов :-)
Звучит мощно! 💪Дай вам бог, чтобы работало и работало без багов! Лендинги всегда нужны, так что у меня пока только один вопрос — сколько этот комбайн будет стоить? 😁
Спасибо за хорошие слова. Скорее всего разные редакции, в том числе free
"Никаких внешних Google Fonts, CDN JS или сторонних трекеров..."
Ну, это навряд ли).
"Нет необходимости каждый раз открывать форму настроек элемента ради исправления пары слов"
Слова, по идее должны быть прописаны в языковом файле. Редактирование меняет их там?
«Живой переключатель видового экрана: Десктоп, Планшет, Смартфон.»
Так вроде сам браузер с этим нормально так справляется. Или я что то не так понял?
"Веб-редактор шаблонов и стилей в админке."
Как правило это всегда работает коряво. Если конечно вы не меняете стили в основных файлах, а не создаёте временные.
"Вывод любых виджетов"
А что сейчас не так? Вроде всё выводится и редактируется из фронтенда).
Ну и далее примерно в том же духе. Плюс непонятные по значению слова типа Lead Hub, квизы,Starter Packs. Всё это вообще для кого и для чего делается? Не совсем понятно, если честно. Думаю будет не просто в это всё вникнуть. Тем более если плохо знаком с настройками самой системы.ИМХО. Я не совсем нуб, но я так и не осилил всё описание). Надеюсь вы параллельно пишите инструкцию).
Спасибо за комментарии. Постараюсь кратко:
1. Все шрифты от текущей темы InstantCMS. Интерактивы (аккордеоны, мобильное меню, табы) — чистый JS без подтягивания сторонних CDN. Иконки — локальный SVG.
2. Все системные надписи в языковых файлах (languages/ru/controllers/blockcraft/), а тексты в БД. Инлайн редактирование сделано только для удобства.
3. DevTools это для разработчиков понятно. А мне надо было для далекого от этого заказчика.
4. Редактирование кода в админке уберу. Подумаю как сделать чуть иначе и безопаснее.
5. А как сейчас выводить из фронтеда, не расставив виджеты на схеме? У меня был посыл такой, что не надо расставлять на схеме в админке, а можно прям на посадочной странице добавить любой существующий виджет в любом месте. Наверно не точно описал это в своем анонсе.
7. С англицизмами переборщил ) Lead Hub — блок захвата контактов — форма заявки с полями (телефон, имя, выбор удобного мессенджера) и галочкой согласия на обработку данных. Квиз — опросник для расчета цены или подбора услуги. На многих лендингах такое есть. Starter Packs — несколько заготовок — по сути, готовые сайты, бери и просто редактируй под себя, чтобы не собирать из блоков и элементов.
Инструкция будет подробная как отдельно, так и в админке + видео (оно многое наверно объяснит, просто время до него не дошло). Спасибо за конструктив!
Поля с поддержкой PHP кода, даже из админки, плохая идея.
Согласен, спасибо, уберу от греха подальше.