Создание баннеров для сайта 1С-Битрикс

Создание баннеров для сайта 1С-Битрикс

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

Модуль рекламных баннеров vs. инфоблок

В Битрикс есть штатный модуль advertising — баннерная система с таргетингом, статистикой показов и ротацией. Для большинства корпоративных сайтов это избыточно. Но для интернет-магазинов с промо-акциями и A/B-тестами — оправдано.

Когда использовать модуль advertising:

• Нужна ротация (показывать разные баннеры с разной вероятностью)
• Нужна статистика: CTR, уникальные показы
• Баннеры таргетируются по группам пользователей (GROUPS_BY_USER)
• Кампания ограничена по времени — модуль умеет автоматически отключать баннер по дате

Баннеры хранятся в таблице b_banner и b_banner_banner. Компонент bitrix:advertising.banner выводит баннер по символьному коду группы.

Когда использовать инфоблок:

• Баннеры управляются контент-менеджером, не разработчиком
• Нужна привязка к разделам каталога или акциям
• Много слайдов с разными ссылками и текстами

Инфоблок «Баннеры» с разделами по позиции (главная, категория, сайдбар) — универсальное решение. Каждый элемент содержит изображение, заголовок, подзаголовок, URL-ссылки для desktop и mobile версий.

Технические требования к баннерам

Перед созданием баннера нужно зафиксировать технические требования в брифе:

GIF для баннеров — архаика. Анимированные баннеры делаются через CSS-анимации (@keyframes) или GSAP. Вес GIF в 5–10 раз больше при том же визуальном результате.

Адаптив: один файл изображения на все размеры не работает. Нужно либо два отдельных изображения (хранятся в двух свойствах инфоблока: BANNER_DESKTOP и BANNER_MOBILE), либо тег <picture> с srcset:

<picture>
    <source media="(max-width: 768px)" srcset="/upload/mobile-banner.webp">
    <source srcset="/upload/desktop-banner.webp">
    <img src="/upload/desktop-banner.jpg" alt="Описание акции" loading="lazy">
</picture>

Слайдеры: выбор библиотеки и интеграция

Слайдер на главной — самый частый кейс. Варианты библиотек:

• Swiper.js — наиболее актуальный выбор, 65 KB gzipped, touch-поддержка, lazy load
• Splide — лёгкая альтернатива, 25 KB
• Glide.js — минималистичный

Не использовать: Bootstrap Carousel (тяжёлый Bootstrap в зависимости), Slick (не поддерживается с 2016), jQuery-based решения (если на сайте нет jQuery).

Подключение в шаблоне Битрикс — через Asset:

// в init.php или в шаблоне
\Bitrix\Main\Page\Asset::getInstance()->addJs('/local/assets/swiper.min.js');
\Bitrix\Main\Page\Asset::getInstance()->addCss('/local/assets/swiper.min.css');

Или через Webpack/Vite, если на проекте настроена сборка — тогда библиотека попадает в бандл.

Анимированные HTML5-баннеры

Для баннеров с текстовой анимацией (появление заголовка, кнопки, декоративных элементов) CSS-анимации предпочтительнее JavaScript:

.banner-title {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.6s ease 0.3s forwards;
}
@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

GSAP нужен только для сложных сценариев: последовательных анимаций, SVG-морфинга, parallax-эффектов. Для рядового промо-баннера GSAP — избыточная зависимость.

Управление баннерами через админку

Чтобы менеджер мог менять баннеры без разработчика, нужен понятный интерфейс. Стандартный интерфейс инфоблока для этого не идеален — поля расположены неудобно для нетехнического пользователя.

Улучшения:

• Переименование полей через настройки инфоблока: «Картинка анонса» → «Изображение для мобильных», «Детальная картинка» → «Изображение для десктопа»
• Подсказки в описании свойств (размер, формат, рекомендации)
• Предпросмотр — кастомный подкомпонент в detail-странице элемента показывает, как баннер будет выглядеть на сайте
• Сортировка перетаскиванием — через drag-and-drop в списке элементов инфоблока (поле SORT)

А/Б-тестирование баннеров

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

CREATE TABLE b_banner_ab_stat (
    ID SERIAL PRIMARY KEY,
    BANNER_ID INT NOT NULL,
    VARIANT CHAR(1) NOT NULL,
    EVENT_TYPE VARCHAR(10) NOT NULL, -- 'show' или 'click'
    SESSION_ID VARCHAR(40),
    DATE_INSERT TIMESTAMP DEFAULT NOW()
);

Агрегация результатов — SQL-запрос с подсчётом CTR по каждому варианту.

Сроки

Баннер — это не просто картинка. Это точка входа в воронку продаж, которая должна быстро загружаться, правильно отображаться на всех устройствах и легко обновляться без разработчика.