Содержание:

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

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

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

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

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

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

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

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

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

• Размер

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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