RDN Group - команда специалистов в области разработки 1С-Битрикс:Управление сайтом, а также Золотой партнер Битрикс24. Мы хотели бы поделиться собственным опытом оптимизации конструктора нашего сайта, который позволил нам ускорить процесс сборки новых страниц продуктов или услуг.
Камень преткновения
Наша команда столкнулась с необходимостью быстрой разработки различных страниц для нашего имиджевого сайта, который имеет индивидуальный дизайн и разработан на базе CMS 1С-Битрикс: Управление сайтом.
Почему мы выбрали собственную разработку, а не использовали стандартные конструкторы Битрикс?
- Уникальность дизайна: мы разработали собственный дизайн сайта, не используя готовые шаблоны. Это позволило создать сайт, отражающий наш бренд и его ценности.
- Гибкость и кастомизация: собственные решения предоставляют больше возможностей для адаптации под специфические нужды бизнеса.
- Скорость и производительность: наш конструктор оптимизирован для быстрой сборки страниц, что было очень важно для нас.
Для создания новой страницы, будь то услуга, продукт или решение, требовалось задействовать значительные ресурсы разработчиков, дизайнеров и верстальщиков. Мы подсчитали, что разработка дизайна новой страницы занимает минимум 4–6 часов работы дизайнера и минимум 4 часа работы верстальщика. На разработку бэкенда также уходит около 4 часов.
Мы стремились сохранить наш уникальный дизайн, но при этом сократить время, затрачиваемое сотрудниками на сборку страниц. Кроме того, часто требуется оптимизировать эти страницы под требования CEO, что означает необходимость учитывать множество критериев, а это повторная доработка страницы и задействование всей команды.
Мы хотели, чтобы контент-менеджер мог самостоятельно, без помощи разработчиков собирать красивые страницы. Поэтому изначально решили создать набор сниппетов, с помощью которых без привлечения разработчиков смогли бы собирать новые страницы, так как в теории это позволяет создавать более гибкие и удобные интерфейсы для управления элементами страниц.
Совершенно не ожидая этого, команда контент-менеджеров обнаружила, что работать с визуальным редактором стало гораздо сложнее, чем планировалось.
Проблемы, которые возникали при работе со сниппетами:
- Сложность работы с HTML-кодом для контент-менеджеров
- Высокая вероятность повреждения структуры при некорректных действиях
- Необходимость постоянного привлечения разработчиков
- Низкая эффективность процесса верстки
Поэтому мы решили опять изменить подход и вернутся к сборке страниц через разделы. Но для того чтобы изменить визуальное оформление страниц, добавили несколько пунктов в дополнительные поля.
Конструктор, который мы получили
Сейчас мы имеем многоуровневую структуру разделов. Теперь сборка страниц проходит значительно быстрее, контент-менеджеры могут самостоятельно собирать страницы и задействовать дизайнера для создания отдельных изображений по необходимости.
Каждая страница в административной части сайта хранится в соответствующей папке. А страница, в свою очередь, состоит из блоков, которые наполнены элементами.
Раздел имеет стандартные характеристики: название, символьный код и описание.
Когда создавалась новая страница, необходимо указать, что раздел является страницей, именно она остается образует нужный уровень и внутри этой папки уже можно добавлять необходимые блоки.
Мы определили для себя ряд базовых блоков, которые мы можем выводить на страницы, имеющие свой стиль по верстке. Однако содержание блока мы можем менять.
- Текстовый блок (блок с текстом и картинкой)
- Этапы (блок, когда нужно показать перечисления)
- Преимущества (перечисление, с описанием каждого пункта)
- Шапка (первичный блок, в котором содержится картинка и основная информация) изображение
- Возможности (перечисление, с описанием каждого пункта)
- Цены слайдер (используется, когда нужно написать стоимость продукта, есть слайдер при наличии нескольких категорий товара)
- Блок о нас (сформированный блок о компании)
- Награды (сформированный блок о наградах компании)
- Кейсы (сформированный блок, включающий кейсы Битрикс24)
- Кейсы СЕО (блок, в котором можно самостоятельно сформировать отображаемые кейсы)
- Дополнительные услуги (блок с текстом)
- Текст со списком (блок, который содержит основную информацию и перечисления)
- Блок нам доверяют (сформированный блок с перечислением клиентов компании)
- Команда (сформированный блок с командой компании).
Приведем несколько примеров оформления блоков.
Шапка: 
Цены слайдер: 
Возможности:
Если раздел не отмечен как страница, он по умолчанию становится блоком страницы. Это решение позволило нам избежать множества проблем в работе с HTML-кодом и обеспечило интуитивно понятный интерфейс административной части сайта.
Особое внимание уделено кастомизированным дополнительным полям для каждого блока:
- Настройка кнопок (заполненный/пустой стиль)
- Управление цветовыми схемами
- Работа с изображениями
- Управление ценами и описаниями
Для того чтобы наполнить блок необходимой информацией нужно создать внутри его элементы, порядок которых зависит от сортировки. Для каждого подпункта создаем элемент с соответствующим заголовком.
Каждый элемент имеет следующие поля: название, символьный код (заполняется автоматически), описание (анонс).
Вместо выводов
В настоящее время конструктор поддерживает несколько шаблонов для различных типов страниц, что обеспечивает гибкость при разработке новых веб-решений. Система позволяет легко переключаться между белым и черным фоном блоков, за исключением статических элементов и шапки.
Данный опыт наглядно демонстрирует важность практической проверки гипотез и готовности к корректировке первоначальных планов на основе реальных пользовательских сценариев.
В конечном итоге, визуальная сборка контента через разделы с дополнительными полями стала оптимальным вариантом, который обеспечил нужную гибкость и при этом сохранил простоту использования. Каждое изменение и каждое решение, принятые в процессе разработки, наглядно продемонстрировали, что иногда лучший путь - это не тот, который кажется самым современным и технологичным, а тот, который на самом деле работает и приносит результаты. Отметим, что такое решение подойдет не всем, так как такой способ имеет ограничения при масштабировании.
Составим таблицу для наглядности:
|
До изменений
|
После изменений
|
|
Дизайнер
|
4 ч.
|
1 ч.
|
|
Контент-менеджер
|
2 ч.
|
2 ч.
|
|
Разработчик
|
4 ч.
|
0 ч.
|
|
Верстальщик
|
4 ч.
|
0 ч.
|
|
Итого:
|
14 ч.
|
3 ч.
|
Для того чтобы обсудить ваш проект, заполните форму обратной связи наши специалисты свяжутся с вами.
