Skip to main content

Используем для сравнения до после специальный виджет 2844114

Используем для сравнения до_после специальный виджет

ID: 2844114 URL: https://intercom.help/platformalp/ru/articles/2844114-используем-для-сравнения-до-после-специальный-виджет Updated: 1707330453

Содержание:

1.Настройки виджета
2.Особенности использования виджета «Сравнение до/после»

Виджет «Картинка до и после » сможет показать 2 изображения в одном виджете одновременно и позволяет их сравнивать до и после.

Как установить виджет?

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

📝Совет: для наиболее гармоничного результата рекомендуется использовать изображения одного размера и пропорций.
​

1. Настройки виджета

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

Вкладка «Вид»

На данной вкладке доступны следующие настройки:

  • Размер

Подвигав ползунок, мы можем изменить размер виджета по ширине:

  • Цвет ползунка

Меняем цвет подвижного элемента на определенный или задаем глобальный цвет:

  • отображение меток «До» и «После»

Если надписи нам не нужны, то мы можем их спрятать, поставив галочку.

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

Вкладка «Управление»

Данная вкладка включает настройку «Управление ползунком», выберем один из двух доступных вариантов:

  • При наведении. Ползунок будет автоматически следовать за мышкой;

  • При перетаскивании. Для перемещения линии необходимо нажать на ползунок и переместить его в нужную сторону.

2. Особенности использования виджета «Сравнение до/после»

  • Виджет «Картинка До и После» работает в том числе и на смартфонах. Размер изображения меняется в зависимости от ширины устройства;

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

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

  • При использовании виджета «До и После» в слайдерах или вкладках для корректной работы виджета обязательно должна быть включена «Ленивая загрузка» на странице. Подробнее о том, что такое «Ленивая загрузка» можно узнать в статье.

Back to top