Створення банерів для сайту 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)

A/Б-тестування банерів

Якщо банери впливають на конверсію, потрібне тестування. Проста реалізація у Бітрікс: два банери в інфоблоці, при кожному запиті випадково вибирається один. Подія показу і кліка пишеться у кастомну таблицю:

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 за кожним варіантом.

Терміни

Банер — це не просто картинка. Це точка входу у воронку продажів, яка має швидко завантажуватися, правильно відображатися на всіх пристроях і легко оновлюватися без розробника.