Creating Banners for 1C-Bitrix: Modules, Infoblocks, Sliders

Creating Banners for 1C-Bitrix: Modules, Infoblocks, Sliders

We often hear from clients: "I need a banner on the homepage." It sounds simple, but in reality it's three separate questions: where the banner is stored (advertising module or infoblock), how it's displayed (static, slider, animation), and who updates it (developer or manager through admin panel). Wrong choice at step one means rework at the first "can we add another slide." Our team of certified Bitrix specialists with 8+ years of experience and 100+ successful projects guarantees a smooth process and avoids these mistakes.

Advertising Module vs. Infoblock

Bitrix has a built-in advertising module—a banner system with targeting, impression statistics, and rotation. For most corporate sites this is overkill, but for e‑commerce stores with promotions and A/B tests it's justified.

Use the advertising module when you need rotation (different banners with different probabilities), CTR statistics and unique impressions, targeting by user groups (GROUPS_BY_USER), or automatic deactivation by date. Banners are stored in the b_banner table. The bitrix:advertising.banner component outputs a banner by the group symbolic code.

An infoblock "Banners" with sections by position (homepage, category, sidebar) is a universal solution. Each element contains an image, title, subtitle, and URL for desktop and mobile versions. A content manager can easily manage elements through the standard interface.

Why Choose an Infoblock for Banners?

If banners are managed by a non‑developer, if you need binding to catalog sections or promotions, or if there are many slides with different links—the infoblock wins. It's more flexible: you can add custom properties for links, deadlines, target groups. The advertising module is overkill for such tasks.

Technical Requirements for Banners

Before creating a banner, fix the requirements in a brief:

GIF for banners is archaic. Animated banners are made with CSS animations (@keyframes) or GSAP. GIF weight is 5–10 times larger for the same visual result. According to a study on web performance, replacing GIF with CSS animations reduces page weight by an average of 60%.

Responsiveness: one image file for all sizes doesn't work. Either two separate images (stored in two infoblock properties: BANNER_DESKTOP and BANNER_MOBILE) or the <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="Bitrix banner for promotion" loading="lazy"> </picture> 

How to Choose a Slider Library?

A homepage slider is the most common case. Swiper.js is the most relevant choice: 65 KB gzipped, touch support, lazy load. For comparison, Bootstrap Carousel is over 200 KB, making Swiper.js 3x smaller. Alternatives: Splide (25 KB), Glide.js (minimal). Do not use Bootstrap Carousel (heavy) or Slick (unmaintained since 2016). Connect in Bitrix via Asset:

\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 you have a build setup.

Animated HTML5 Banners

For banners with text animation (title appear, button), 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 promo banner GSAP is overkill.

Managing Banners via Admin Panel

For a manager to change banners without a developer, a clear interface is needed. The standard infoblock interface is not perfect. Improvements:

• Rename fields through infoblock settings: "Preview picture" → "Mobile image", "Detailed picture" → "Desktop image".
• Add hints in property descriptions (size, format, recommendations).
• Implement a preview—a custom subcomponent shows how the banner will look on the site.
• Enable drag‑and‑drop sorting in the element list (sort by SORT field).

A/B Testing of Banners

If banners affect conversion, testing is needed. A simple implementation in Bitrix: two banners in an infoblock, randomly choose one on each request. Write impression and click events 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() ); 

Aggregate results with an SQL query calculating CTR per variant. Swiper.js loads 3× faster than Bootstrap Carousel, improving conversion rates.

What's Included

• Design and layout of banners (static and animated).
• Integration with Bitrix (advertising module or infoblock).
• Responsiveness setup (desktop + mobile).
• Admin panel customization (sorting, preview).
• Testing on all devices and browsers.
• Documentation and manager training.

Timeline and Cost

Cost is calculated individually after analyzing your requirements. Request a consultation—contact us for a project estimate.

Typical Mistakes

• Using GIF instead of CSS animations—weight 5–10× larger.
• One image for all resolutions—poor responsiveness.
• Choosing an outdated slider library (Slick, Bootstrap Carousel).
• No preview for manager—long feedback loops.
• Ignoring A/B tests with high traffic.

A banner is the entry point to the sales funnel. It must load fast, display correctly, and be easy to update.