Ползунок сравнения изображений Elementor: как создать демонстрацию до и после

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

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

Что охватывает это руководство:

• Что такое ползунок сравнения изображений
• Кому нужен слайдер до/после
• Что вы получаете с бесплатным виджетом
• Как создать один (шаг за шагом)
• Советы для лучшего сравнения
• Устранение распространенных проблем
• Мастер-аддоны против альтернатив
• Почему Master Addons
• Начинайте
• Часто задаваемые вопросы

Что такое ползунок сравнения изображений?

Ползунок сравнения изображений накладывает два изображения друг на друга с драгируемым делителем между ними. пользователи скользят его влево и вправо (или вверх и вниз), чтобы открыть одно изображение над другим. вы устанавливаете изображение “before” и изображение “after” в редакторе, а виджет обрабатывает остальное.

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

Кому нужен слайдер до и после в Elementor?

Любой, кто хочет показать трансформацию, Это варианты использования, с которыми я сталкиваюсь чаще всего:

Веб-дизайнеры и агентства

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

Фотографы и фоторедакторы

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

Магазины электронной коммерции

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

Недвижимость и архитектура

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

Цифровые маркетологи

Аналитические панели, производительность рекламы, диаграммы трафика веб-сайта.Показать “до работы с us” и “после работы с us” результаты с ползунком перетаскивания для сравнения. работает лучше, чем вставлять два скриншота в тематическое исследование.

Мастер-аддоны Виджет сравнения изображений: что вы получаете

Есть несколько способов добавить a до после слайдера в Элементоре. Некоторым требуются автономные плагины, некоторым нужен собственный код, а некоторые заблокированы за подписками на премиальные дополнения. Основные дополнения включают в себя Виджет сравнения изображений в бесплатной версии. стоит отметить, потому что большинство конкурирующих дополнений (Ultimate Addons, PowerPack, The Plus Addons) поместили эту функцию за платным доступом.

Виджет включает в себя

• Интеграция с собственными элементами: Перетащите с панели Элементор. Нет коротких кодов, нет отдельной страницы настроек. Установите с Репо плагина WordPress и он сразу же появляется в вашем списке виджетов.
• Бесплатно использовать: Виджет сравнения изображений является частью бесплатной версии. лицензия Pro не требуется.
• Несколько стилей управления: Ручка ползунка (перетаскивание), движение мыши (наведение) или щелчок. поддерживаются как горизонтальные, так и вертикальные ориентации сравнения.
• Пользовательские этикетки: Измените текст “Before” и “After” на все, что захотите, на любом языке.Цвета этикеток, типографика и позиционирование - все это регулируется.
• Отзывчивый: Работает на десктопе, планшете, мобильном. на мобильных устройствах работают жесты касания и свайпа.

Мастер Аддоны имеет 80+ виджетов и расширений итого. виджет сравнения изображений - это тот, который часто появляется в проектах целевой страницы и портфолио.

Как создать ползунок "До после" в Elementor (шаг за шагом)

Прежде чем начать, вам нужно и то, и другое Элементор и Master Addddons установлены и активированы. оба бесплатны. Перейти к Плагины > Добавить новое, поиск каждого имени плагина, установка и активация.

Шаг 1. Включите виджет сравнения изображений

Виджет сравнения изображений включен по умолчанию. если вы отключили некоторые виджеты, чтобы сохранить обедненность панели, проверьте, что она все еще включена. Перейти к Основные дополнения > Дополнения и расширения на панели управления WordPress и подтвердите, что сравнение изображений включено. The Документация по сравнению изображений имеет полную информацию о настройке. пока вы находитесь на этой панели управления, вы можете заметить другие виджеты, которые стоит включить, например Анимированный заголовок или Галерея Слайдер.

Шаг 2: Откройте страницу в Elementor

Создать новую страницу или открыть существующую с Elementor. я создал свежую целевую страницу для этого руководства, но ползунок сравнения падает в любую существующую страницу таким же образом.

Шаг 3: Добавьте виджет сравнения изображений

На панели Элементор слева выполните поиск по запросу “Image Comparison” (рядом с ним вы увидите значок Главные Аддоны).Перетащите виджет на свою страницу туда, где вы хотите, чтобы появился ползунок.

Шаг 4. Загрузите изображения до и после

Щелкните виджет, и вы увидите два поля загрузки изображения: одно для изображения перед, одно для изображения после. Загрузите оба, и предварительный просмотр немедленно обновится с помощью дескриптора делителя в центре.

Быстрый хедз-ап: оба изображения должны быть одинаковыми размерами. Если один 1200×800, а другой 900×600, макет будет смотреть от. Обрезать их до того же размера перед загрузкой. это сбивает людей вверх больше, чем что-либо другое.

Шаг 5: Настройте текст метки

Метки по умолчанию говорят “Before” и “After,” но вы можете изменить их на что угодно.Продажа продукта?Использовать “Without” и “With.” Показать обновление?Попробовать “Day 1” и “Finished.” Поля этикеток принимают любой текст, включая неанглийские символы, поэтому локализация не проблема.

Шаг 6: Настройка настроек ползунка

Под вкладкой Содержимое есть еще несколько настроек, которые стоит настроить:

• Ориентация: Переключиться между горизонтальным (левым/правым) и вертикальным (верхним/нижним) сравнением Горизонтальный является по умолчанию и работает для большинства случаев.
• Коэффициент видимости: Управляет, где начинается делитель. установите его на 50% для центрированного разделения или сдвиньте его, чтобы изначально отображать больше одного изображения.
• Накладка: Включить или отключить наложение цветов на изображения.
• Тип ручки: Выберите между перетаскиванием мыши или наведением мыши для сравнения. перетаскивание требует от посетителя щелчка и перетаскивания. Наведение показывает движение мыши, которое кажется более плавным, но может дезориентировать некоторые макеты.

Шаг 7: Создайте стиль ползунка

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

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

Советы по лучшему сравнению изображений

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

Соответствуйте размерам изображения

Я уже упоминал об этом, но это ошибка, которую я вижу чаще всего Если ваше изображение до этого равно 1920×1080, а ваше после изображения равно 800×600, ползунок заставит их выровняться, и результат будет выглядеть искаженным. перед загрузкой обрезайте оба изображения до одинаковых размеров пикселей. каждый раз.

Сохраняйте состав похожим

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

Центр трансформации

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

Не переусердствуйте

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

Добавьте CTA поблизости

Если сравнение находится на странице продаж или портфолио, опустите кнопку вызова к действию прямо под ним. Кто-то, кто только что протащил через впечатляющее преобразование уже занят. “Получите бесплатную кнопку Quote” или “Shop Now” кнопку прямо здесь имеет тенденцию хорошо конвертировать.

Устранение неполадок: когда ползунок не ведет себя

Большинство установок просто работают, но некоторые вещи сбивают людей с толку Вот как исправить те, о которых меня спрашивают.

• Ползунок не появляется. Девять раз из десяти виджет отключался Перейти к Основные дополнения, затем дополнения и расширения, и подтвердить сравнение изображений переключается на Если он включен и все еще отсутствует, очистите свой кэш (LiteSpeed, WP Rocket или Cloudflare), чтобы старая копия страницы перестала обслуживаться.
• Ручка не будет тащиться. Это почти всегда конфликт JavaScript или плагин кэширования, объединяющий или откладывающий сценарий виджета Исключить сценарии Master Addons из JS комбинировать и откладывать, очистить кэш, и снова протестировать.
• Два изображения выглядят растянутыми или смещенными. Разные размеры Обрезать и до одинаковых размеров пикселей, и повторную загрузку, это единственная самая распространенная причина.
• Он работает на рабочем столе, но не на мобильном. Убедитесь, что ни один родительский контейнер не имеет скрытого от переполнения стиля, обрезающего сенсорную область, и что над ползунком ничего не сидит, захватывая свайп. Touch работает вне коробки, поэтому сбой свайпа почти всегда является проблемой макета или z-индекса.
• Этикетки до и после обрезаются. Сократите текст метки или уменьшите размер шрифта метки на вкладке "Стиль"; очень длинные метки могут выплескиваться за пределы изображения на небольших экранах.

Если ни один из них не исправит это, опубликуйте подробную информацию в Форум поддержки Master Addons с вашей темой и активными плагинами обычно быстро фиксируется конфликт.

Виджет сравнения изображений и альтернативы

Краткий обзор того, как Master Addons сравнивается с другими ползунок сравнения изображений WordPress варианты Элементора:

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

Почему мастер-дополнения для сравнения изображений?

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

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

V3.0.0 заметно быстрее старых версий, плагин активно поддерживается, работает он на более чем 40 000 сайтах WordPress. Мастер Аддоны Про добавляет конструктор виджетов, режим White Label и поддержку премиум-класса, если они вам нужны в будущем.

Начать

Настройка a ползунок сравнения изображений до и после в Elementor занимает пару минут с Мастер-аддонами. нет кода, нет премиум-приобретения аддона, нет отдельного плагина сравнения для установки. виджет бесплатен, работает с любой настройкой Elementor, и настройка охватывает все, от текста метки до цвета разделителя.

Скачать Master Addons бесплатно и попробуйте виджет сравнения изображений в вашем следующем проекте. Если вам нужно больше в ваших сборках Elementor, проверьте планы Про.

Связанное чтение: Учебное пособие по карусели Elementor Image | Плагины фильтруемой галереи Elementor | 25 методов обработки текста элементара поверх изображения

Предпочитаете смотреть Вот вам быстрый проход по Элементору:

Часто задаваемые вопросы