Comagic: сократили время вёрстки статей блога с 3‑5 дней до 15 минут, разработав конструктор блоков на 1С‑Битрикс

TL;DR

Для b2b‑платформы аналитики Comagic разработали конструктор блоков на 1С‑Битрикс. Вёрстка одной статьи сократилась с 3‑5 дней до 15 минут, ежемесячные расходы на верстку силами агентства снизились с 40‑50 тыс. руб. до нуля.

Pitch

CoMagic — платформа коллтрекинга и сквозной аналитики. Раньше каждую статью для блога верстало наше агентство вручную: дизайн‑макет, фронтенд, выкладка. Один материал занимал 3‑5 дней и стоил до 10 тыс. руб., а в блоге выходило по 4‑5 статей в месяц. За 3 месяца мы спроектировали 50 блоков, реализовали конструктор и подключили его к админке Битрикса. Теперь контент‑менеджеры CoMagic собирают статью за 15 минут без участия разработчиков.

Контекст клиента

CoMagic — платформа аналитики маркетинга и продаж, которая помогает сделать рекламу прозрачной. Предлагает услуги коллтрекинга, сквозной аналитики и контроля обращений.

Компания 9 лет на рынке. Среди клиентов: «Альфа‑Лизинг», Ingrad, «ПИК», банк «Открытие», «Авторусь», Makita PRO и другие.

Задача

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

Раньше этим занималась наша команда: клиент присылал дизайн‑макет статьи, а разработчики вручную делали верстку. Процесс занимал 3‑5 дней. В денежном эквиваленте верстка могла стоить до 10 тысяч рублей. И это только для одного материала.

В общем, долго, дорого и неудобно.

Нужен был конструктор блоков, который позволит верстать материалы быстро, бесплатно и без специальных знаний HTML и CSS. По другим оценкам разработка модуля должна была занять полгода. Мы договорились уложиться в 3 месяца.

Семен Барменков, менеджер сайта CoMagic:

Мы провели аналитику вместе со специалистами Intensa и пришли к выводу, что для блога хватит около 5 блоков с контентом и несколько технических: форма заявки, хлебные крошки, формы, кнопки CTA, отступы. Для продуктовых страниц разработали 30 различных блоков, включая шапку и подвал. Вся работа — от анализа до релиза — заняла порядка 3 месяцев. Благодаря конструктору блоков мы можем самостоятельно создавать страницы. Подчеркну — не только для блога, но и для продукта.

Что сделали

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

Этап 1. Создание дизайна блоков

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

До этого было так: дизайнер разрабатывал макет одной статьи и отдавал нам. Мы её верстали — делали фронтенд материала и загружали его на сайт. Когда нужно было сверстать новую статью, цикл с дизайном и вёрсткой повторялся.

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

Нужно было сделать 50 блоков — объем довольно большой. Если делать сразу все, то на один дизайн могло уйти порядка месяца. Поэтому мы работали спринтами — 10 блоков в неделю. Пока разработчики верстали одну часть, дизайнер готовил вторую. Это помогло запараллелить и ускорить работу.

Блоки, которые разработали для редактора

Этап 2. Разработка блоков

Этот этап проходил в две фазы.

Фронтенд — то есть сама вёрстка блоков, как они будут отображаться на сайте.

Бэкенд — подключение блоков к системе управления. Мы задаём, какие поля будут редактироваться из административной панели «Битрикса»: цвет кнопки, цвет полей, форма и т. д.

Примеры блоков в редакторе модуля:

Примеры готовых блоков в материалах на сайте:

Особенности проекта

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

Например, мы делаем блок «баннер с кнопкой» по изначальному ТЗ. В процессе понимаем, что не на всех страницах в рамках фирменного стиля кнопка обязательно должна быть именно того цвета, который указан в ТЗ. Поэтому решаем прикрутить управление цветом кнопки.

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

Результат

В среднем в блоге выходит 4‑5 материалов в месяц. Раньше это занимало около месяца работы разработчиков и стоило около 40‑50 тысяч рублей. Теперь клиент может выкладывать любое количество материалов без привлечения подрядчиков.

Конструктор помог сократить время вёрстки одной статьи с нескольких дней до 15‑20 минут в среднем. Если все тексты, ссылки, изображения уже готовы и оптимизированы, лежат в одном месте и их не нужно искать, то материал реально собрать за 5‑10 минут. Если хочется попробовать разные блоки, покрутить цвет кнопок в редакторе и т. д., то верстать материал можно и час, и больше. В этом тоже плюс — конструктор блоков даёт больше вариативности и свободы действий.

Раньше, когда клиент отдавал на вёрстку дизайн‑макет, переделывать в процессе было дорого: разработчики уже верстают, слишком многое придётся поправить, чтобы скорректировать дизайн статьи. Следовательно, процесс будет дольше и, соответственно, дороже. Сейчас клиент может пробовать разные блоки, самостоятельно подбирать расположение и цвета элементов и ни от кого не зависеть.

Метрика	Значение
Время вёрстки одной статьи	15‑20 минут (было 3‑5 дней)
Стоимость вёрстки одного материала силами агентства	0 ₽ (было до 10 000 ₽)
Ежемесячные расходы клиента на вёрстку	0 ₽ (было 40‑50 000 ₽)
Библиотека блоков	50 блоков (5 контентных и технические для блога + 30 для продуктовых страниц + общие)
Срок разработки модуля	3 месяца (по другим оценкам — 6)

Пример статьи, сверстанной через конструктор блоков: «Зачем нужны лайки». Верстка этого материала заняла около 45 минут с учётом отрисовки иконок, подбора картинок и сбора контента в редакторе.

Семен Барменков, менеджер сайта CoMagic:

Из плюсов: 1. Скорость. Буквально за час менеджер может создать страницу с готовым дизайном. 2. Общий стиль. Все элементы управления выглядят одинаково на всем сайте (кнопки, ссылки и прочее). 3. Цена. Разумеется, мы внедряли конструктор из‑за экономии на проекте. Единожды разработав блоки, больше не нужно обращаться к разработчикам, чтобы они верстали статьи и страницы продукта. Это экономит бюджет и позволяет переключить разработчиков на другие задачи. Например, по оптимизации SEO. Из минусов: 1. Нашим контент‑менеджерам приходится подбирать количество текста, чтобы блок выглядел аккуратно. 2. Работа с редактором подразумевает, что менеджер сайта знает, как блок работает. Это не совсем визуальная история, как в Tilda. 3. Невозможно создать абсолютно уникальную страницу, по дизайну есть ограничения, как и в любом подобном конструкторе.

Где проект сейчас

На создание модуля ушло около 3 месяцев. После релиза занимались развитием конструктора: добавляли новые блоки и расширяли управление параметрами по запросам клиента.

Команда

• Команда Intensa: 4 человека (менеджер, дизайн‑куратор, два разработчика)
• Дизайнер со стороны CoMagic

Технологии

• CMS: 1С‑Битрикс (модуль интегрирован в админпанель)
• Стек: PHP, HTML, CSS
• Принцип хранения: блочная структура, параметры блоков редактируются через админку Битрикса

Связанные кейсы

• Mindbox: на 3 дня ускорили выпуск материалов журнала, разработав редактор контента на Laravel — аналогичная задача для b2b‑журнала, но на Laravel + Editor.js с хранением контента в JSON

Ссылки

• Публикация: https://intensa.ru/⁠blog/⁠sokratili‑vremya‑verstki‑statej‑dlya‑bloga/
• Сайт клиента: https://www.uiscom.ru/
• Пример статьи через конструктор: https://www.uiscom.ru/⁠blog/⁠zachem‑nuzhny‑layki/