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

Посетитель заходит на сайт дизайн-студии. Он оценивает портфолио за 3–7 секунд. Если загрузка медленная, а анимации дёргаются, клиент уходит к конкурентам. Одна студия интерьеров теряла 40% заявок из-за долгой загрузки портфолио. Мы перенесли их сайт на 1С-Битрикс. Теперь загрузка занимает 0.4 секунды, фильтрация проектов происходит без перезагрузки.

Мы реализуем проекты под ключ, гарантируя производительность и удобство управления. Наши инженеры имеют многолетний опыт работы с Битрикс и реализовали более 50 проектов для дизайн-студий. В основе каждого решения — тегированное кэширование, оптимизация изображений, интеграция с CRM.

Как мы разрабатываем сайт дизайн-студии на 1С-Битрикс

Разработка начинается с анализа задач и бренда. Мы проектируем информационную архитектуру, создаём дизайн-концепцию и утверждаем её с клиентом. Затем — вёрстка, интеграция с Битрикс, настройка кэширования и SEO. Завершаем тестированием и переносом на продакшн. Весь процесс занимает от 30 до 60 рабочих дней. Получите консультацию специалиста, чтобы обсудить ваш проект.

Архитектура портфолио на инфоблоках

Фильтрация портфолио без перезагрузки

Фильтрация по типу проекта работает через AJAX. Используется компонент bitrix:catalog.section с отключённой постраничной навигацией. При клике на категорию JavaScript отправляет запрос к ajax.php с параметрами фильтра. Компонент возвращает HTML-фрагмент, который подставляется в контейнер портфолио.

Параметры фильтрации передаются через $arFilter: PROPERTY_TYPE, >=PROPERTY_YEAR, <=PROPERTY_YEAR, PROPERTY_TAGS (логическое ИЛИ). Кэширование настраивается тегированным, привязанным к инфоблоку. Согласно документации 1С-Битрикс, тегированный кэш автоматически сбрасывается при изменении элементов инфоблока. При добавлении нового проекта кэш сбрасывается через обработчик события OnAfterIBlockElementUpdate.

Бриф-форма с загрузкой файлов

Форма создаётся через модуль form. Поля: имя, email, телефон, тип проекта, описание, загрузка файлов (до 5 файлов, до 20 МБ каждый, форматы PDF, JPG, PNG, AI, PSD). Заявка создаёт лид в CRM Битрикс24 через REST API. Менеджер получает уведомление в Telegram. Закажите разработку, и мы подготовим индивидуальное предложение.

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

Команда дизайнеров и блог

Раздел «Команда» реализуется через инфоблок «Сотрудники» с привязкой к проектам. На карточке: фото, специализация, стаж, ссылки на Behance/Dribbble и миниатюры последних трёх проектов. Инфоблок «Статьи» содержит SEO-свойства: META_TITLE, META_DESCRIPTION, автор. Используется компонент news.detail с микроразметкой Article и Open Graph.

Почему CSS Grid лучше JS-библиотек для масонри?

Классический masonry на JavaScript (Masonry.js, Isotope) создаёт лишнюю зависимость и требует пересчёта при каждом изменении DOM. Современный подход — CSS Grid с grid-template-rows: masonry (поддержка Firefox) или fallback на column-count для остальных браузеров. Это в 2-3 раза быстрее загрузки на мобильных устройствах.

Для 1С-Битрикс шаблон компонента bitrix:news.list генерирует контейнер с классом .portfolio-grid. Стили задают колоночную раскладку: Desktop (1200px+) — 3 колонки с gap: 24px, Tablet (768–1199px) — 2 колонки с gap: 16px, Mobile (<768px) — 1 колонка. Каждая карточка получает класс .portfolio-card с break-inside: avoid. Высота карточек варьируется — это создаёт эффект masonry.

IntersectionObserver для появления элементов

Анимация появления карточек при скролле реализуется через IntersectionObserver, а не через событие scroll. Алгоритм:

1. Все карточки при загрузке получают класс .portfolio-card--hidden с opacity: 0 и transform: translateY(40px).
2. Observer с threshold: 0.15 и rootMargin: "0px 0px -50px 0px" отслеживает пересечение.
3. При попадании в viewport карточка получает класс .portfolio-card--visible, запускающий CSS-transition: opacity 0.6s ease-out, transform 0.6s ease-out.
4. transition-delay рассчитывается динамически: (index % columnsCount) * 0.1s — создаёт каскадный эффект слева направо.

Критически важно: Observer создаётся один раз, а после срабатывания для конкретной карточки вызывается observer.unobserve(entry.target).

CSS-переходы при фильтрации

При смене категории переход выполняется в три фазы:

1. Fade-out: контейнер .portfolio-grid получает opacity: 0 через CSS-transition длительностью 200ms.
2. Замена контента: по событию transitionend в контейнер подставляется HTML из AJAX-ответа.
3. Fade-in: после вставки DOM через requestAnimationFrame контейнер возвращает opacity: 1.

Дополнительно: при фильтрации URL обновляется через history.pushState() с параметром ?type=interior, что позволяет делиться ссылкой на отфильтрованное портфолио.

Оптимизация изображений

Для rich-media портфолио критична оптимизация. В шаблоне используется loading="lazy" для ленивой загрузки. Обложки генерируются в трёх размерах через CFile::ResizeImageGet(): Thumbnail (400×300) для сетки, Medium (800×600) для превью при hover, Full (1920×auto) для детальной страницы. Формат WebP генерируется модулем «Оптимизация изображений» или через обработчик OnBeforeIBlockElementUpdate с конвертацией через GD/Imagick.

Сравнение редакций Битрикс для сайта дизайн-студии

Свяжитесь с нами, чтобы обсудить подходящую редакцию для вашего проекта.