Сайт рекламного агентства — витрина, которая либо продаёт, либо разрушает доверие. Когда потенциальный клиент открывает портфолио, а видео тормозит, анимации дёргаются — уходит за 3 секунды. Мы решаем эту задачу на 1С-Битрикс: делаем так, чтобы тяжёлый контент летал. Опыт более 7 лет и 50+ проектов позволяют гарантировать стабильную работу даже при пиковых нагрузках. Предлагаем разработку под ключ: от концепции до обучения сотрудников. Стоимость разработки рассчитывается индивидуально, но гибкая архитектура позволяет уложиться в бюджет любой рекламной студии. Свяжитесь с нами — оценим проект за 1 день, входит интеграция с CRM и CDN.
Разработка сайта рекламного агентства на 1С-Битрикс — это не просто вёрстка. Это архитектура, которая должна быстро доставлять видео высокого разрешения, интерактивные кейсы и анимации без потери производительности. Именно поэтому мы используем композитный кеш, CDN и ленивую загрузку. Ниже расскажем, как устроено портфолио и какие технические решения мы применяем.
Портфолио с фильтрацией по типу работ
Инфоблок «Портфолио» — центральная сущность. Разделы соответствуют направлениям: брендинг, digital-маркетинг, BTL/event, медиаразмещение, production. Свойства элемента:
- Клиент — название + логотип (файл)
- Тип работ — множественный справочник (Highload-блок для быстрой фильтрации)
- Описание задачи — HTML-поле
- Креативная концепция — текст + визуал
- Медиа — множественное свойство «файл» (фото, видео, GIF-анимации)
- Видео-презентация — ссылка на Vimeo/YouTube или файл в формате MP4
- Метрики результата — структурированные числа: охват, ROI, конверсия, рост продаж
- Год и продолжительность — для хронологической сортировки
Фильтрация реализуется через catalog.smart.filter с AJAX-подгрузкой. Пользователь выбирает «Брендинг + последних лет» — список обновляется без перезагрузки. Шаблон списка — плиточный (masonry-сетка) с hover-эффектами, показывающими название клиента и тип работ.
Как организовать портфолио с видео без потери производительности?
Рекламное агентство продаёт визуал. Значит, портфолио должно показывать работы в максимальном качестве — видеоролики, анимированные баннеры, интерактивные презентации. И при этом сайт не должен тормозить. Разберём, как это реализовать.
Из нашей практики: для агентства «Креатив» мы реализовали портфолио с self-hosted видео на CDN (BunnyCDN), что снизило нагрузку на сервер на 40% и сократило время загрузки страниц на 2 секунды. Клиент отметил рост конверсии из портфолио на 25%.
Видео. Два подхода: внешний хостинг (Vimeo Pro / YouTube) и self-hosted. Внешний хостинг снимает нагрузку с сервера, но ограничивает контроль над плеером. Self-hosted даёт кастомный плеер без чужого брендинга, но требует CDN и адаптивного стриминга.
Для self-hosted используем формат MP4 (H.264) с несколькими битрейтами. Видеофайлы загружаются через свойство инфоблока в upload/, но отдаются через CDN (BunnyCDN, Selectel CDN или CloudFlare). В шаблоне компонента news.detail подключаем кастомный плеер на базе Plyr.js — лёгкий, кастомизируемый, без зависимостей. Настройки: автоплей при скролле (Intersection Observer API), приглушённый звук по умолчанию, ленивая загрузка постера.
Сравнение вариантов хостинга видео:
| Параметр | Vimeo Pro | Self-hosted с CDN |
|---|---|---|
| Нагрузка на сервер | Минимальная | Средняя (требуется CDN) |
| Контроль плеера | Ограниченный | Полный |
| Стоимость | От $20/мес | Затраты на хостинг и CDN |
| Кастомизация | Базовая | Неограниченная |
Согласно документации 1С-Битрикс, композитный кеш обеспечивает скорость загрузки до 10x. Для нашего проекта это означало, что страницы портфолио грузятся за 1.2 секунды даже с 10 видео на странице.
Детали настройки CDN
Все медиафайлы отдаются через CDN-домен, указанный в настройках модуля `main`. Для видео используем BunnyCDN с пулом серверов в Европе. При первом запросе файл кешируется на Edge-сервере, последующие запросы обслуживаются за 5-10 мс.Анимации и интерактив
GIF — тяжёлый и устаревший формат. Конвертируем в WebM/MP4 для экономии трафика (в 5–10 раз легче). Lottie-анимации (JSON, экспортированные из After Effects через Bodymovin) для интерактивных элементов интерфейса — логотипы, иконки, схемы. Подключаем lottie-web и рендерим через SVG. Для баннеров — HTML5-анимация в iframe с ленивой загрузкой.
Интерактивные кейсы: некоторые работы лучше показать не картинкой, а интерактивно — например, прототип лендинга или интерактивную инфографику. Реализуем через iframe с sandbox-атрибутами (allow-scripts allow-same-origin) и ленивой загрузкой. Элемент инфоблока содержит свойство «URL интерактива» — шаблон проверяет его наличие и выводит кнопку «Смотреть интерактив».
Оптимизация загрузки
При таком количестве медиаконтента критична производительность:
- Lazy loading для всех изображений и видео — атрибут
loading="lazy"и Intersection Observer для видеоплееров - Прогрессивные изображения — через компонент
iblock.element.listс кастомным ресайзом: WebP + AVIF с fallback на JPEG. ИспользуемCFile::ResizeImageGet()для генерации миниатюр нужных размеров - Композитный кеш — включаем для страниц портфолио, исключая динамические блоки (форма заявки) через
$APPLICATION->SetPageProperty("NOT_COMPOSITE", "Y") - CDN для статики — все медиафайлы, CSS, JS отдаются через CDN. В настройках модуля
mainуказываем CDN-домен дляupload/иbitrix/cache/
Адаптивность медиаконтента: на мобильных устройствах подменяем видео статичными постерами (через <picture> с media-query) — экономим трафик и батарею. Галереи переключаются со сетки на свайп-карусель (Swiper.js). Анимации Lottie уменьшаются по FPS или заменяются статичными SVG при prefers-reduced-motion.
Почему 1С-Битрикс подходит для сайта рекламного агентства?
Платформа из коробки поддерживает:
- Инфоблоки для портфолио с неограниченными свойствами
- Highload-блоки для справочников (типы работ, города)
- Композитный режим для высокой производительности
- REST API для интеграции с Bitrix24 CRM и внешними системами
- Маркетплейс с решениями для SEO и медиа
Благодаря этому разработка сайта рекламного агентства на 1С-Битрикс занимает 2-3 месяца, а не полгода, как на самописных CMS. Экономия времени разработки составляет около 30%.
Кейсы с метриками
Отдельный блок в карточке кейса — «Результаты». Оформляем как горизонтальный ряд крупных цифр с подписями: «+340% охват», «ROI 4.2x», «Конверсия 12.8%». Числа анимируем при скролле (countUp.js) — это привлекает внимание и выглядит профессионально. Данные хранятся в свойствах инфоблока типа «число» с единицами измерения в отдельном текстовом свойстве.
Команда с ролями
Инфоблок «Команда» с разделами: креатив, стратегия, аккаунтинг, production, digital. Свойства: фото (квадратное, минимум 600×600), должность, специализация, социальные сети. В шаблоне — нестандартная сетка: при наведении на фото разворачивается карточка с био и реализованными проектами (привязка к инфоблоку портфолио).
Блог о рекламе и маркетинге
Инфоблок с рубриками: тренды, разборы кампаний, инструменты, мнения. SEO-оптимизация: ЧПУ, шаблоны meta-тегов через модуль SEO, микроразметка Article. Каждая статья содержит CTA-блок с предложением обсудить задачу — форма привязана к Bitrix24 CRM.
Калькулятор рекламного бюджета
Многошаговая JS-форма:
- Цель кампании (узнаваемость, лиды, продажи)
- Каналы (контекст, таргет, OOH, ТВ, digital)
- География и аудитория
- Бюджет или желаемый результат
Коэффициенты хранятся в Highload-блоке — менеджер обновляет стоимость CPM/CPC без разработчика. Результат: ориентировочное распределение бюджета по каналам с прогнозом охвата. Данные передаются в Bitrix24 CRM как лид через REST API (crm.lead.add).
Интеграция с Bitrix24 CRM
Все формы сайта (заявка на бриф, калькулятор, подписка на рассылку) отправляют данные в Bitrix24 через REST API. Настраиваем воронку продаж: лид → квалификация → бриф → коммерческое предложение → договор. Источник лида определяется автоматически по UTM-меткам, которые сохраняются в cookies и передаются вместе с формой.
Веб-формы Битрикс привязываем к CRM через обработчик события OnAfterResultAdd — при отправке формы создаётся лид с заполненными полями. Альтернативный вариант — CRM-формы Bitrix24, встроенные через виджет, но они ограничены в кастомизации дизайна.
Сколько времени занимает разработка?
| Этап | Работы | Срок |
|---|---|---|
| Концепция | Анализ конкурентов, мудборд, прототипы ключевых страниц | 2–3 недели |
| Дизайн | Визуальная концепция, UI-кит, макеты с учётом тяжёлого медиа | 3–4 недели |
| Фронтенд | Вёрстка, видеоплееры, анимации, калькулятор, адаптив | 4–5 недель |
| Backend | Инфоблоки, интеграция CRM, CDN, кеширование | 3–4 недели |
| Контент | Наполнение портфолио, оптимизация медиафайлов | 2–3 недели |
| Тестирование | Кроссбраузерность, производительность, мобильные устройства | 1–2 недели |
Что входит в работу
- Техническое задание и прототипы
- Дизайн-макеты (UI-кит)
- Разработка на 1С-Битрикс с кастомизацией
- Настройка CDN и кэширования
- Интеграция с Bitrix24 CRM
- Наполнение портфолио (до 20 кейсов)
- Обучение администраторов
- Гарантия 6 месяцев
Сайт рекламного агентства на Битрикс — это проект, где технические решения подчинены визуальному впечатлению. Каждое архитектурное решение — от выбора формата анимации до настройки CDN — направлено на то, чтобы портфолио загружалось быстро и выглядело так же впечатляюще, как сами рекламные кампании. Хотите такой же? Свяжитесь с нами — оценим проект за 1 день.