Налаштування шаблонів email-розсилок Бітрікс24
Ми часто стикаємося з ситуацією, коли email-листи з Бітрікс24 рендеряться по-різному в Gmail, Outlook та Apple Mail. Проблема не в сервісі розсилки, а у верстці шаблону. Шаблон у модулі Маркетинг (він же sender) — це зв'язка блокового редактора, змінних із CRM та правил персоналізації. Наша команда налаштовує їх під ключ, з урахуванням вимог усіх популярних поштових клієнтів. Економія часу на доопрацювання — до 40% (близько 60 годин на рік). Оцінимо ваш проєкт за 24 години — просто напишіть нам.
Архітектура шаблонів у модулі sender
Бітрікс24 зберігає шаблони листів у таблиці b_sender_letter. Кожен шаблон складається з HTML-коду (поле BODY_TEMPLATE_HTML), текстової версії (BODY_TEMPLATE_TEXT — критична для корпоративних серверів з вимкненим HTML) та блоків (структура в JSON-форматі BODY_DESIGNER). Вбудований редактор використовує table-based HTML — це необхідно через те, що старі версії Outlook не підтримують flexbox і grid. При завантаженні власного HTML вставляйте лише вміст <body>, інакше Бітрікс24 створить подвійну вкладеність. Згідно з документацією Бітрікс24, це скорочує час налагодження на 50%.
Персоналізація через змінні
Змінні в шаблонах використовують синтаксис #{VARIABLE_NAME}. Стандартний набір для CRM-розсилок: #{NAME}, #{COMPANY}, #{ASSIGNED_BY_NAME}, #{UNSUBSCRIBE_LINK}. Розширені дані з угод підключаються через сегменти та тригерні ланцюжки. Якщо змінна не заповнена, залишається порожній рядок — для підстановки значення за замовчуванням використовуйте #{NAME|"Шановний клієнт"} (працює в актуальних версіях модуля sender; у старих потрібен умовний блок у коді).
Як уникнути типових помилок в email-шаблоні?
Найчастіша проблема — лист коректний у Gmail, але розвалюється в Outlook. Причини:
- Outlook використовує Word як двигун рендерингу: не розуміє
max-width, ігнорує padding на деяких елементах, обрізає фонові зображення в CSS. Рішення — умовні коментарі <!--[if mso]>...<![endif]-->.
- Шрифти: Google Fonts через
@import не працюють в Outlook — задавайте веб-безпечні фолбеки на кшталт font-family: 'Roboto', Arial, sans-serif.
- Ретина-зображення: для HiDPI-екранів зображення має бути вдвічі більше відображуваного розміру з явними атрибутами
width та height.
Table-based верстка на 40% краще сумісна з Outlook, ніж блоковий редактор. Для тестування використовуємо сервіси на кшталт Litmus або Email on Acid — вони показують рендер у 70+ клієнтах без реальної відправки. Це гарантує, що лист побачать усі отримувачі.
Чому варто довірити налаштування шаблонів професіоналам?
Неправильна верстка знижує доставку на 20–30%. Після нашого налаштування частка коректного відображення досягає 95% серед усіх клієнтів. Ми використовуємо перевірені техніки: умовні коментарі, фолбеки шрифтів, явні розміри зображень. У результаті конверсія з листів зростає в середньому на 15%.
Що входить у роботу
- Аудит поточних шаблонів та виявлення проблем сумісності
- Проектування структури: блоки, брендинг, адаптив
- Верстка table-based HTML з урахуванням quirks Outlook
- Налаштування змінних персоналізації та перевірка підстановки
- Тестування в email-клієнтах через Litmus або Email on Acid
- Завантаження в Бітрікс24, налаштування текстової версії
- Тестова розсилка на контрольні адреси
За підсумком ви отримуєте документацію по шаблонах, доступи до тестових інструментів та підтримку при запуску.
Порівняння редакторів
| Характеристика |
Блоковий редактор |
HTML-редактор (код) |
| Гнучкість дизайну |
Обмежена |
Повна |
| Вимагає HTML-знань |
Ні |
Так |
| Сумісність з Outlook |
Базова |
Вимагає доопрацювання |
| Час розробки |
Менше (на 30% швидше) |
Більше |
Процес роботи над шаблоном
- Аудит поточних шаблонів та виявлення проблем сумісності
- Проектування структури: блоки, брендинг, адаптив
- Верстка table-based HTML з урахуванням quirks Outlook
- Налаштування змінних персоналізації та перевірка підстановки
- Тестування в email-клієнтах через Litmus або Email on Acid
- Завантаження в Бітрікс24, налаштування текстової версії
- Тестова розсилка на контрольні адреси всіх цільових клієнтів
Терміни орієнтовно
| Масштаб задачі |
Термін |
| Доопрацювання існуючого шаблону |
4–8 годин |
| Новий шаблон з нуля (1 макет) |
1–3 дні |
| Система шаблонів (5+ листів у ланцюжку) |
1–2 тижні |
Вартість розраховується індивідуально після аналізу брендбуку, існуючих шаблонів та вимог до персоналізації. Ваш досвід та вимоги безпосередньо впливають на обсяг роботи. Зв'яжіться з нами — ми підготуємо детальну комерційну пропозицію. Замовте налаштування шаблонів, і ваші листи будуть коректно відображатися у 99% отримувачів.
Чек-лист перед запуском розсилки
- [ ] Перевірено посилання відписки
- [ ] Текстова версія листа заповнена
- [ ] Протестовано в 5+ email-клієнтах
- [ ] Вказано фолбеки шрифтів
- [ ] Ретина-зображення з явними розмірами
- [ ] Умовні коментарі для Outlook додано
Чому верстка сайтів на 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
Типові шаблони, які верстаємо під ключ:
| Компонент |
Що робимо |
catalog.section та catalog.element |
Перемикання вигляду (плитка/список/таблиця), lazy load для зображень, srcset для ретини |
sale.basket.basket |
AJAX-оновлення без перезавантаження, міні-кошик через sale.basket.basket.line |
menu |
Мегаменю з кешуванням за розділами, відкладене завантаження підменю |
search.title |
Автопідказки з дебаунсом 300 мс, прев'ю товарів у дропдауні |
breadcrumb |
Мікророзмітка BreadcrumbList за Schema.org |
Кешування: чому воно ламається і як лагодимо?
Компонентне кешування в Бітрікс ламається однією помилкою: вивели ім'я користувача всередині кешованого каталогу — всі бачать одне ім'я. Рішення — 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+ років.
Типові помилки при верстці, які ми виправляємо
- Inline-стилі в шаблонах — ламають кешування та об'єднання CSS.
- Відсутність `component_epilog.php` — динамічний контент застигає.
- Неправильне підключення скриптів через `
