Интерактивное портфолио и CRM для рекламных агентств на 1С-Битрикс

Сайт рекламного агентства — витрина, которая либо продаёт, либо разрушает доверие. Когда потенциальный клиент открывает портфолио, а видео тормозит, анимации дёргаются — уходит за 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), приглушённый звук по умолчанию, ленивая загрузка постера.

Сравнение вариантов хостинга видео:

Согласно документации 1С-Битрикс, композитный кеш обеспечивает скорость загрузки до 10x. Для нашего проекта это означало, что страницы портфолио грузятся за 1.2 секунды даже с 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-форма:

1. Цель кампании (узнаваемость, лиды, продажи)
2. Каналы (контекст, таргет, OOH, ТВ, digital)
3. География и аудитория
4. Бюджет или желаемый результат

Коэффициенты хранятся в Highload-блоке — менеджер обновляет стоимость CPM/CPC без разработчика. Результат: ориентировочное распределение бюджета по каналам с прогнозом охвата. Данные передаются в Bitrix24 CRM как лид через REST API (crm.lead.add).

Интеграция с Bitrix24 CRM

Все формы сайта (заявка на бриф, калькулятор, подписка на рассылку) отправляют данные в Bitrix24 через REST API. Настраиваем воронку продаж: лид → квалификация → бриф → коммерческое предложение → договор. Источник лида определяется автоматически по UTM-меткам, которые сохраняются в cookies и передаются вместе с формой.

Веб-формы Битрикс привязываем к CRM через обработчик события OnAfterResultAdd — при отправке формы создаётся лид с заполненными полями. Альтернативный вариант — CRM-формы Bitrix24, встроенные через виджет, но они ограничены в кастомизации дизайна.

Сколько времени занимает разработка?

Что входит в работу

• Техническое задание и прототипы
• Дизайн-макеты (UI-кит)
• Разработка на 1С-Битрикс с кастомизацией
• Настройка CDN и кэширования
• Интеграция с Bitrix24 CRM
• Наполнение портфолио (до 20 кейсов)
• Обучение администраторов
• Гарантия 6 месяцев

Сайт рекламного агентства на Битрикс — это проект, где технические решения подчинены визуальному впечатлению. Каждое архитектурное решение — от выбора формата анимации до настройки CDN — направлено на то, чтобы портфолио загружалось быстро и выглядело так же впечатляюще, как сами рекламные кампании. Хотите такой же? Свяжитесь с нами — оценим проект за 1 день.

Как правильно проектировать инфоблоки?

Мы видим десятки проектов, где неправильная структура инфоблоков превращает сайт в тормоз. Типичный сценарий: заказчик просит «каталог товаров». Разработчик создаёт один инфоблок catalog, закидывает туда 15 свойств. Через полгода — 40 свойств, 8 из которых используются только для одной категории. Фильтр тормозит, таблица b_iblock_element_property разрослась до миллионов строк, CIBlockElement::GetList выполняется 3 секунды. Последствия — падение конверсии, потеря клиентов, дополнительные затраты на оптимизацию. В одном проекте после рефакторинга каталога время генерации страницы снизилось с 4,2 до 0,8 секунды, а стоимость поддержки сократилась на 250 000 рублей в год — за счёт устранения избыточных запросов и агентов.

Наш подход: проектируем инфоблоки до первой строки кода. Отдельные инфоблоки под сущности (товары, категории, бренды), свойства-справочники через highload-блоки, торговые предложения для SKU. Это закладывает производительность на годы вперёд. Если хотите получить предварительный аудит вашей схемы инфоблоков — свяжитесь с нами, разберём типовые ошибки и дадим рекомендации бесплатно.

Почему 1С-Битрикс выгоднее альтернатив?

Выбор CMS диктуется не предпочтениями, а бизнес-задачами. Вот ключевые аргументы:

• Нативный обмен с 1С — модуль catalog.import.1c обеспечивает двусторонний обмен товарами, ценами, остатками и заказами через CommerceML. Без сторонних модулей. Это в 5 раз быстрее, чем разработка собственного обмена на OpenCart или WordPress. Подробнее о формате — в Wikipedia. Экономия на интеграции составляет в среднем 150 000–300 000 рублей по сравнению с кастомными решениями.
• Проактивная защита — модуль security включает WAF, контроль целостности файлов, защиту от SQL-инъекций, двухфакторную аутентификацию. Для проектов с требованиями ФСТЭК — сертифицированное решение.
• Модульная архитектура — подключаем только нужные модули: iblock, catalog, sale, search. Меньше модулей — меньше запросов к БД на каждый хит.
• Регулярные патчи — вендор выпускает security-патчи, закрывая уязвимости быстрее, чем open-source проекты (среднее время исправления CVE — 2 недели). Официальная документация по модулям — dev.1c-bitrix.ru.

Что дают HL-блоки и как мы ускоряем каталог

Highload-блоки — это альтернатива расширенным свойствам инфоблоков, когда список значений может расти до тысяч записей. Типичный пример: производители, страны, цвета. Если хранить их как свойства-списки в инфоблоке, каждая фильтрация вызывает полное сканирование таблицы b_iblock_property_enum. С HL-блоками выборка идёт по индексу — время ответа фильтра снижается с 1–2 секунд до 50 мс. Мы используем HLB компонент и кастомные запросы через Bitrix\Highloadblock\DataManager. Это особенно критично для каталогов с 100 000+ товарами.

Из нашей практики — проект интернет-магазина с 500 000 товаров. Стандартный фильтр по бренду выполнялся 4 секунды. Сервер не выдерживал нагрузку в 50 одновременных запросов — страницы падали. Мы перевели справочник брендов в HL-блок, добавили тегированное кэширование на 15 минут и настроили агент для сброса кэша при изменении. После доработки время фильтрации составило 120 мс, средний LCP страницы — 1,8 секунды. Проект работает стабильно без сбоев.

Что входит в разработку сайта на 1С-Битрикс

Каждый проект включает полный комплект документации и артефактов, исключающий потерю знаний после передачи.

• Техническое задание — user stories, диаграммы инфоблоков, схемы интеграций.
• Исходный код в Git — с историей коммитов, тегами релизов, правилами ветвления.
• Административная документация — описание кастомных компонентов, инструкции по разворачиванию, перечень агентов и событий.
• Обучение сотрудников — до 3 часов вебинара: панель управления, работа с заказами, настройка цен. Записываем, чтобы можно было пересмотреть.
• Доступ к staging на время разработки — тестируете сами до деплоя на продуктив.
• Гарантийная поддержка — исправление ошибок кода в течение 30 дней после запуска. Постгарантийные абонентские пакеты с SLA (реакция 2 часа, решение 8 часов).

Наш процесс и технологии

Стек: вёрстка mobile-first, тестируем на физических устройствах (iPhone, iPad, Android). Используем BrowserStack для Safari на iOS. Производительность — LCP < 2,5 с, FID < 100 мс, CLS < 0,1. Включаем композитный сайт (composite), CDN, тегированное кэширование, WebP/AVIF, lazy loading. SEO — Schema.org через JSON-LD, автогенерация sitemap.xml модулем seo, canonical и hreflang для мультиязычных версий. robots.txt закрываем /bitrix/ от индексации. CI/CD — Git, автодеплой через GitLab CI, staging. Миграции базы — модуль sprint.migration с версионированием.

Процесс работы:

1. Аналитика — изучаем конкурентов, собираем требования, рисуем прототипы в Figma. На выходе — ТЗ с user stories.
2. Дизайн — UI/UX с дизайн-системой. Компоненты переиспользуются.
3. Разработка — пишем компоненты с кастомными шаблонами в local/templates/. Бизнес-логику выносим в модули local/modules/.
4. Тестирование — функциональное, кроссбраузерное, нагрузочное (до 1000 запросов). Критичные баги исправляем до запуска.
5. Запуск — деплой на прод, мониторинг через UptimeRobot, алерты в Telegram. Устраняем первые 48 часов.

Интеграции, мультиязычность и редизайн

• Полная локализация через языковые файлы lang/ и механизм SITE_ID. hreflang для каждой версии. Региональные версии с разными ценами и контентом — определение по IP (main.geo) или ручной выбор. Мультидоменность — единое управление несколькими доменами.

• Редизайн без потери позиций: аудит производительности (PageSpeed, WebPageTest), SEO (Screaming Frog). Новый шаблон в local/templates/ с сохранением URL-структуры. 301-редиректы только если URL меняется существенно. Обновление ядра, переход на D7 ORM, реструктуризация инфоблоков, миграция через sprint.migration с Git.

Гарантия и поддержка

Мы работаем с 1С-Битрикс 12+ лет, реализовали 500+ проектов. В штате сертифицированные разработчики. Фиксированная стоимость в договоре — без сюрпризов. Гарантийный период покрывает ошибки кода. После — абонентские пакеты с SLA (время реакции — 2 часа, решение — 8 часов). Мониторинг доступности 24/7, алерты в Telegram. Получите консультацию и предварительный расчёт: свяжитесь с нами через форму на сайте или напишите в чат — ответим в течение часа. Закажите разработку под ключ — мы спроектируем инфоблоки, интегрируем 1С и разгоним каталог. Если уже есть сайт на другой CMS — закажите аудит производительности и миграцию на Битрикс.