Модуль дает возможность создавать отдельные пары изображений, задавать для каждой пары собственный эффект отображения и выводить нужный блок в любом текстовом контенте сайта через простой маркер вида #COMPARE_1#. Это удобно для новостей, статей, лендингов, услуг, кейсов и любых других разделов сайта без ручной верстки и без настройки сложных компонентов.
В модуле доступны несколько эффектов показа: горизонтальный ползунок, вертикальный ползунок, затухание, показ двух изображений рядом и режим наведения. Также предусмотрены настройки внешнего вида: цвет ползунка, размеры элементов, скругления, подписи и водяной знак поверх изображения. Модуль легко встраивается в структуру сайта и позволяет быстро создавать наглядные продающие блоки сравнения.
Преимущества
- Быстрый вывод на сайте через маркер #COMPARE_ID#
- Несколько эффектов сравнения изображений
- Удобное управление парами через админку Битрикс
- Поддержка водяного знака
- Настройка внешнего вида без правки кода
- Подходит для контентных разделов и продающих страниц
- Удобен для редакторов и контент-менеджеров
Для кого подходит
- косметология и медицина
- строительство и ремонт
- автосервисы и детейлинг
- мебель и интерьер
- клининг
- дизайн и реставрация
- любые сайты, где нужно показывать результат «до / после»
Инструкция
1. Установка модуля
- Установите модуль в систему Битрикс.
- После установки откройте раздел модуля в административной панели.
- Перейдите в список пар «До / После».
2. Создание новой пары
- Нажмите Добавить пару.
- Заполните поле Название.
- Выберите нужный эффект отображения.
- При необходимости задайте сортировку.
- Загрузите изображение До.
- Загрузите изображение После.
- Сохраните запись.
3. Вывод на сайте через маркер
После сохранения пара получает ID. Для вывода блока используйте маркер:
#COMPARE_1#
Где 1 — это ID нужной пары.
Маркер можно вставлять:
- в новости
- в статьи
- в описания услуг
- в HTML-редактор Битрикс
- в любые текстовые поля, которые выводятся на сайте
Эффект подставляется автоматически из настроек самой пары.
4. Работа через сниппет
В визуальном редакторе Битрикс доступен сниппет модуля.
С его помощью можно быстро вставить шаблон маркера в текст, а затем заменить ID на нужный.
Пример: #COMPARE_3#
5. Настройки модуля
В настройках доступны:
- включение и отключение модуля
- выбор цвета ползунка
- размер ползунка
- фон подписей До / После
- скругление блока
- включение водяного знака
- выбор типа водяного знака: текст или изображение
- позиция водяного знака
- прозрачность и размеры watermark
6. Водяной знак
Модуль поддерживает один водяной знак поверх всей пары изображений.
Можно использовать:
- текстовый watermark
- изображение watermark
Это удобно для защиты фото и брендирования контента.
7. Если блок не выводится
Проверьте:
- что пара активна
- что у записи загружены оба изображения
- что в тексте указан корректный ID маркера
- что очищен кеш Битрикс после изменений
Если пара не найдена, на сайте выводится сообщение:
- Сравнение не найдено
- Короткий текст для карточки модуля
Модуль для Битрикс, который позволяет выводить интерактивные блоки сравнения изображений «До / После» с несколькими эффектами, водяным знаком и удобной вставкой через маркер #COMPARE_ID#.