Creating banners for the 1C-Bitrix website

Creating Banners for a 1C-Bitrix Website

The task "we need a banner on the homepage" sounds simple. In reality it is three separate questions: where the banner is stored (advertising module or infoblock), how it is displayed (static, slider, animation), and who changes it (a developer or a manager through the admin panel). Making the wrong choice at the first step means a rework at the very first "can we add another slide" request.

Advertising Banners Module vs. Infoblock

Bitrix has a built-in advertising module — a banner system with targeting, display statistics, and rotation. For most corporate sites this is excessive. But for online stores with promotions and A/B tests it is justified.

When to use the advertising module:

• Rotation is needed (show different banners with different probabilities)
• Statistics are needed: CTR, unique impressions
• Banners are targeted by user groups (GROUPS_BY_USER)
• A campaign is time-limited — the module can automatically disable a banner by date

Banners are stored in the b_banner and b_banner_banner tables. The bitrix:advertising.banner component displays a banner by the symbolic code of the group.

When to use an infoblock:

• Banners are managed by a content manager, not a developer
• Linking to catalog sections or promotions is needed
• There are many slides with different links and texts

A "Banners" infoblock with sections by position (homepage, category, sidebar) is a universal solution. Each element contains an image, heading, subheading, and URL links for desktop and mobile versions.

Technical Requirements for Banners

Before creating a banner, the technical requirements must be fixed in a brief:

GIF for banners is archaic. Animated banners are created with CSS animations (@keyframes) or GSAP. A GIF is 5–10 times heavier for the same visual result.

Responsiveness: a single image file for all screen sizes does not work. Either two separate images are needed (stored in two infoblock properties: BANNER_DESKTOP and BANNER_MOBILE), or a <picture> tag with 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="Promotion description" loading="lazy">
</picture>

Sliders: Library Selection and Integration

A homepage slider is the most common use case. Library options:

• Swiper.js — the most current choice, 65 KB gzipped, touch support, lazy load
• Splide — a lightweight alternative, 25 KB
• Glide.js — minimalist

Do not use: Bootstrap Carousel (depends on heavy Bootstrap), Slick (unmaintained since 2016), jQuery-based solutions (if jQuery is not on the site).

Connecting in the Bitrix template — via Asset:

// in init.php or in the template
\Bitrix\Main\Page\Asset::getInstance()->addJs('/local/assets/swiper.min.js');
\Bitrix\Main\Page\Asset::getInstance()->addCss('/local/assets/swiper.min.css');

Or via Webpack/Vite if the project has a build setup configured — then the library is included in the bundle.

Animated HTML5 Banners

For banners with text animation (heading appearance, button, decorative elements), CSS animations are preferable to 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 is only needed for complex scenarios: sequential animations, SVG morphing, parallax effects. For a typical promotional banner, GSAP is an unnecessary dependency.

Managing Banners Through the Admin Panel

For a manager to change banners without a developer, a clear interface is needed. The standard infoblock interface is not ideal for this — the fields are arranged inconveniently for a non-technical user.

Improvements:

• Renaming fields through infoblock settings: "Preview image" → "Mobile image", "Detail image" → "Desktop image"
• Hints in property descriptions (size, format, recommendations)
• Preview — a custom subcomponent in the detail page of an element shows how the banner will look on the site
• Drag-and-drop sorting — in the infoblock element list (the SORT field)

A/B Testing of Banners

If banners affect conversion, testing is needed. A simple implementation in Bitrix: two banners in the infoblock, one is randomly selected on each request. Impression and click events are written to a custom table:

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' or 'click'
    SESSION_ID VARCHAR(40),
    DATE_INSERT TIMESTAMP DEFAULT NOW()
);

Aggregating results — SQL query counting CTR for each variant.

Timelines

A banner is not just an image. It is an entry point into the sales funnel that must load quickly, display correctly on all devices, and be updated easily without a developer.