Логотип, иконки и мобильная версия

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

Логотип на разделителе

В overlay-режиме в центре разделителя находится круглая ручка. В неё можно поместить логотип.

Логотип может быть задан на трёх уровнях:

1. глобально в настройках модуля;
2. в параметрах конкретного компонента;
3. для конкретного элемента инфоблока или ручной пары.

Чем конкретнее уровень, тем выше его приоритет.

[Скриншот 1: overlay с логотипом внутри круглой ручки]

Режим логотипа компонента

Параметр «Режим логотипа по умолчанию» нужен, чтобы явно управлять наследованием.

Глобальный

Берётся значение из страницы настроек модуля. Локальное поле компонента не используется.

Отключить

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

Значение

Используется то, что указано в поле логотипа компонента.

Как раньше

Сохраняется совместимое поведение: если локальный логотип пустой, берётся глобальный.

Цвет круга

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

Иконки переключения

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

Если свойство ICON отсутствует, используется уменьшенная версия изображения «После».

Положение иконок

• bottom — под изображением;
• top — над изображением;
• left — вертикально слева;
• right — вертикально справа.

Для большой подборки чаще удобнее bottom или top, поскольку кнопки могут переноситься на следующую строку.

Слева и справа кнопки располагаются вертикально без отдельного скролла. Поэтому не стоит выводить слишком много элементов в таком варианте.

Размер и отступ

Размер задаёт диаметр кнопки, а GAP — расстояние между кнопками. Если иконки выглядят слишком плотными на мобильном устройстве, уменьшите размер или отступ.

Retina-множитель

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

[Скриншот 2: четыре варианта положения иконок — top, bottom, left, right]

Мобильное перемещение вниз

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

• основное сравнение идёт первым;
• иконки переходят под него;
• иконки размещаются горизонтально и могут переноситься.

Это предотвращает ситуацию, когда вертикальная колонка иконок забирает слишком много ширины на телефоне.

Брейкпоинт

По умолчанию используется 768 px. Если шаблон сайта переключается на мобильную версию раньше или позже, значение можно синхронизировать с его сеткой.

Ручной компонент

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

Практические рекомендации

• для 2–6 элементов используйте bottom;
• left/right подходят для короткой подборки;
• не делайте иконки слишком мелкими для касания пальцем;
• оставляйте мобильное перемещение вниз включённым;
• проверяйте контраст активной рамки иконки на фоне сайта.

[Скриншот 3: мобильная раскладка с иконками внизу]