...
WEB и WordPress новости, темы, плагины. Здесь мы делимся советами и лучшими решениями для сайтов.

Простой способ добавить слайдер «До» и «После»

43

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

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

Точно так же, как добавление эффекта параллакса на наши страницы делает ваш сайт современным, ползунок «до» и «после» мешает забыть, поскольку изображения могут рассказать больше, чем 1000 слов.

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

Оставайтесь с нами, чтобы узнать больше о:

Добавление слайдера «До» и «После» с помощью надстроек Qi для Elementor

Qi Addons for Elementor — это интуитивно понятный инструмент, который позволяет без особых усилий добавлять широкий спектр великолепных элементов на ваш сайт. Он поставляется с очень практичным и удобным интерфейсом, и как новички, так и опытные пользователи найдут его простым в использовании. Что особенно хорошо в Qi, так это тот факт, что, помимо множества полезных функций, он также предоставляет вам штрих современной элегантности.

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

Простой способ добавить слайдер «До» и «После»

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

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

Простой способ добавить слайдер «До» и «После»

Чтобы добавить ползунок сравнения «До/После», перетащите элемент Elementor в нужное место. Когда виджет добавлен, все настройки будут слева, а на вкладках «Содержимое» и «Стиль» находятся все параметры, связанные с ползунком.

Простой способ добавить слайдер «До» и «После»

Теперь вам нужно добавить изображения до и после на ползунок. Во-первых, мы добавляем изображение до — наведите указатель мыши на поле изображения, и появится опция «Выбрать изображение», или просто щелкните маленький значок плюса в середине поля.

Простой способ добавить слайдер «До» и «После»

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

Простой способ добавить слайдер «До» и «После»

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

Если вы хотите настроить, где на ползунке будет отображаться граница между изображением до и после, вы можете ввести желаемое значение смещения в поле. Значение по умолчанию — 50%, что означает, что граница по умолчанию находится прямо посередине изображения. Вот как может выглядеть ползунок, если вы отрегулируете смещение:

Простой способ добавить слайдер «До» и «После»

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

Простой способ добавить слайдер «До» и «После»

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

Простой способ добавить слайдер «До» и «После»

Вы также можете нажать на Цвет текста Nabdle, чтобы создать свой оттенок цвета для текста в круге, также выберите шрифт текста таким же образом. Наконец, вы также можете настроить цвет круга таким же образом.

Простой способ добавить слайдер «До» и «После»

Изучение дополнительных параметров

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

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

Простой способ добавить слайдер «До» и «После»

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

Простой способ добавить слайдер «До» и «После»

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

Простой способ добавить слайдер «До» и «После»

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

Простой способ добавить слайдер «До» и «После»

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

Простой способ добавить слайдер «До» и «После»

Параметры на вкладке «Маска» очень удобны. Здесь вы можете настроить отображение ползунка в разных формах — круг, цветок, эскиз, треугольник, капля, шестиугольник или даже добавить пользовательскую форму. Также можно настроить размер и положение выбранной формы.

Простой способ добавить слайдер «До» и «После»

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

Простой способ добавить слайдер «До» и «После»

Вот так выглядит слайдер на странице после того, как мы его настроили под свои нужды:

Простой способ добавить слайдер «До» и «После»

Для получения дополнительной информации посмотрите это видео:

В заключение

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

Источник записи: wpklik.com

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