Шаблон сайта на 1С-Битрикс: как изменить дизайн без поломок при обновлении

Коротко

Шаблоны 1С-Битрикс отвечают за внешний вид сайта: общий каркас страниц (шапка, подвал, стили) задаёт шаблон сайта, а вид отдельных блоков — списка новостей, каталога, формы — задают шаблоны компонентов. Чтобы изменить дизайн без поломок при обновлении, правки вносят только в свои копии шаблонов в папке /local/, а не в системные файлы в /bitrix/.

Большинство историй «обновили Битрикс — слетел дизайн» объясняются одним: кто-то поправил стандартный шаблон компонента или шаблон готового решения прямо на месте. Обновление вернуло исходный файл, и правки исчезли.

Что меняем	Где правильно править	Где править нельзя
Шапка, подвал, общие стили	Свой шаблон сайта в /local/templates/	Шаблон готового решения в /bitrix/templates/, если решение обновляется
Вид списка, карточки, формы	Копия шаблона компонента внутри своего шаблона сайта	/bitrix/components/bitrix/
Логика компонента	Свой компонент в /local/components/	Системные компоненты
Заготовки для новых страниц	Шаблоны страниц в папке page_templates шаблона сайта	Не применимо

Основная мысль

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

Платформа устроена так, что системные файлы в папке /bitrix/ принадлежат вендору. Обновления ядра и модулей свободно их перезаписывают. Это нормально и правильно: так приходят исправления уязвимостей и новые возможности.

Папка /local/ принадлежит вам. Система ищет шаблоны сначала там, и только если не находит — в /bitrix/. Если вся кастомизация лежит в /local/, обновления проходят спокойно, а дизайн остаётся на месте. Подробнее о том, как обновлять платформу без потерь, — в статье обновление 1С-Битрикс без потери доработок.

Как устроены шаблоны 1С-Битрикс

Шаблон сайта

Это каркас всех страниц. В нём описаны шапка и подвал, подключены стили и скрипты, размещены общие области: меню, контакты, формы в модальных окнах. Содержимое конкретной страницы выводится между шапкой и подвалом.

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

Когда говорят «поменять шаблон сайта», чаще всего имеют в виду именно эту папку с шапкой и подвалом. Но на практике большая часть дизайна живёт в шаблонах компонентов: карточка товара, список услуг, форма заявки. Поэтому редизайн почти всегда затрагивает оба уровня.

Шаблон компонента

Компонент — это программный блок: список новостей, каталог, корзина, форма. Логика компонента живёт отдельно, а его внешний вид задаётся шаблоном. У одного компонента может быть несколько шаблонов: например, список новостей в виде плитки на главной и в виде ленты в разделе. Что такое компоненты и инфоблоки, разобрано в статье инфоблоки и компоненты 1С-Битрикс.

Шаблоны страниц

Битрикс шаблоны страниц — это заготовки, которые предлагаются при создании новой страницы через публичную часть: например, «страница с правой колонкой» или «страница услуги». Они хранятся в папке page_templates внутри шаблона сайта и помогают контент-менеджеру создавать однотипные страницы без участия разработчика.

Файлы шаблона Битрикс: где лежат и за что отвечают

Шаблон сайта — это папка. Системные шаблоны и шаблоны готовых решений обычно лежат в /bitrix/templates/, собственные — в /local/templates/. Основные файлы шаблона Битрикс:

/local/templates/my_template/
  header.php            — шапка: начало HTML, head, верх страницы
  footer.php            — подвал: низ страницы, закрытие HTML
  styles.css            — стили для контента страниц
  template_styles.css   — стили самого шаблона
  description.php       — название и описание шаблона
  components/           — копии шаблонов компонентов
  page_templates/       — шаблоны страниц
  images/, js/, lang/   — картинки, скрипты, языковые файлы

header.php и footer.php

В header.php находится всё, что выше содержимого страницы: тег head, служебные вызовы, шапка, меню. В footer.php — всё, что ниже. Здесь правят логотип, телефоны, меню, подвал, подключение счётчиков.

В header.php обязательно должны оставаться служебные вызовы, которые выводят заголовок, мета-теги, подключённые стили и панель администратора. Минимальный пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <title><?$APPLICATION->ShowTitle()?></title>
  <?$APPLICATION->ShowHead()?>
</head>
<body>
  <?$APPLICATION->ShowPanel()?>
  <header>...</header>

Если убрать ShowHead, пропадут мета-теги и стили компонентов. Если убрать ShowPanel, администратор не увидит панель управления в публичной части.

Стили и скрипты

Стили шаблона лежат в template_styles.css, стили для оформления контента — в styles.css. Дополнительные файлы подключают через методы ядра, чтобы они участвовали в объединении и сжатии. Прямые теги со ссылками на файлы работают, но выпадают из оптимизации.

Папка components

Здесь хранятся копии шаблонов компонентов, которые используются в этом шаблоне сайта. Структура повторяет путь компонента: пространство имён, имя компонента, имя шаблона. Внутри — template.php, при необходимости style.css, script.js и result_modifier.php для подготовки данных.

Что лежит в шаблоне компонента

• template.php — вёрстка блока, основной файл шаблона.
• style.css и script.js — стили и скрипты блока, подключаются автоматически вместе с шаблоном.
• result_modifier.php — подготовка данных перед выводом.
• component_epilog.php — код, который выполняется после вывода и не кэшируется вместе с шаблоном.
• lang/ — языковые фразы шаблона.
• .parameters.php — дополнительные параметры шаблона в настройках компонента.

Для небольших правок вида обычно достаточно template.php и style.css.

Как система выбирает шаблон компонента

Когда на странице вызывается компонент с определённым шаблоном, система ищет файлы шаблона в нескольких местах по порядку: в папке текущего шаблона сайта, затем в общем шаблоне .default, и только потом в папке самого компонента. Сначала проверяется /local/, потом /bitrix/.

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

Порядок поиска	Где ищется шаблон компонента
1	Папка components текущего шаблона сайта
2	Папка components общего шаблона .default
3	Папка templates самого компонента

Упрощённо: чем ближе копия к текущему шаблону сайта, тем выше её приоритет, а файлы в /local/ перекрывают одноимённые файлы в /bitrix/.

Создать шаблон Битрикс: пошагово

Создание шаблона Битрикс под новый дизайн обычно начинается с готовой вёрстки. Порядок такой.

Шаг 1. Создать папку шаблона

Создайте папку в /local/templates/ с понятным латинским именем. Шаблон можно создать и через административную часть в разделе шаблонов сайтов настроек продукта, но работать с файлами удобнее через систему контроля версий.

Шаг 2. Разрезать вёрстку

Всё, что выше основного содержимого, переносится в header.php, всё, что ниже, — в footer.php. Служебные вызовы ядра добавляются в head и в начало body. Стили раскладываются по template_styles.css и styles.css.

Шаг 3. Заменить статичные блоки на компоненты

Меню выводится компонентом меню, телефоны и адреса — включаемыми областями, которые контент-менеджер может править без разработчика. Жёстко прописанные в коде тексты потом неудобно менять.

Шаг 4. Подключить шаблон к сайту

В настройках сайта в списке сайтов укажите шаблон и условие применения: без условия — для всех страниц, для папки, для конкретного адреса или по PHP-условию. Порядок условий задаётся сортировкой.

Шаг 5. Настроить шаблоны компонентов

Скопируйте шаблоны нужных компонентов в свой шаблон и приведите их вёрстку к дизайну. Об этом — следующий раздел.

Шаг 6. Проверить

Пройдите по основным типам страниц: главная, раздел, карточка, форма, поиск, 404. Проверьте мобильную версию, скорость и отсутствие ошибок в консоли браузера.

Как изменить шаблон Битрикс без поломок при обновлении

Изменить шаблон Битрикс безопасно можно тремя способами в зависимости от того, что нужно поменять.

Скопировать шаблон компонента

В режиме правки публичной части у компонента есть действие копирования шаблона. Выберите, куда копировать — в текущий шаблон сайта, — и задайте новое имя шаблона. Система создаст копию и переключит компонент на неё. Дальше правьте копию: вёрстку в template.php, стили в style.css.

Вручную то же самое делается копированием папки шаблона компонента в папку components своего шаблона сайта с сохранением структуры путей.

Подготовить данные в result_modifier.php

Если для нового дизайна не хватает данных — например, нужно вывести дополнительное свойство или сгруппировать элементы, — не правьте компонент. Добавьте в копию шаблона файл result_modifier.php: он выполняется перед шаблоном и может дополнить массив результатов.

Сделать свой компонент

Когда нужна другая логика, а не другой вид, стандартный компонент копируют в /local/components/ под своим пространством имён и дорабатывают. Это уже работа разработчика, и она требует аккуратности при обновлениях: системный компонент мог получить исправления, которых нет в вашей копии.

Не забыть о скорости

Новый дизайн легко утяжелить: крупные фоновые картинки, слайдеры, шрифты, сторонние скрипты. Проверяйте шаблон по Core Web Vitals: LCP не больше 2,5 с, INP не больше 200 мс, CLS не больше 0,1. Картинки в шапке и первом экране должны быть сжаты и иметь заданные размеры, а скрипты — подключаться через механизмы ядра, чтобы работали объединение и сжатие.

Шаблоны готовых решений

Многие сайты построены на готовых решениях из Маркетплейса. Их шаблон часто лежит в /bitrix/templates/ и обновляется вместе с решением. Прямые правки в нём затираются при обновлении. При этом отказываться от обновлений решения тоже плохо: в них приходят исправления ошибок, совместимость с новыми версиями платформы и PHP. Поэтому задача — не заморозить решение, а вынести свои правки туда, где обновления их не достанут.

Как вносить изменения

• Уточните в документации решения, какие файлы оно разрешает переопределять, — у многих есть свои механизмы кастомизации.
• Шаблоны компонентов копируйте в шаблон сайта или в /local/, если решение это поддерживает.
• Свои стили подключайте отдельным файлом после стилей решения.
• Ведите список изменённых файлов и перед обновлением решения проверяйте их на тестовой копии.

Как выбрать решение, которое проще дорабатывать, разобрано в статье как выбрать готовое решение 1С-Битрикс.

Сценарии: как менять дизайн в разных ситуациях

Нужно поменять телефон, логотип или пункт меню

Это не требует правки шаблона. Телефон и адрес обычно выведены включаемыми областями, логотип — тоже, меню редактируется в публичной части. Если для такой правки приходится открывать header.php, стоит один раз вынести эти блоки во включаемые области.

Нужно переделать карточку товара

Скопируйте шаблон компонента карточки в свой шаблон сайта, поправьте вёрстку и стили. Недостающие данные добавьте через result_modifier.php. После правки сбросьте кэш: без этого изменения могут не появиться — подробнее в статье кэш в 1С-Битрикс.

Нужен полный редизайн

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

Отдельный вид для лендинга

Для рекламных страниц часто нужен шаблон без общей шапки и подвала. Создайте упрощённый шаблон и подключите его условием на папку лендингов. Основной сайт при этом не меняется.

Несколько сайтов на одной установке

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

Как сделать шаблон Битрикс удобным для контента

Как сделать шаблон Битрикс, с которым контент-менеджер справится сам, — отдельная задача. Помогают:

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

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

Процесс: тестовая копия, контроль версий и выкладка

Правки шаблонов безопаснее всего вести по одному и тому же процессу. Он не требует большой инфраструктуры и окупается с первой же ошибки, которую не увидели посетители.

1. Тестовая копия. Делается копия сайта на отдельном поддомене или сервере, закрытая от индексации и посторонних.
2. Контроль версий. Папка /local/ хранится в Git. Каждая правка — отдельный коммит с понятным описанием.
3. Правка и проверка. Изменения вносятся и проверяются на тестовой копии: десктоп, мобильная версия, основные типы страниц.
4. Выкладка. На рабочий сайт переносятся только изменённые файлы из /local/, после чего сбрасывается кэш.
5. Контроль. После выкладки проверяются главная, каталог, карточка, формы и корзина.

Такой порядок особенно важен перед обновлением платформы. Если все правки в /local/ и под контролем версий, обновление сначала прогоняется на тестовой копии, а потом спокойно ставится на рабочий сайт.

Сколько стоит доработка шаблона и сколько занимает

Задача	Объём	Как оценивается
Поправить блок: карточку, список, форму	Часы	Почасово, 2 000 ₽/ч
Перенести правки из системных файлов в /local/	От нескольких часов до нескольких дней	Почасово, зависит от числа изменённых файлов
Новый шаблон под редизайн корпоративного сайта	От 4 недель	Проект, сайт на 1С-Битрикс — от 90 000 ₽
Новый шаблон для интернет-магазина	От 4 недель	Проект, магазин на 1С-Битрикс — от 120 000 ₽

Самая частая скрытая статья расходов — разбор чужих правок в системных файлах. Перед обновлением их нужно найти, перенести в /local/ и проверить, иначе обновление превращается в лотерею.

Типичные ошибки и чек-лист

Ошибки, которые ломают дизайн при обновлении

• Правка системного компонента в /bitrix/components/bitrix/. Обновление возвращает исходный файл.
• Правка шаблона готового решения без копии. Изменения теряются при обновлении решения.
• Удаление служебных вызовов из header.php. Пропадают мета-теги, стили или панель администратора.
• Жёстко прописанные тексты и телефоны. Любая правка требует разработчика.
• Работа на рабочем сайте без тестовой копии. Ошибка в шаблоне сразу видна всем посетителям.
• Нет контроля версий. Невозможно понять, кто и когда поменял файл.

Если после правки шаблона сайт показывает ошибку или белый экран, разбор частых причин — в статье ошибки на сайте 1С-Битрикс.

Чек-лист безопасной кастомизации

• Свой шаблон сайта лежит в /local/templates/.
• Все изменённые шаблоны компонентов — копии внутри своего шаблона.
• Системные файлы в /bitrix/ не тронуты.
• Папка /local/ под контролем версий.
• Правки сначала проверяются на тестовой копии.
• После изменений сброшен кэш и проверены основные страницы.
• Есть свежая резервная копия перед обновлением.

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

Где лежат шаблоны 1С-Битрикс?

Шаблоны сайта — в /bitrix/templates/ и /local/templates/. Шаблоны компонентов — в папке самого компонента или в папке components внутри шаблона сайта.

Можно ли править шаблон через админку?

Да, в разделе шаблонов сайтов настроек продукта есть редактор шаблона. Но для серьёзных правок удобнее работать с файлами и контролем версий: так видна история изменений и проще откатиться.

Что делать, если стандартные шаблоны уже правили на месте?

Сравнить изменённые файлы с оригиналами из дистрибутива, перенести отличия в копии внутри /local/, переключить компоненты на копии и вернуть системные файлы в исходное состояние. После этого обновления перестанут затирать дизайн.

Где хранить свои компоненты?

В /local/components/ под своим пространством имён, а не в /bitrix/components/. Так их не затронут обновления, а по пути сразу понятно, что это доработка, а не часть платформы.

Как создать шаблон Битрикс с нуля?

Создать папку в /local/templates/, разрезать вёрстку на header.php и footer.php, добавить служебные вызовы, подключить шаблон к сайту в настройках и скопировать нужные шаблоны компонентов.

Как изменить шаблон Битрикс, чтобы правки не слетели?

Правьте только свой шаблон сайта и копии шаблонов компонентов в /local/. Системные файлы в /bitrix/ не трогайте.

Что такое битрикс шаблоны страниц?

Заготовки для создания новых страниц через публичную часть. Они хранятся в папке page_templates шаблона сайта.

Можно ли использовать разные шаблоны для разных разделов?

Да. В настройках сайта задаются условия: шаблон для папки, для адреса или по PHP-условию.

Какие файлы шаблона Битрикс главные?

header.php, footer.php, template_styles.css, styles.css и description.php. Остальное — папки с компонентами, картинками и скриптами.

Почему после правки шаблона ничего не изменилось?

Скорее всего, сработал кэш, правится не тот шаблон или компонент использует другую копию. Сбросьте кэш и проверьте, какой шаблон компонента указан в его параметрах.

Сколько стоит доработка шаблона?

Небольшие правки оцениваются почасово — 2 000 ₽/ч. Новый шаблон под редизайн — это отдельный проект, ориентир для сайта на 1С-Битрикс — от 90 000 ₽, точнее можно прикинуть в калькуляторе.

Нужен ли новый шаблон при редизайне?

Обычно да. Новый шаблон рядом со старым позволяет переводить страницы постепенно и откатиться при проблемах. Как пройти редизайн без потери трафика, описано в статье редизайн сайта.

Итог

Шаблоны 1С-Битрикс делятся на шаблон сайта, шаблоны компонентов и шаблоны страниц. Каркас сайта меняется в header.php и footer.php, вид блоков — в копиях шаблонов компонентов, логика — в своих компонентах.

Главное правило: вся кастомизация лежит в /local/, системные файлы в /bitrix/ не трогаются. Тогда обновления ядра и готовых решений проходят без потери дизайна.

Если нужно поменять дизайн, перенести правки из системных файлов в /local/ или сделать новый шаблон под редизайн, я как частный разработчик на 1С-Битрикс и WordPress сделаю это так, чтобы обновления больше не ломали сайт. Работаю напрямую, без посредников — подробнее о доработке сайта на 1С-Битрикс.