Особенности плагина Divi: Divi Sensei Before After Slider

Ползунки «До» и «После» - отличный способ дать посетителям возможность сравнить два изображения. Как следует из названия, это могут быть изображения до и после того, как что-то было изменено, например, потеря веса, отретушированное изображение, украшенная комната, раскрашенная машина и т. Д. Конечно, они полезны для гораздо большего, чем раньше. и после фото. Их можно использовать для сравнения графики, продуктов, мест отдыха и многого другого.

В этой статье мы рассмотрим Divi Sensei Before and After Slider, модуль слайдера до и после для Divi Builder, посмотрим, что он может делать, и поможем вам решить, нужен ли вам этот сторонний плагин в вашем Divi. ящик для инструментов.

Divi Sensei до и после модуля слайдера

Загрузите и установите плагин Divi Sensei Before and After как обычно. Три - это не настройки, которые нужно пройти. После того, как вы загрузите и активируете плагин, вы увидите новый модуль, добавленный в Divi Builder под названием Sensei Before and After Slider.

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

Давайте посмотрим на функции и параметры слайдера. Для этих примеров я использую изображения с Unsplash.com.

Вкладка Content

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

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

Вкладка "Дизайн"

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

Слайдер

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

Этикетки

Для меток вы можете настроить их всегда или только при наведении курсора, а также настроить фон и шрифты. Цвета фона включают сплошные цвета и настройки прозрачности. Вы можете настраивать фон индивидуально, но это не позволяет настраивать цвета текста индивидуально. Вы также можете выбрать шрифты, изменить их размеры, стиль, выравнивание, высоту строки, добавить тень и т. Д. Line-height устанавливает размер фона.

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

Оверлей

Оверлей включен по умолчанию. Вы можете отключить его, настроить цвет и прозрачность. Цвет по умолчанию - черный с непрозрачностью 50%.

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

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

Divi Sensei: примеры слайдеров до и после

Давайте рассмотрим несколько примеров того, как можно использовать слайдер и как они выглядят в макетах Divi. Я использую изображения из Unsplash и те, которые доступны в бесплатных макетах Divi, встроенных в Divi. Я буду определять раскладки Divi, которые использую, когда иду.

Сравнение графики

Для этого я использовал элементы дизайна из пакета макетов Divi Video Game. Я отключил наложение, изменил элементы ползунка на зеленый и сделал так, чтобы метки отображались всегда. Фон для этикеток сплошной синий. Я увеличил размер шрифта, изменил цвет, использовал семейство шрифтов Rubik, сделал средний вес шрифта и сделал их заглавными. Престижность, если вы владели этими игровыми системами или играли в них и знаете, почему этого выдуманного сравнения графики не существует.

Вот как это выглядит в макете. Он отлично подходит для сравнения, как этот макет графики двух разных игровых автоматов.

Услуги до и после портфолио

Этот пример имитирует идею комнаты до и после ремонта. Когда два изображения имеют разные размеры, он будет использовать размер большего изображения, а меньшее изображение покажет пробел. Он разместит их высоту или ширину одинаково, а остальное заполнит как пустое пространство. В этом примере изображение справа короче, чем изображение слева. Хотя изображения одного размера работают лучше, они по-прежнему хорошо работают с изображениями, близкими к одному размеру.

Я добавил цвета и шрифты из пакета макетов Home Improvement. Вот как это выглядит внутри части макета.

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

Для справки, вот изображение с перемещенной ручкой, чтобы показать больше изображения после.

Сравнение продуктов

В этом примере я заменяю три изображения чая в макете «Чайный магазин» на 3 ползунка DS B&A. Я использую цвета из макета для кнопок и элементов управления ползунком. Средний ползунок установлен в вертикальное положение, чтобы отличаться. В наложении используется цвет из макета с уменьшенной непрозрачностью.

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

Сравнение локаций

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

Вот как это выглядит в пакете макетов Siteseeing с использованием цветов макета. Это хороший пример того, что два изображения не обязательно должны быть до и после одного и того же или даже похожими вещами. Это хороший способ показать места проведения свадеб, места для отдыха и т. Д., Чтобы помочь покупателям выбрать между ними (или сделать выбор более сложным, но я не рекомендую это делать).

Покупка

Вы можете приобрести Divi Sensei Before and After Slider на торговой площадке Divi. Стоимость составляет 5 долларов за неограниченное использование веб-сайта и 1 год поддержки и обновлений. Эта цена включает 30-дневную гарантию возврата денег.

Конечные мысли

Divi Sensei Before and After Slider - это простой модуль. Например, ползунок не имеет элементов управления шириной, а метки не включают границы, тени блоков, градиенты и т. Д., Но его настройки позволили легко подогнать стиль каждого макета, в который я его добавил. По цене и возможностям, уровень настроек имеет смысл, и я с легкостью смог получить желаемый дизайн.

Все элементы управления были интуитивно понятными, и я никогда не думал, что мне нужны инструкции. Вы даже можете использовать разные теги alt для изображений, чтобы улучшить SEO. Если вас интересует слайдер «до» и «после» для использования с вашими веб-сайтами Divi, стоит подумать о Divi Sensei Before and After Slider.

Ждем вашего ответа. Вы пробовали Divi Sensei Before and After Slider? Дайте нам знать, что вы думаете об этом, в комментариях ниже.

Лучшее изображение через Elvetica / shutterstock.com