Главная/Разработка/Верстка
Верстка сайта под Битрикс: как встроить макет в шаблон и компоненты
Верстка сайта под Битрикс это перенос готового макета в шаблон сайта: HTML режут на header.php и footer.php, стили и скрипты подключают из папки шаблона, а блоки с данными заменяют шаблонами компонентов. Верстальщик отдаёт не набор страниц, а повторяемые блоки, в которые платформа подставит содержимое из базы. Ниже: чем это отличается от обычной верстки, пример блока, шесть шагов интеграции, адаптивность и чек-лист приёмки.
Ответ за 30 секунд
Верстка под Битрикс отличается от обычной тем, что страницы собирает платформа, а верстальщик готовит шапку, подвал и шаблоны блоков. Данные из базы оформляются шаблонами компонентов, а не статичным HTML, и лежат в папке local, чтобы обновления их не затёрли.
Шаблон проверяют на живом Битриксе: тарифы Таймвеб для Битрикс от 596 ₽ в месяц, 10 дней на тест и бесплатный SSL (на 21 октября 2026).
Чек-лист приёмки верстки под Битрикс перед передачей в разработку6шагов переноса макета в шаблон
2 файлаheader.php и footer.php режут макет
3ширины для проверки: 360, 768, 1280
01 · 1 мин
Чем верстка под Битрикс отличается от обычной верстки сайта#
Обычная верстка заканчивается набором HTML-страниц, где каждый заголовок и каждая карточка написаны руками. В Битриксе страницу собирает платформа: шапка и подвал лежат в шаблоне сайта, а содержимое подставляют компоненты из базы данных. Поэтому верстальщик отдаёт не готовые страницы, а набор повторяемых блоков.
Отсюда три правила. Заголовок и мета-теги выводятся функциями платформы, а не прописываются в разметке. Всё, что приходит из базы, то есть меню, новости, товары и формы, оформляется шаблоном компонента. Стили и скрипты подключаются из папки шаблона, чтобы платформа могла объединять и кэшировать файлы. Состав папки шаблона описан на странице шаблоны сайтов Битрикс.
02 · 1 мин
Как статичный блок макета превращается в шаблон компонента Битрикса#
Допустим, в макете есть лента из трёх карточек новостей. В статичной верстке это три одинаковых фрагмента. В Битриксе разметку берут один раз и вставляют в цикл шаблона компонента news.list, а данные приходят в массиве $arResult.
<?php if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) die(); ?>
<div class="cards">
<?php foreach ($arResult['ITEMS'] as $item): ?>
<a class="card" href="<?= $item['DETAIL_PAGE_URL'] ?>">
<b><?= $item['NAME'] ?></b>
</a>
<?php endforeach; ?>
</div>Классы и вложенность тегов остаются прежними, поэтому стили из макета работают без правок. Файл лежит в копии шаблона компонента: local/templates/имя_шаблона/components/bitrix/news.list/имя/template.php. Как устроены простые и комплексные компоненты, написано на странице компоненты Битрикс.
03 · 1 мин
Какими шестью шагами макет переносят в шаблон сайта на Битрикс#
- Определите границы. Составьте список блоков, которые будут данными (меню, лента, каталог, форма), и блоков, которые останутся статикой.
- Создайте шаблон. Заведите папку в local/templates с файлами header.php и footer.php и подключите её к сайту в админке.
- Разрежьте макет. Всё до рабочей области уходит в header.php, всё после в footer.php.
- Подключите ресурсы. Стили положите в template_styles.css, скрипты подключите методами платформы, они описаны на странице API 1С-Битрикс для разработчика.
- Перенесите блоки данных в шаблоны компонентов, как в примере выше.
- Проверьте на тестовой площадке под администратором и без него. Для этого нужен хостинг для Битрикс или локальная копия.
Если макет и шаблон делают разные люди, заранее решите, кто переносит блоки в шаблоны компонентов. Иначе эта работа повисает между ними и обнаруживается перед запуском.
04 · 1 мин
Как сохранить адаптивность верстки под Битрикс и не столкнуться с панелью администратора#
Адаптивность сохраняется, если не нарушить три вещи. Первая: в header.php остаётся тег meta viewport. Вторая: размеры картинок из базы задаёт компонент, а не фиксированные ширины в разметке, иначе загруженный файл растянет колонку. Третья: стили, которые платформа подключает вместе с компонентами, проверяют на пересечение с классами макета.
Панель администратора перекрывает шапку
Когда администратор вошёл на сайт, сверху появляется панель управления Битрикса. Фиксированная шапка может уехать под неё и скрыть пункты меню, поэтому страницу смотрят в двух режимах.
Скорость готовой страницы зависит и от кэша: о нём рассказывает страница композитный сайт Битрикс. Сколько стоит работа над версткой и шаблоном, видно в смете на странице стоимость разработки сайта на Битрикс.
Инструмент · 1 мин
Чек-лист приёмки верстки под Битрикс перед передачей в разработку#
Пройдите пункты вместе с верстальщиком до того, как программист начнёт подключать компоненты.
Приёмка верстки перед переносом в шаблон Битрикса
Отмечайте пункты, подсказка покажет следующий
06 · 1 мин
Вопросы о верстке под Битрикс#
Нужно ли верстальщику знать PHP, чтобы сверстать сайт под Битрикс?
Для макета нет, но нужно понимать, как header.php и footer.php обрамляют страницу и как шаблон компонента выводит массив данных. Для этого хватает базовых циклов и вывода переменных на PHP.
Можно ли поставить на Битрикс любой готовый HTML-макет?
Можно, объём работы зависит от числа динамических блоков. Статичный лендинг переносят быстро, а макет магазина с фильтром, корзиной и личным кабинетом требует работы программиста.
Что передать верстальщику, чтобы верстка встала в шаблон Битрикса без переделок?
Макет с выделенными блоками-карточками, состояниями (наведение, пустой список, длинный заголовок), списком динамических блоков и контрольными ширинами. Тогда границы шаблона компонента видны сразу.
Где хранить стили и скрипты верстки в проекте на Битрикс?
В папке шаблона сайта внутри local/templates. Файлы в папке bitrix обновляются вместе с платформой и затирают правки, поэтому в них ничего не меняют.
Почему этому можно верить
Как мы проверяли
Источники цифр на этой странице: Хостинг для 1С-Битрикс Таймвеб, timeweb.com/ru/services/cms/bitrix, проверено 21 октября 2026; Цены на хостинг Таймвеб, timeweb.com/ru/services/hosting/price, проверено 21 октября 2026.
Разместите сайт на 1С-Битрикс
Битрикс требователен к ресурсам. Хостинг Таймвеб для 1С-Битрикс от 596 ₽ в месяц: NVMe, окружение под большие нагрузки, бесплатный SSL и домен .RU в подарок.
- Тарифы от 596 ₽ в месяц
- Оптимизирован под 1С-Битрикс
- Бесплатный SSL и ежедневные бэкапы
- Домен .RU в подарок при оплате за год