Создание баннеров для сайта 1С-Битрикс
Мы часто слышим от заказчиков: «Нужен баннер на главной». Задача звучит просто. На деле это три отдельных вопроса: где баннер хранится (модуль рекламы или инфоблок), как он отображается (статика, слайдер, анимация), и кто его меняет (разработчик или менеджер через админку). Неправильный выбор на первом шаге означает переделку при первом же запросе «а можно добавить ещё один слайд». Наша команда с 8-летним опытом в Битрикс и 100+ проектами помогает избежать этих ошибок.
Модуль рекламных баннеров vs. инфоблок
В Битрикс есть штатный модуль advertising — баннерная система с таргетингом, статистикой показов и ротацией. Для большинства корпоративных сайтов это избыточно. Но для интернет-магазинов с промо-акциями и A/B-тестами — оправдано.
Используйте модуль advertising, когда нужна ротация (разные баннеры с разной вероятностью), статистика CTR и уникальные показы, таргетинг по группам пользователей (GROUPS_BY_USER) или автоматическое отключение по дате. Баннеры хранятся в таблице b_banner. Компонент bitrix:advertising.banner выводит баннер по символьному коду группы.
Инфоблок «Баннеры» с разделами по позиции (главная, категория, сайдбар) — универсальное решение. Каждый элемент содержит изображение, заголовок, подзаголовок, URL для desktop и mobile версий. Контент-менеджер легко управляет элементами через стандартный интерфейс.
Почему стоит выбрать инфоблок для баннеров?
Если баннеры управляются не разработчиком, нужна привязка к разделам каталога или акциям, много слайдов с разными ссылками — инфоблок выигрывает. Он гибче настраивается: можно добавить кастомные свойства для ссылок, сроков, целевых групп. Модуль advertising для таких задач избыточен.
Технические требования к баннерам
Перед созданием баннера зафиксируйте требования в брифе:
| Параметр | Desktop | Mobile |
|---|---|---|
| Размер | 1920×600 или 1440×500 | 768×400 или 375×250 |
| Формат | WebP + JPEG-фолбек | WebP + JPEG-фолбек |
| Вес | до 150 KB | до 80 KB |
| Анимация | CSS или GSAP, не GIF | CSS, без тяжёлых анимаций |
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 (тяжёлый) и Slick (не поддерживается с 2016). Подключение в Битрикс через Asset:
\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 избыточен.
Управление баннерами через админку
Чтобы менеджер мог менять баннеры без разработчика, нужен понятный интерфейс?
Стандартный интерфейс инфоблока не идеален. Улучшения:
- Переименуйте поля через настройки инфоблока: «Картинка анонса» → «Изображение для мобильных», «Детальная картинка» → «Изображение для десктопа».
- Добавьте подсказки в описания свойств (размер, формат, рекомендации).
- Реализуйте предпросмотр — кастомный подкомпонент показывает, как баннер будет выглядеть на сайте.
- Сортировка перетаскиванием через drag-and-drop в списке элементов (поле
SORT).
A/B-тестирование баннеров
Если баннеры влияют на конверсию, нужно тестирование. Простая реализация в Битрикс: два баннера в инфоблоке, при каждом запросе случайно выбирается один. Событие показа и клика пишется в кастомную таблицу:
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 по каждому варианту. Swiper.js, например, быстрее Bootstrap Carousel в 3 раза по времени загрузки.
Что входит в работу
- Дизайн и вёрстка баннеров (статичных и анимированных).
- Интеграция с Битрикс (модуль advertising или инфоблок).
- Настройка адаптивности (десктоп + мобильные).
- Реализация управления в админке (сортировка, предпросмотр).
- Тестирование на всех устройствах и в браузерах.
- Документация и обучение менеджеров.
Сроки и стоимость
| Объём | Что входит | Срок |
|---|---|---|
| 1–3 статичных баннера | Дизайн + вёрстка + публикация | 3–5 дней |
| Слайдер с 5–7 слайдами | + анимации, адаптив, управление в админке | 1–2 недели |
| Баннерная система | + инфоблок, ротация, статистика, A/Б-тест | 3–5 недель |
Стоимость рассчитывается индивидуально, ориентир — от $270–390 за простой баннер. Получите консультацию — свяжитесь с нами для оценки проекта.
Типичные ошибки
- Использование GIF вместо CSS-анимаций — вес в 5–10 раз больше.
- Одно изображение на все разрешения — плохой адаптив.
- Выбор устаревшей библиотеки слайдера (Slick, Bootstrap Carousel).
- Отсутствие предпросмотра для менеджера — долгая обратная связь.
- Игнорирование A/B-тестов при высокой посещаемости.
Баннер — точка входа в воронку продаж. Он должен быстро загружаться, правильно отображаться и легко обновляться.