Верстка и посадка макетов на Bitrix

Верстаю страницы и переношу их в 1С-Битрикс так, чтобы контент редактировался через админку, формы отправлялись, меню и хлебные крошки работали штатно, а шаблон не разваливался на мобильных устройствах.

Посадка макета на Bitrix — это не просто нарезать HTML и положить его в шаблон. Нужно заранее понять, какие блоки должны управляться из инфоблоков, где нужны компоненты, какие поля попадут в SEO, как будут работать формы, изображения, меню и повторяющиеся элементы.

Что входит в посадку верстки на Bitrix

• Адаптивная HTML/CSS/JS-верстка: страницы, блоки, формы, списки, карточки, попапы и состояния интерфейса.
• Интеграция с шаблоном сайта: header, footer, меню, хлебные крошки, сетка, общие стили и повторяющиеся элементы.
• Инфоблоки и компоненты: новости, услуги, портфолио, каталог, FAQ, слайдеры, карточки и управляемые списки.
• Формы: поля, валидация, почтовые события, антиспам, сохранение заявки и при необходимости отправка в CRM.
• SEO-сигналы: H1, title, description, canonical, Open Graph, alt у изображений, микроразметка и корректное попадание страниц в sitemap.
• Проверка после посадки: десктоп, мобильные, формы, скорость первого экрана, кеш и отсутствие конфликтов со старым шаблоном.

Какие макеты можно перенести

Работаю с Figma, готовыми HTML-макетами, существующим дизайном сайта или референсами, если нужно собрать новый раздел в текущем стиле. Формат зависит от задачи: одна посадочная страница, набор типовых страниц, редизайн раздела, новый шаблон услуги, список и детальная страница, промо-блок или отдельный компонент.

Если макет ещё не готов, можно сначала согласовать структуру: какие блоки нужны, что должно редактироваться из админки, какие данные будут повторяться и какие страницы важны для поиска. Это снижает риск, что после красивой верстки всё придётся переделывать под реальные данные Битрикса.

Как я решаю, что делать компонентом, а что оставить в шаблоне

Главный вопрос при посадке: кто и как будет менять контент после запуска. Если блок повторяется, должен сортироваться, иметь детальные страницы или попадать в sitemap, его лучше вынести в инфоблок и компонент. Если это декоративный элемент шаблона, его можно оставить в верстке или include-области.

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

Что важно проверить после посадки

1. Страница корректно открывается на десктопе и мобильных разрешениях.
2. Контент управляется из админки: тексты, изображения, списки, цены, ссылки и SEO-поля.
3. Формы отправляют заявки, показывают ошибки и не теряют данные.
4. Меню, хлебные крошки, canonical, title, description и Open Graph относятся к текущей странице.
5. Изображения имеют подходящие размеры, alt и не создают лишний вес первого экрана.
6. Компоненты кешируются корректно и не ломают соседние страницы.

Связь с разработкой и SEO

Если макет требует нестандартной логики, личного кабинета, сложного каталога, обмена с CRM или 1С, посадка переходит в разработку на 1С-Битрикс. Если после переноса страницы важна индексация, отдельно смотрю техническое SEO для Bitrix: canonical, sitemap, мета-теги, дубли, микроразметку и внутренние ссылки.

Если посадка делается в старый проект с неизвестными доработками, полезно начать с аудита сайта. А если после запуска нужно регулярно добавлять блоки, править формы и контролировать обновления, лучше перевести проект на поддержку сайта на Битрикс.

Что прислать для оценки

• ссылку на макет в Figma или архив HTML/CSS/JS;
• ссылку на текущий сайт и список страниц, которые затрагиваются;
• описание, какие блоки должны управляться из админки;
• требования к формам, заявкам, CRM, аналитике и событиям;
• важные SEO-страницы, которые нельзя потерять при посадке;
• доступы к тестовой копии, Git, админке и файлам, если проект уже живой.

Что важно для SEO после посадки

Новая верстка может выглядеть хорошо, но при этом ухудшить индексацию: потерять один H1, вывести одинаковые title и description, сломать хлебные крошки, забыть alt у изображений или скрыть важный текст так, что поисковик видит только декоративные блоки. Поэтому при посадке на Bitrix я проверяю не только пиксели, но и HTML-сигналы страницы.

Если создаются новые детальные страницы, списки услуг или кейсы, нужно убедиться, что они попадают в sitemap, имеют canonical на себя, нормальные мета-теги и внутренние ссылки. Для старого сайта это часто пересекается с техническим SEO для Bitrix.

Как сдаю посадку макета

Готовая посадка должна проверяться не только по скриншоту. Я прохожу рабочие сценарии: открыть страницу на мобильном, отправить форму, поменять текст или изображение из админки, проверить меню, хлебные крошки, попапы, слайдеры, ошибки в консоли и вес изображений. Если блок должен быть управляемым, редактор не должен лезть в HTML ради обычной правки.

• сверяю основные разрешения и состояния элементов;
• проверяю редактирование контента из инфоблоков или включаемых областей;
• контролирую формы, письма, антиспам и сообщения об ошибках;
• смотрю, не конфликтуют ли новые стили со старыми страницами;
• фиксирую, какие шаблоны, компоненты и файлы были изменены.

От верстки к управляемому сайту

Кейс MA studio показывает отдельный этап адаптивной HTML-верстки: страницы, презентационные блоки и форма были подготовлены для дальнейшей интеграции. В Congress Time показан следующий этап — шаблоны подключены к 1С-Битрикс, формы и контентные области стали частью CMS. Если существующий сайт уже накопил ограничения и непонятно, достаточно ли новой верстки, поможет разбор «доработать или переделать».

Частые вопросы

Можно посадить только одну страницу?

Да. Если страница самостоятельная, можно аккуратно встроить её в текущий шаблон, настроить редактируемые блоки, форму, мета-теги и проверить адаптив.

Вы работаете только с готовыми макетами?

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

Что делать, если после посадки нужна новая логика?

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