Быстрый старт

Эта страница описывает самый короткий путь от установки модуля до работающего блока «До/После» на сайте.

Для первого запуска удобнее использовать демонстрационный инфоблок. После того как принцип работы станет понятен, можно заменить демо собственными данными.

[Скриншот 1: пример готового блока сравнения на публичной странице]

Вариант 1. Первый запуск через демо-инфоблок

1. При установке модуля оставьте включённой опцию создания демо-данных.
2. Создайте или откройте страницу, на которой нужно разместить сравнение.
3. Добавьте компонент «Сравнение До/После — из инфоблока (табы)».
4. В группе «Источник данных» выберите тип демонстрационных инфоблоков и инфоблок «Сравнение Фото До/После».
5. Укажите количество элементов, например 4.
6. Оставьте остальные параметры по умолчанию.
7. Сохраните страницу и откройте её в публичной части.

Если выбрано несколько элементов, под или рядом с основным изображением появятся круглые иконки. Они переключают активную пару «До/После».

Вариант 2. Одна пара без инфоблока

Если требуется вывести только один пример, используйте компонент «Сравнение До/После — ручной режим».

1. Добавьте ручной компонент на страницу.
2. В поле MANUAL: Before укажите ID файла или путь к изображению «До».
3. В поле MANUAL: After укажите изображение «После».
4. При необходимости задайте подпись.
5. Выберите режим overlay или bar.
6. Настройте стартовую позицию.
7. Сохраните страницу.

[Скриншот 2: основные поля ручного компонента Before, After, Label и Mode]

Что пользователь увидит на сайте

В режиме overlay пользователь двигает разделитель непосредственно по фотографии. Левая и правая части показывают разные изображения. В центре разделителя находится круглая ручка; при наличии логотипа он отображается внутри неё.

В режиме bar управляющий ползунок вынесен под изображение. Положение границы всё равно изменяется от 0 до 100 процентов.

Какие картинки лучше использовать

Для наглядного результата желательно, чтобы изображения «До» и «После»:

• показывали один и тот же объект;
• были сняты примерно с одного ракурса;
• имели близкое соотношение сторон;
• не отличались лишними рамками и полями;
• были достаточного качества для выбранного размера вывода.

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

Что настроить в первую очередь

Для большинства сайтов достаточно проверить следующие параметры:

• Показывать заголовок и Текст заголовка;
• Показывать подпись;
• Показывать бейджи До/После;
• Режим по умолчанию;
• Стартовая позиция;
• Preset ресайза;
• Позиция иконок — если используется несколько элементов;
• На мобилке иконки всегда снизу.

Глобальные настройки или настройки компонента

Если на сайте будет несколько блоков в одном стиле, сначала настройте общие значения на странице модуля. Затем при размещении компонентов меняйте только то, что должно отличаться на конкретной странице.

Уже сохранённый компонент может хранить свои значения. Поэтому при изменении глобальных настроек обязательно проверьте ранее размещённые блоки.

Минимальная проверка перед публикацией

1. Разделитель двигается от одного края до другого.
2. Подписи «До» и «После» соответствуют сторонам изображения.
3. При нескольких элементах иконки переключают пары.
4. На мобильном устройстве блок не выходит за ширину страницы.
5. Текст и логотип хорошо видны на используемых фотографиях.

[Скриншот 3: мобильный вид блока с иконками под изображением]