Вёрстка и шаблоны
Натяжка вёрстки на 1С-Битрикс, структура шаблона сайта, подключение стилей и скриптов, включаемые области и сборка ассетов.
Сборка ассетов Vite и Webpack в проекте на Битрикс
1С-Битрикс не требует сборщика: положил CSS в template_styles.css, и он подключился. Но как только в проекте появляются препроцессоры, модульный JavaScript или npm-пакеты, встаёт вопрос сборки — а вместе с ним и вопрос, как подружить современный фронтенд-инструментарий с PHP-шаблоном. Разберём, когда сборщик действительно нужен, как устроить структуру папок в шаблоне, как подключать собранные файлы с учётом хешей в именах и что…
Спрайты и иконки в шаблоне Битрикс
Иконки есть на любом сайте: стрелки, корзина, телефон, социальные сети, галочки в списках. Способов вывести их несколько, и выбор влияет на количество запросов, вес страницы и на то, получится ли перекрасить иконку под наведение. Разберём три подхода — SVG-спрайт, инлайн-SVG и шрифтовые иконки, — покажем, как подключить спрайт в шаблоне 1С-Битрикс, и объясним, почему растровые спрайты сегодня почти не нужны….
Адаптивность и мобильная версия на Битрикс
Больше половины трафика большинства сайтов приходит с телефонов, и вопрос «делать ли мобильную версию» давно не стоит. Стоит другой: делать адаптивную вёрстку одним шаблоном или отдельную мобильную версию с определением устройства на сервере. На 1С-Битрикс этот выбор имеет техническое последствие, о котором обычно узнают поздно: серверное определение устройства конфликтует с кешированием. Разберём оба подхода, их совместимость с кешем и практические…
Свой шаблон для конкретного раздела сайта в Битрикс
Далеко не всегда весь сайт должен выглядеть одинаково. Каталогу нужна боковая колонка с фильтром, посадочной странице — вообще никакой обвязки, личному кабинету — своя шапка, а странице печати — голая вёрстка без меню. В 1С-Битрикс это решается несколькими шаблонами с условиями применения. Разберём все способы назначить шаблон разделу или странице — от настроек в админке до подмены из кода —…
Включаемые области в Битрикс
Включаемая область — это кусок содержимого, вынесенный в отдельный файл и подключаемый в нужное место шаблона или страницы. Смысл в том, что редактировать его может контент-менеджер прямо из публичной части сайта, не залезая в код. Телефон в шапке, адрес в подвале, баннер сбоку, текст под каталогом, реквизиты компании — всё это классические кандидаты во включаемые области. Разберём три режима их…
Подключение CSS и JS в Битрикс правильно
Подключить стиль или скрипт в 1С-Битрикс можно пятью разными способами, и они не равнозначны. От выбора зависит, попадёт ли файл в объединение и сжатие, в каком порядке загрузится и не сломается ли вёрстка при включении оптимизации. Разберём все методы API, объясним, чем SetAdditionalCSS отличается от AddHeadString, и покажем, что делать со сторонними скриптами, которые ядро норовит перенести в конец страницы….
Шаблон сайта в Битрикс: структура и файлы
Шаблон сайта в 1С-Битрикс — это папка с набором файлов, которая определяет внешний вид всех страниц. Сайт может иметь несколько шаблонов и переключаться между ними по условиям: один для основных страниц, другой для лендинга, третий для личного кабинета. Разберём, из каких файлов состоит шаблон, за что отвечает каждый, где шаблон должен лежать и как он создаётся и назначается в админке….
Натяжка вёрстки на Битрикс: пошаговое руководство
Натяжка вёрстки — это превращение статичных HTML-страниц в работающий сайт на 1С-Битрикс. Дизайнер отдал макет, верстальщик собрал HTML, и дальше нужно разложить это по шаблону, подключить компоненты и сделать так, чтобы контент редактировался из админки. Разберём весь путь по шагам: как устроен шаблон, что делать с header.php и footer.php, куда девать блоки страниц, как подменить статичные списки реальными данными и…