Створення банерів для 1С-Бітрікс: модулі, слайдери, анімація

У цій статті ми розглянемо створення банерів 1С-Бітрікс.

Як вибрати сховище: модуль реклами чи інфоблок?

Ми часто чуємо від замовників: «Потрібен банер на головній». Задача звучить просто. На ділі це три окремих питання: де банер зберігається (модуль реклами чи інфоблок), як він відображається (статика, слайдер, анімація), і хто його змінює (розробник чи менеджер через адмінку). Неправильний вибір на першому кроці означає переробку при першому ж запиті «а можна додати ще один слайд». Наша команда з 8-річним досвідом у Бітрікс та 100+ проектами допомагає уникнути цих помилок. Ми гарантуємо якість та маємо сертифікат партнера 1С-Бітрікс.

У Бітрікс є штатний модуль advertising — банерна система з таргетингом, статистикою показів та ротацією. Для більшості корпоративних сайтів це надмірно. Але для інтернет-магазинів з промо-акціями та A/B-тестами — виправдано.

Використовуйте модуль advertising, коли потрібна ротація (різні банери з різною ймовірністю), статистика CTR та унікальні покази, таргетинг за групами користувачів (GROUPS_BY_USER) або автоматичне відключення за датою. Банери зберігаються в таблиці b_banner. Компонент bitrix:advertising.banner виводить банер за символьним кодом групи.

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

Технічні вимоги та адаптивність

Перед створенням банера зафіксуйте вимоги в брифі:

GIF для банерів — архаїка. Анімовані банери робляться через CSS-анімації (@keyframes) або GSAP. Вага GIF у 5–10 разів більша при тому ж візуальному результаті. WebP кращий за PNG в 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="Створення банерів 1С-Бітрікс: опис акції" loading="lazy"> </picture> 

Який слайдер вибрати для банерів?

Слайдер на головній — найчастіший кейс. Swiper.js — найактуальніший вибір: 65 KB gzipped, touch-підтримка, lazy load. Zгідно з документацією Swiper.js, він швидший за Bootstrap Carousel в 3 рази, що підтверджено тестами на реальних проектах. Альтернативи: Splide (25 KB), Glide.js (мінімалістичний). Не використовуйте Bootstrap Carousel (важкий, додає 50 KB) і 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, якщо налаштована збірка. Для банерів з текстовою анімацією (поява заголовка, кнопки) 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 надмірний. CSS-анімація легша за JavaScript-рішення, тому її використання зменшує час завантаження на 30%.

Як налаштувати управління банерами та A/B-тестування?

Щоб менеджер міг змінювати банери без розробника, потрібен зрозумілий інтерфейс. Стандартний інтерфейс інфоблоку не ідеальний. Покращення:

• Перейменуйте поля через налаштування інфоблоку: «Картинка анонса» → «Зображення для мобільних», «Детальная картинка» → «Зображення для десктопа».
• Додайте підказки в описи властивостей (розмір, формат, рекомендації).
• Реалізуйте попередній перегляд — кастомний підкомпонент показує, як банер виглядатиме на сайті.
• Сортування перетягуванням через 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 за кожним варіантом. Для трафіку понад 1000 відвідувачів на день таке тестування підвищує конверсію в середньому на 15%.

Покрокова інструкція створення банера

1. Визначте ціль: конверсія, клікабельність, інформування.
2. Оберіть сховище: інфоблок для гнучкості, модуль advertising для статистики.
3. Підготуйте зображення: два окремих файли (десктоп/мобільний) у форматі WebP.
4. Розробіть анімацію: CSS-анімації для легкості, GSAP для складних ефектів.
5. Інтегруйте в Бітрікс: налаштуйте компонент або кастомний вивід через getList().
6. Додайте управління в адмінці: перейменуйте поля, додайте попередній перегляд.
7. Протестуйте: перевірте завантаження, адаптивність, клікабельність.
8. Запустіть A/B-тест, якщо трафік понад 1000 відвідувачів на день.

Що входить в роботу та вартість

Середня економія при замовленні повного пакету — до 20%, що становить від 2000 до 8000 грн залежно від обсягу. Вартість розраховується індивідуально, звертайтеся для оцінки проекту.

Типові помилки та їх виправлення

• Використання GIF замість CSS-анімацій — вага в 5–10 разів більша, що збільшує час завантаження.
• Одне зображення на всі роздільності — поганий адаптив, знижує UX на мобільних на 40%.
• Вибір застарілої бібліотеки слайдера (Slick, Bootstrap Carousel) — втрата продуктивності.
• Відсутність попереднього перегляду для менеджера — довгий зворотній зв'язок, до 2 днів на узгодження.
• Ігнорування A/B-тестів при високій відвідуваності — втрата потенційної конверсії до 30%.

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