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

Страница «Настройки» задаёт базовые значения, которые используются компонентами сравнения. Её удобно настроить один раз под дизайн сайта, а затем менять отдельные параметры только там, где конкретный блок должен отличаться.

[Скриншот 1: верхняя часть страницы глобальных настроек]

Визуальные

Показывать заголовок (h2)

Разрешает вывод общего заголовка над блоком. Чтобы заголовок действительно появился, дополнительно должен быть заполнен его текст.

Текст заголовка

Заголовок по умолчанию. Например: «До и после», «Результаты работы», «Сравните результат».

Если на разных страницах нужны разные заголовки, глобальное поле можно оставить пустым и задавать TITLE в каждом компоненте.

Показывать подпись (LABEL)

Управляет подписью непосредственно над активной парой. Для инфоблока берётся свойство LABEL, а при его отсутствии — название элемента.

Бейджи

Показывать бейджи До/После

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

Текст бейджа До / После

По умолчанию используются «До» и «После». При необходимости можно заменить их на «Было»/«Стало», «Исходник»/«Результат» или другие короткие обозначения.

Поведение

Режим по умолчанию

overlay — линия и круглая ручка поверх изображения. bar — управляющий ползунок под изображением.

Стартовая позиция по умолчанию

Число от 0 до 100. Для универсального варианта рекомендуется 50. Значение используется в инфоблоке, если у элемента не заполнен START_POS, и в ручном режиме, если ручная позиция оставлена пустой.

Логотип по умолчанию

Можно указать ID файла или путь/адрес изображения. Логотип используется в круглой ручке overlay, если конкретный элемент или ручной набор не задаёт собственный логотип.

Рядом с полем доступна кнопка выбора файла из файловой системы сайта.

Разделитель

Цвет кружка

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

Цвет разделительной линии

Цвет вертикальной линии в overlay-режиме. Подбирайте его с учётом типичных фотографий: на светлых изображениях белая линия может быть малозаметна, тогда лучше использовать более контрастное значение.

Толщина разделительной линии

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

[Скриншот 2: разделы «Поведение», «Разделитель» и «Картинки/ресайз»]

Картинки/ресайз

Preset ресайза

Доступны:

920×520;
920×920;
1200×675;
CUSTOM;
Без ресайза.

Выбирайте размер, близкий к фактической ширине контентной зоны. Слишком большой размер увеличивает объём загрузки, слишком маленький может выглядеть размыто на больших экранах.

Custom width / height

Используются только при выборе CUSTOM.

Метод ресайза

PROPORTIONAL сохраняет пропорции при уменьшении в заданные границы. EXACT формирует точный размер, при необходимости кадрируя изображение.

CSS aspect-ratio

Управляет пропорциями видимой области блока. Пример: 920/520. Если поле пустое, модуль берёт отношение из выбранного рабочего размера. При отключённом ресайзе используется резервная пропорция компонента.

WebP качество

Число от 0 до 100 для создаваемой WebP-версии локальных изображений. Значение по умолчанию — 82, обычно оно даёт разумный баланс качества и размера.

Иконки

Позиция иконок

Доступны bottom, top, left и right. Параметр имеет смысл прежде всего для компонента из инфоблока, где элементов несколько.

Размер иконок

Размер круглой кнопки в пикселях. По умолчанию 56.

Отступ между иконками

Расстояние между кнопками. По умолчанию 16 пикселей.

Retina-множитель

Определяет, какого размера подготавливается исходная миниатюра относительно отображаемого размера. При размере 56 и множителе 2 картинка для иконки подготавливается с запасом для экранов высокой плотности.

Мобилка

На мобилке иконки всегда снизу

Если включено, при узком экране иконки переводятся под изображение, даже если на компьютере они находятся слева, справа или сверху.

Брейкпоинт мобилки

Ширина экрана в пикселях, начиная с которой применяется мобильная перестановка. Значение по умолчанию — 768.

[Скриншот 3: разделы «Иконки» и «Мобилка»]

Как сохраняются настройки

Доступны стандартные кнопки «Сохранить» и «Применить». После успешной записи под кнопками появляется сообщение о сохранении.

Важно о приоритете

Глобальные настройки — это базовые значения. Параметры конкретного компонента имеют приоритет, если они уже записаны в его настройках.

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