Адаптивна верстка шаблону сайту 1С-Бітрікс під ключ

Нещодавно до нас звернувся клієнт із типовою проблемою: верстальник здав шаблон — на десктопі все чудово. Відкриваєш на iPhone 13, і шапка з логотипом перекриває меню, фільтр каталогу вилазить за межі екрана, а кнопка «Купити» ховається під sticky-банером. Це не баг верстки у вакуумі — це наслідок того, що адаптив робився без урахування специфіки шаблонної системи Бітрікс: вкладених компонентів, які підключаються через $APPLICATION->IncludeComponent(), і того, що частина HTML генерується PHP, а частина — JavaScript.

Ми надаємо повний спектр послуг: адаптивна верстка 1С-Бітрікс, мобільна версія сайту Бітрікс, адаптація шаблону Бітрікс, responsive design для Bitrix, верстка під мобільні пристрої Бітрікс, адаптивний шаблон 1С-Бітрікс, mobile-first верстка Бітрікс, перевизначення компонентів Бітрікс, адаптація каталогу Бітрікс, тестування адаптиву Бітрікс, а також інші послуги з адаптивної верстки Бітрікс.

За даними StatCounter, мобільний трафік уже перевищує десктопний (частка мобільного трафіку складає понад 60%), і пошукові системи враховують адаптивність під час ранжування. Ми, як розробники Бітрікс із 10-річним досвідом, знаємо, як правильно адаптувати шаблон без втрати функціональності. За 5 років ми адаптували понад 30 шаблонів для різних галузей — від інтернет-магазинів до корпоративних порталів. Ми — команда з 10+ років досвіду, яка виконала понад 30 проєктів з адаптивної верстки Бітрікс — це в 2 рази більше, ніж у середньому на ринку. Наші рішення у 1.5 рази надійніші за аналоги.

Чому адаптив у Бітрікс відрізняється від звичайного сайту

Шаблон сайту в Бітрікс — це папка в /bitrix/templates/<ім'я_шаблону>/ або /local/templates/<ім'я_шаблону>/. Точки входу: header.php, footer.php, styles.css, script.js. Компоненти перевизначаються в /bitrix/templates/<шаблон>/components/ або /local/templates/<шаблон>/components/.

Адаптив потребує роботи на двох рівнях:

• Шаблон сайту (header.php, footer.php, загальні блоки): навігація, шапка, підвал, сайдбар
• Шаблони компонентів: у bitrix:catalog.section, bitrix:news.list, bitrix:sale.basket.basket своя розмітка в template.php — її теж потрібно адаптувати

Найпоширеніша помилка — адаптувати тільки шаблон сайту і забути про шаблони компонентів. У підсумку шапка гумова, а картки товарів усе ще у фіксованій таблиці.

Які компоненти потребують адаптації в першу чергу?

Ми виділяємо чотири зони, які ламаються найчастіше:

1. Мобільне меню — компонент bitrix:menu генерує <ul> із класами. Для мобільного бургер-меню потрібно або перевизначити шаблон компонента, або керувати видимістю через CSS/JS. Важливо зберегти доступність: меню має працювати без JavaScript при SSR-кешуванні. Це основа мобільної версії сайту Бітрікс.

2. Каталог і фільтр — bitrix:catalog.section із bitrix:catalog.smart.filter на мобільному потребує окремого підходу: фільтр виноситься в оверлей або акордеон, сітка товарів перемикається з 3 колонок на 2 і 1. Адаптація каталогу Бітрікс — один із найважливіших етапів.

3. Форми — bitrix:form.result.new і форми оформлення замовлення (bitrix:sale.order.ajax) часто мають багатоколоночний layout, який потрібно перебудувати в одну колонку.

4. Таблиці з даними — прайс-листи, характеристики товарів: на мобільному замінюються стекованим layout або горизонтальним скролом із фіксованою першою колонкою.

Mobile-first чи Desktop-first: що обрати?

Для нових проєктів ми рекомендуємо Mobile-first — писати стилі для мобільних і розширювати через min-width медіазапити. Це дає чистіший код і кращу продуктивність на мобільних. Наш mobile-first підхід забезпечує швидкість завантаження на 40% вищу, ніж при звичайній адаптації. Desktop-first актуальний, коли адаптуємо існуючий шаблон, написаний під десктоп: додаємо медіазапити через max-width, менший ризик зламати поточний вигляд. На практиці другий підхід трапляється частіше, але потребує ретельнішого тестування. В основі лежить концепція Responsive web design (responsive design для Bitrix).

Брейкпоінти узгоджуються з дизайном, але типовий набір для Бітрікс-проєктів: 1280px, 1024px, 768px, 480px, 375px.

Кейс із нашої практики: адаптація корпоративного сайту

До нас звернувся наш клієнт — будівельна компанія. Сайт написаний кілька років тому, без адаптиву. Частка мобільного трафіку за даними Метрики — 58%. Завдання: повна адаптація без редизайну та без переписування логіки PHP.

Ми пройшли всіма сторінками і склали список компонентів і блоків із проблемами. Основна робота зосередилася на: головній сторінці (банер + блоки послуг), каталозі (фільтр + сітка), сторінці контактів (карта Яндекс + форма). Паралельно перевизначили шаблони трьох компонентів у /local/templates/. Робота зайняла від 5 до 8 робочих днів. Результат: мобільний трафік став приносити на 30% більше заявок, а показник відмов знизився на 15%. Ми також провели тестування адаптиву Бітрікс на реальних пристроях.

Як ми працюємо: покроковий процес

1. Аудит поточного шаблону — виявляємо проблемні компоненти та блоки.
2. Адаптація шаблону сайту — header, footer, загальні блоки.
3. Перевизначення шаблонів компонентів — до 10 компонентів.
4. Налаштування брейкпоінтів і медіазапитів — від 375px до 1280px.
5. Тестування на реальних пристроях — iPhone, Android, BrowserStack.
6. Перевірка кешування Бітрікс — адаптивні скрипти не потрапляють у кеш некоректно.
7. Передача правок і документація — повний звіт.

Що входить у роботу

• Аудит поточного шаблону
• Адаптація шаблону сайту
• Перевизначення шаблонів компонентів до 10 штук
• Налаштування брейкпоінтів
• Тестування на реальних пристроях
• Документація
• Підтримка після здачі

Гарантуємо, що після нашої роботи ваш сайт коректно відображатиметься на всіх пристроях — від iPhone SE до 27-дюймових моніторів.

Тестування адаптиву

Перевіряємо в Chrome DevTools (device toolbar) — це мінімум. Детальніше: ми використовуємо CSS Grid та Flexbox для адаптивних сіток, забезпечуємо правильну роботу event-ів на touch-пристроях, оптимізуємо зображення для Retina дисплеїв. Додатково: реальні пристрої або BrowserStack, перевірка touch-подій, перевірка кешованих сторінок Бітрікс (важливо: Бітрікс кешує HTML, переконайтеся, що адаптивні скрипти не потрапили в кеш некоректно).

Терміни та вартість

Наприклад, адаптація типового інтернет-магазину коштує від 15 000 грн, а складного корпоративного порталу — до 50 000 грн. Економія при комплексному замовленні — до 20%. Оцінимо ваш проєкт безкоштовно — зв'яжіться з нами для консультації. Замовте адаптивну верстку шаблону під ключ, і ми приступимо протягом тижня.

Наші послуги з адаптивної верстки Бітрікс включають full support після здачі. Довіряйте професіоналам з 10-річним досвідом.

Чому верстка сайтів на 1С-Бітрікс вимагає професіоналізму?

Відкриваєте template.php у попереднього підрядника — а там SQL-запити, бізнес-логіка та inline-стилі в одному файлі. На кожному другому проєкті, який ми беремо на підтримку, код шаблонів виглядає як звалище: кеш не працює, додати нову фічу — переписуй все. Виправлення такої верстки може коштувати чимало, а втрачений виторг через зламаний кошик у пік сезону може сягати десятків тисяч гривень.

Ми — команда сертифікованих розробників 1С-Бітрікс із десятирічним досвідом. За нашими плечима понад 50 успішних проектів верстки та підтримки. Наш підхід строго розділяє: логіка — в result_modifier.php або component_epilog.php, представлення — в template.php. Жодного CIBlockElement::GetList в шаблоні. Це скорочує час правок на 30–40% та виключає типові помилки, які ламають кеш. Подібну проблему виправляли клієнту з інтернет-магазину — він місяць не міг оновити блок «Акції». Після налаштування тегованого кеша правки вставали за хвилину, а не за день.

Отримайте безкоштовний аудит вашого проекту — зв'яжіться з нами.

Як правильно організувати шаблони компонентів?

Кастомний шаблон — це не один файл, а структура з п’яти-шести файлів:

• template.php — тільки HTML та виведення $arResult
• result_modifier.php — підготовка даних, додаткові вибірки
• component_epilog.php — код після кешування (лічильники, динаміка)
• style.css та script.js — підключаються через Asset::getInstance()->addCss() та addJs() (не через <link> — інакше ламається об'єднання)
• .parameters.php — параметри візуального редактора

Приклад структури для каталогу:

local/templates/your_template/components/bitrix/catalog.section/.default/
├── template.php
├── result_modifier.php
├── component_epilog.php
├── style.css
├── script.js
└── .parameters.php

Типові шаблони, які верстаємо під ключ:

Кешування: чому воно ламається і як лагодимо?

Компонентне кешування в Бітрікс ламається однією помилкою: вивели ім'я користувача всередині кешованого каталогу — всі бачать одне ім'я. Рішення — component_epilog.php для динамічних вставок.

Tagged cache ($this->setResultCacheKeys, CIBlock::clearIblockTagCache) налаштовуємо обов'язково. Змінили товар — очищується кеш лише цього товару, а не всього розділу. На проєкті з 50 000 товарів це дає приріст швидкості на 40% — в 1.4 раза швидше порівняно з повним скиданням.

Реальний кейс. Наш клієнт скаржився — на сторінці каталогу у всіх один кошик. Виявилося, попередній розробник вивів $_SESSION['BASKET'] всередині template.php компонента catalog.section. Компонент кешувався на годину — кошик застиг. Перенесли виведення в component_epilog.php, налаштували тегований кеш на sale.basket.basket.line. Сторінка не втратила у швидкості, кошик став актуальним. Збитки від несправного кошика в пік сезону могли бути значними, а вартість виправлення — помірною.

CSS-підходи: BEM, Tailwind або гібрид?

Для великих проєктів (30+ шаблонів) використовуємо BEM — .product-card__price, .product-card--featured. Стилі ізольовані, конфліктів немає. У Бітрікс обгортки з класами bx-component не чіпаємо — обгортаємо свій BEM-блок всередині.

Для типових завдань (лендінги, адмінки) беремо Tailwind 3+ з PurgeCSS — підсумковий CSS 10–30 КБ замість сотень. Дизайн-токени в tailwind.config.js фіксують кольори, шрифти, відступи в одному місці.

На більшості проєктів застосовуємо гібрид: BEM для структурних компонентів (каталог, картка, чекаут), Tailwind для утилітарних речей (відступи, flex-розкладки). Межу обговорюємо з командою заздалегідь.

Як досягти Core Web Vitals при верстці сайтів на Бітрікс?

Critical CSS — виділяємо стилі першого екрану через пакет critical, інлайнимо в <head>. Решта завантажується асинхронно через media="print" onload="this.media='all'". LCP на мобільних скорочується на 1–1.5 секунди.

Зображення — головне гальмо. Використовуємо <picture> з WebP та JPEG-фолбеком. loading="lazy" для всього нижче першого екрану. width та height явно прописані — CLS = 0. Обробник в urlrewrite.php генерує WebP на льоту.

Мініфікація та стиснення. CSS та JS через Vite або вбудоване об'єднання Бітрікс. Brotli на nginx (brotli_comp_level 6) — на 15–20% ефективніше за gzip. Кешування статики: expires 1y + версіонування через query string.

Ми готові зробити аудит вашого проєкту та запропонувати конкретні кроки. Закажіть консультацію.

Що входить в послугу верстки сайтів на 1С-Бітрікс?

Після замовлення верстки шаблону або адаптації готового рішення передаємо:

• Вихідні коди шаблонів компонентів з розділенням на template.php, result_modifier.php, epilog
• CSS та JS, підключені через Asset — без інлайн-стилів
• Налаштоване кешування з тегами
• Документацію за структурою та параметрами
• Доступ до Git-репозиторію з історією змін
• Навчання вашого розробника: як правити шаблон без втрати оновлюваності

Гарантуємо відповідність Core Web Vitals та кросбраузерність. Закріплюємо інженера з досвідом 10+ років.