Developing an advertising agency website using 1C-Bitrix

Advertising Agency Website Development on 1C-Bitrix

An advertising agency website is simultaneously a product and proof of competency. If an agency claims to produce "wow-creative" while its own website looks like a 2015 template—trust disappears. 1C-Bitrix allows building a visually rich project with heavy media content without sacrificing manageability: info-blocks maintain portfolio structure, components provide filtering, and the caching module handles video and animation loads.

Portfolio with Work Type Filtering

The "Portfolio" info-block is the central entity of the website. Info-block sections correspond to directions: branding, digital marketing, BTL/event, media placement, production. Element properties:

• Client—name + logo (file)
• Work Type—multiple directory (Highload-block for quick filtering)
• Task Description—HTML field
• Creative Concept—text + visual
• Media—multiple "file" property (photos, videos, GIF animations)
• Video Presentation—Vimeo/YouTube link or MP4 file
• Results Metrics—structured numbers: reach, ROI, conversion, sales growth
• Year and Duration—for chronological sorting

Filtering is implemented via catalog.smart.filter with AJAX result loading. User selects "Branding + 2023–2024"—the list updates without reload. List template—tile layout (masonry grid) with hover effects showing client name and work type.

Rich-media Content in Portfolio—Main Project Challenge

An advertising agency sells visuals. Portfolio must showcase work at maximum quality—videos, animated banners, interactive presentations. Yet the site must not lag. Let's examine how to achieve this.

Video. Two approaches: external hosting (Vimeo Pro / YouTube) and self-hosted. External hosting removes server load but limits player control. Self-hosted gives custom player without third-party branding but requires CDN and adaptive streaming.

For self-hosted, we use MP4 format (H.264) with multiple bitrates. Video files upload via info-block property to upload/ but are served through CDN (BunnyCDN, Selectel CDN, or CloudFlare). In the news.detail component template, we connect a custom player based on Plyr.js—lightweight, customizable, dependency-free. Settings: autoplay on scroll (Intersection Observer API), muted by default, lazy poster loading.

Animations. GIF is a heavy and outdated format. We convert to WebM/MP4 for traffic savings (5–10x lighter). Lottie animations (JSON, exported from After Effects via Bodymovin) for interactive UI elements—logos, icons, diagrams. We connect lottie-web and render via SVG. For banners—HTML5 animation in iframe with lazy loading.

Interactive Cases. Some work is better shown interactively—a landing prototype or interactive infographic. Implementation via iframe with sandbox attributes (allow-scripts allow-same-origin) and lazy loading. Info-block element contains "Interaction URL" property—template checks presence and displays "View Interactive" button.

Load Optimization. With so much media content, performance is critical:

• Lazy loading for all images and video—loading="lazy" attribute and Intersection Observer for video players
• Progressive Images—via iblock.element.list component with custom resize: WebP + AVIF with JPEG fallback. Use CFile::ResizeImageGet() for generating needed-size thumbnails
• Composite Cache—enable for portfolio pages, excluding dynamic blocks (application form) via $APPLICATION->SetPageProperty("NOT_COMPOSITE", "Y")
• CDN for Static—all media files, CSS, JS served through CDN. In main module settings, specify CDN domain for upload/ and bitrix/cache/

Media Responsiveness. On mobile, we substitute videos with static posters (via <picture> with media-query)—saves traffic and battery. Galleries switch from grid to swipe carousel (Swiper.js). Lottie animations reduce FPS or convert to static SVG on prefers-reduced-motion.

Cases with Metrics

Separate block in case card—"Results." Displayed as horizontal row of large numbers with captions: "+340% reach," "ROI 4.2x," "Conversion 12.8%." Numbers are animated on scroll (countUp.js)—attracts attention and looks professional. Data is stored in numeric info-block properties with units in separate text property.

Team with Roles

"Team" info-block with sections: creative, strategy, account management, production, digital. Properties: photo (square, minimum 600×600), position, specialization, social media. Template features non-standard grid: hovering on photo expands card with bio and realized projects (binding to portfolio info-block).

Blog on Advertising and Marketing

Info-block with categories: trends, campaign reviews, tools, opinions. SEO optimization: friendly URLs, meta-tag templates via SEO module, Article microdata. Each article contains CTA block offering to discuss the task—form is linked to Bitrix24 CRM.

Advertising Budget Calculator

Multi-step JS form:

1. Campaign goal (awareness, leads, sales)
2. Channels (context, targeting, OOH, TV, digital)
3. Geography and audience
4. Budget or desired result

Coefficients are stored in Highload-block—manager updates CPM/CPC rates without developer involvement. Result: estimated budget distribution across channels with reach forecast. Data is sent to Bitrix24 CRM as lead via REST API (crm.lead.add).

Bitrix24 CRM Integration

All website forms (brief request, calculator, newsletter subscription) send data to Bitrix24 via REST API. Sales funnel configuration: lead → qualification → brief → commercial proposal → contract. Lead source is auto-determined by UTM tags, saved in cookies and sent with the form.

We link Bitrix web forms to CRM via OnAfterResultAdd event handler—form submission creates lead with filled fields. Alternative—Bitrix24 CRM forms, embedded via widget, but they're limited in design customization.

Development Stages

An advertising agency website on Bitrix is a project where technical solutions serve visual impact. Every architectural decision—from animation format choice to CDN setup—aims to make the portfolio load fast and look as impressive as the advertising campaigns themselves.