Главная » Разработка Битрикс » Вёрстка и шаблоны » Натяжка вёрстки на Битрикс: пошаговое руководство

Натяжка вёрстки на Битрикс: пошаговое руководство

Обновлено: 2026 • Раздел: Вёрстка и шаблоны • Просмотров: 8

Схема натяжки вёрстки на Битрикс: HTML-макет делится на header.php, контент страницы и footer.php

ОглавлениеЧто должно быть на входе Куда класть файлы Шаг 1. Разрезать страницу Шаг 2. Собрать header.php Шаг 3. Собрать footer.php Шаг 4. Подключить стили Шаг 5. Заменить статику на компоненты Шаг 6. Разложить страницы Шаг 7. Проверить результат Частые ошибки Итог

Натяжка вёрстки — это превращение статичных HTML-страниц в работающий сайт на 1С-Битрикс. Дизайнер отдал макет, верстальщик собрал HTML, и дальше нужно разложить это по шаблону, подключить компоненты и сделать так, чтобы контент редактировался из админки.

Разберём весь путь по шагам: как устроен шаблон, что делать с header.php и footer.php, куда девать блоки страниц, как подменить статичные списки реальными данными и какие ошибки на этом пути стоят больше всего времени.

Что должно быть на входе

Перед началом работы убедитесь, что у вас есть:

готовая вёрстка: HTML, CSS, JS, шрифты и картинки;
развёрнутый сайт на 1С-Битрикс с доступом к файловой системе;
понимание структуры разделов будущего сайта;
ответ на вопрос, что именно должно редактироваться из админки.

Последний пункт важнее, чем кажется. Именно он определяет, какие блоки станут инфоблоками, какие — включаемыми областями, а какие можно оставить жёстко в шаблоне. Решать это после натяжки дороже, чем до.

Куда класть файлы

Первое правило работы с 1С-Битрикс: не трогайте папку /bitrix/. Всё своё складывается в /local/. При обновлении ядра содержимое /bitrix/ перезаписывается, и правки исчезнут.

/local/
    /templates/
        /main/                 <- ваш шаблон
            header.php
            footer.php
            template_styles.css
            /assets/
                /css/
                /js/
                /img/
                /fonts/
            /components/       <- кастомизированные компоненты
    /php_interface/
        init.php

Название main — условное, шаблонов может быть несколько. Как сделать отдельный шаблон для конкретного раздела, разберём отдельно.

Помощь по 1С-Битрикс

Возникли проблемы с 1С-Битрикс? Поможем разобраться.

Исправим ошибки, доработаем функционал, ускорим работу сайта или просто подскажем правильное решение. Оставьте номер телефона — свяжемся с вами в ближайшее время.

Шаг 1. Разрезать страницу

Главная идея шаблона в Битрикс: страница делится на три части. Всё, что выше контента, уходит в header.php, всё, что ниже, — в footer.php, а между ними подставляется содержимое конкретной страницы.

Возьмём типовую вёрстку:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Главная страница</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="header">...</header>
    <main class="content">

        <h1>Заголовок страницы</h1>
        <p>Текст страницы</p>

    </main>
    <footer class="footer">...</footer>
    <script src="js/main.js"></script>
</body>
</html>

Линия разреза проходит там, где начинается и заканчивается уникальный контент страницы.

Шаг 2. Собрать header.php

Верхняя часть превращается в header.php. Статичные элементы заменяются вызовами API — именно это отличает шаблон от простого HTML:

<?php
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) {
    die();
}
?><!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="<?= LANG_CHARSET ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?$APPLICATION->ShowTitle()?></title>
    <?$APPLICATION->ShowHead()?>
</head>
<body>
<?$APPLICATION->ShowPanel()?>

<header class="header">
    <a href="/" class="header__logo">
        <img src="<?= SITE_TEMPLATE_PATH ?>/assets/img/logo.svg" alt="Логотип">
    </a>
</header>

<main class="content">

Разберём, что здесь появилось:

Конструкция	Зачем нужна
`B_PROLOG_INCLUDED`	Защита от прямого обращения к файлу шаблона по URL
`ShowTitle()`	Выводит заголовок страницы, заданный в админке
`ShowHead()`	Подключает стили, скрипты ядра и метатеги
`ShowPanel()`	Выводит административную панель для авторизованных
`SITE_TEMPLATE_PATH`	Путь к папке шаблона — не пишите его вручную
`LANG_CHARSET`	Кодировка сайта из настроек

Замена относительных путей на SITE_TEMPLATE_PATH — обязательный шаг. Без него картинки и стили перестанут находиться на внутренних страницах: вёрстка лежала в корне, а страница открывается по адресу вида /catalog/tovar/.

Нижняя часть собирается по тому же принципу:

</main>

<footer class="footer">
    <div class="footer__copy">
        &copy; <?= date('Y') ?> Компания
    </div>
</footer>

<script src="<?= SITE_TEMPLATE_PATH ?>/assets/js/main.js"></script>
</body>
</html>

Обратите внимание: footer.php начинается с закрывающих тегов тех блоков, которые открылись в header.php. Это частый источник поехавшей вёрстки — теги открыли в одном файле, а закрыть забыли в другом.

Шаг 4. Подключить стили

Способ подключения стилей влияет на то, будет ли работать объединение и сжатие файлов. Правильный вариант — через API, а не тегом <link> вручную:

<?php
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . '/assets/css/style.css');
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . '/assets/js/main.js');
?>

Есть и особый файл — template_styles.css в корне шаблона. Он подключается автоматически, ничего прописывать не нужно. Удобно для основных стилей шаблона.

Тонкости подключения и сборки ассетов разберём отдельно — там есть нюансы с порядком загрузки и с автоматическим переносом скриптов в подвал страницы.

Шаг 5. Заменить статику на компоненты

Пока в шаблоне жёстко прописано меню и хлебные крошки, сайт остаётся вёрсткой. Настоящая натяжка начинается здесь.

Меню в header.php:

<?$APPLICATION->IncludeComponent(
    'bitrix:menu',
    'top',
    [
        'ROOT_MENU_TYPE'   => 'top',
        'MENU_CACHE_TYPE'  => 'A',
        'MAX_LEVEL'        => 2,
        'USE_EXT'          => 'N',
    ]
)?>

Хлебные крошки:

<?$APPLICATION->IncludeComponent(
    'bitrix:breadcrumb',
    'main',
    ['START_FROM' => '0', 'PATH' => '', 'SITE_ID' => SITE_ID]
)?>

Второй параметр — имя шаблона компонента. Его нужно скопировать из /bitrix/components/bitrix/menu/templates/ в свой шаблон и заменить содержимое на вашу вёрстку. Кастомизация шаблонов компонентов — отдельная большая тема, а общее устройство компонентов разобрано в статье Создание компонента в Битрикс.

Шаг 6. Разложить страницы

Содержимое между header.php и footer.php становится файлом страницы. Каждая страница выглядит так:

<?php
require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/header.php');
$APPLICATION->SetTitle('О компании');
?>

<h1>О компании</h1>
<p>Текст страницы, который редактируется в админке.</p>

<?php require($_SERVER['DOCUMENT_ROOT'] . '/bitrix/footer.php'); ?>

Обратите внимание на порядок: SetTitle() вызывается после подключения пролога. Если поставить его выше, заголовок не применится.

Шаг 7. Проверить результат

Откройте главную и внутреннюю страницу — вёрстка не должна разъезжаться.
Проверьте, что картинки и стили грузятся на вложенных URL.
Войдите в админку — панель должна отображаться и не ломать макет.
Убедитесь, что заголовок страницы меняется, а не одинаков везде.
Проверьте меню: активный пункт должен подсвечиваться.
Посмотрите исходный код — нет ли дублей подключения стилей.
Проверьте сайт на мобильном.

Частые ошибки

Правки в /bitrix/. Исчезнут при первом же обновлении ядра. Всё своё — только в /local/.
Относительные пути к картинкам и стилям. Работает на главной, ломается на внутренних страницах.
Забытый ShowHead(). Половина функциональности ядра перестаёт работать, а ошибки при этом неочевидные.
Отсутствие ShowPanel(). Админ-панель не появится, и редактировать контент из публичной части будет нельзя.
Незакрытые теги между header и footer. Вёрстка едет, а причина находится в другом файле.
Всё содержимое зашито в шаблон. Заказчик не может изменить ни телефон, ни адрес — и каждая правка идёт через разработчика.

Итог

Натяжка вёрстки сводится к шести шагам: разрезать страницу на header.php и footer.php, заменить статичные пути на SITE_TEMPLATE_PATH, подключить стили через API, заменить жёстко прописанные блоки компонентами, разложить страницы и проверить результат.

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