Сравнение изображений До/После

Как работает сравнение «До/После» и для кого оно подходит

На сайтах, где нужно показать результат, одно изображение часто не передаёт всей картины. Решение «Сравнение изображений До/После» для 1С-Битрикс превращает статичные картинки в интерактивный инструмент. Клиент сам двигает ползунок или проводит пальцем по экрану, чтобы увидеть разницу между исходным состоянием и итогом. Это подходит для любых сфер, где важна наглядность: ремонт и дизайн интерьеров, кузовной ремонт авто, салоны красоты, клининг, медицинские услуги, ретушь фотографий, производство — везде, где нужно убедить, что работа сделана качественно.

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

Два режима работы: управление ползунком и перетаскивание

Решение предлагает два варианта интерактива, которые можно выбирать в зависимости от задачи. Режим Overlay — это наложение: пользователь проводит курсором или пальцем по изображению, и под «кистью» открывается второй снимок. Такой формат удобен для детального изучения, когда нужно показать мелкие изменения на крупном плане. Режим Bar — классический горизонтальный ползунок под картинкой. Посетитель тянет его влево-вправо, и изображение плавно меняется. Этот вариант привычен и интуитивно понятен даже тем, кто редко пользуется интернетом.

Оба режима работают на мобильных устройствах: адаптивное поведение автоматически подстраивает размер и чувствительность управления под экран смартфона. Никаких лишних скроллов или «залипаний» — всё плавно и отзывчиво.

Гибкая настройка внешнего вида и подписей

Внешний вид блока не привязан к единому шаблону. Вы можете менять заголовок, подписи, текст на бейджах «До» и «После», а также их расположение. Если нужно добавить логотип компании прямо на элемент управления — это делается в несколько кликов. Позиция, размер и отступы иконок-вкладок тоже регулируются. Всё это позволяет вписать блок в дизайн сайта, не вызывая ощущения чужеродного элемента.

Для каждого набора сравнения можно задать свои настройки. Например, на странице услуги «Чистка ковров» бейджи будут синими, а на странице «Ремонт кухни» — серыми. Или можно оставить единый стиль для всего сайта, а на конкретной странице переопределить цвета и шрифты. Гибкость настройки достигается без правки кода — через административную панель Битрикса.

Два способа размещения: для галерей и для лендингов

Решение работает в двух режимах, и выбор зависит от объёма контента. Если у вас портфолио с десятками примеров (дизайн-проекты, работы мастеров, результаты процедур), используйте компонент из инфоблока. Он позволяет вывести несколько наборов сравнения сразу, а переключение между ними организовано через иконки-табы. Посетитель видит список миниатюр, кликает по нужной — и блок подгружает соответствующую пару «До/После». Это удобно для каталогов и галерей, где важна навигация.

Если же нужен один конкретный пример (например, на лендинге услуги или на странице товара), используйте ручной режим. Вы загружаете два изображения без привязки к инфоблоку, настраиваете подписи и публикуете. Никакой лишней структуры — только быстрый результат. Оба способа поддерживают ресайз изображений по пресетам и конвертацию в WebP, если на сервере включена эта опция. Это ускоряет загрузку страницы и не нагружает сервер.

Почему это повышает конверсию и доверие

Пользователь не любит читать длинные описания, но охотно смотрит картинки. Когда он сам управляет процессом сравнения, он не просто видит результат — он его изучает. Это создаёт эффект «своими глазами»: сомнения рассеиваются, а доверие к компании растёт. Для бизнеса это означает больше заявок и меньше возвратов из-за неоправданных ожиданий.

Централизованное управление настройками позволяет обновить дизайн или добавить новый логотип сразу на все блоки сайта. А возможность переопределить параметры на конкретной странице даёт свободу для A/B-тестов и акций. В итоге вы получаете инструмент, который не требует постоянного внимания разработчика, но при этом адаптируется под любые маркетинговые задачи.