Оглавление
The Виджет сравнения изображений Master Addons позволяет вам бросить бесплатный ползунок "до" и "после" на любую страницу Elementor, без Elementor Pro и без дополнительной подписки на плагин. Вы устанавливаете основные надстройки, перетаскиваете виджет на свою страницу, загружаете два изображения, а посетители получают перетаскиваемую ручку, которая протирает между ними.
Это руководство проходит через каждую настройку: включение виджета, добавление его на страницу, правило размерности, которое сбивает почти всех с ног с первой попытки, ориентацию, видимое соотношение, тип ручки, стиль и что делать, когда ползунок плохо себя ведет на мобильном телефоне. подробнее о дизайнерских идеях до и после, как только механика щелкнет, см полное руководство по демонстрации до и после.
Что вам понадобится перед началом
- WordPress с установленным и активным Elementor. Достаточно бесплатной версии Elementor.
- Установлены и активны главные дополнения для Elementor. бесплатный план охватывает этот виджет. см руководство установки если плагин для вас новый.
- Два изображения обрезаны до одинаковых размеров пикселей. подробнее о том, почему в данный момент это имеет большее значение, чем ожидают люди.
Шаг 1. Включите виджет сравнения изображений
Master Addons поставляется с десятками виджетов, и не все из них загружаются по умолчанию при каждой установке. Перейти к Мастер-аддоны → Виджеты в вашей панели управления WordPress и подтвердите Сравнение изображений включается Если он не появляется на панели Элементор Элементы через мгновение, это почти всегда почему.
Шаг 2: Добавьте виджет на свою страницу
Откройте страницу с Elementor, выполните поиск по сравнению изображений на панели Elements (ищите фиолетовый значок MA) и перетащите его на свою страницу. Он загружается двумя изображениями-заполнителями и рабочим ползунком, поэтому вы можете увидеть макет, прежде чем коснуться одной настройки.
Шаг 3: Загрузите изображения до и после
Открыть Содержание вкладка, затем Изображения раздел. Имеет До вкладка и ан После вкладка, и каждый имеет свой собственный Выберите поле Изображение, Поле метки и Настройка Разрешение изображения Установите предыдущую фотографию на вкладке До, переключитесь на После и установите вторую фотографию. легко загрузить оба изображения на одну и ту же вкладку по ошибке, поэтому проверьте, какая вкладка активна, прежде чем выбрать изображение.
Введите короткую метку на каждой вкладке, если вам нужна надпись наложения, что-то вроде “Before” и “After,” или “Old Design” и “Redesign.”
Правило, которое всех сбивает с толку: соответствие размеров изображения
Оба изображения должны быть точно одинаковыми размерами пикселей, одинаковой шириной и одинаковой высотой. если одна фотография равна 1600×1000, а другая - 1200×800, ползунок растягивается или обрезает одну из них, чтобы подогнать, и сравнение выглядит искаженным или смещенным в тот момент, когда кто-то перетаскивает ручку.
Исправьте это, обрезав оба изображения до одинаковых размеров перед загрузкой, в любом редакторе, который вы обычно используете, или в собственном WordPress встроенный редактор изображений после загрузки. установка фиксированного разрешения изображения на обеих вкладках виджета помогает, но не исправит совершенно разное соотношение сторон между двумя исходными фотографиями.
Шаг 4: Установите ориентацию
В разделе Настройки тумблер Ориентация переключается между вертикальным разделением (левое-правое вытирание, по умолчанию) и горизонтальным разделением (верхнее-нижнее вытирание) Вертикальные костюмы широкие пейзажные снимки Горизонтальное обычно читается лучше для высоких или портретных изображений, так как узкая левая-правая щепка не показывает достаточно высокой фотографии сразу.
Шаг 5: Установите видимое соотношение и тип ручки
Видимое соотношение устанавливает, где ручка находится при загрузке страницы, в процентах. Откройте его около 50% для нейтрального первого оттиска или начните ближе к одной стороне, если вы хотите, чтобы изображение до или после доминировало при загрузке.
Переместить ручку решает, что вызывает слайд: перетащите или проведите пальцем, щелкните или наведите курсор. Перетащите хорошо работает на рабочий стол, где посетители ожидают схватить и потянуть. Hover кажется гладким на мыши, но может дать осечку сенсорным пользователям, которые вообще никогда не зависают, поэтому перетащите/проведите пальцем или щелкните - это более безопасный вариант по умолчанию, если большая часть вашего трафика является мобильной.
Шаг 6: Создайте стиль ползунка
Вкладка Стиль охватывает Стиль макета (граница, радиус, тень коробки вокруг всего виджета), Ручка (цвет, размер, значок), и Этикетка (цвет каждой стороны, типографика, фон, и интервал для наложения субтитров).Ничто из этого не меняет как работает ползунок, только как он выглядит, поэтому безопасно пропустить первый проход и вернуться, как только механика будет права.
Мобильное и сенсорное поведение
Элементор реагирует по умолчанию, поэтому виджет изменяет размеры с помощью окна просмотра без дополнительной настройки. На самом деле тестирование на телефоне необходимо с помощью настройки "Переместить ручку". Перетащите и проведите пальцем естественным образом, и щелкните тоже. Наведение на экран не существует, поэтому ползунок, установленный на "Наведение" просто неподвижно подходит для мобильных посетителей, показывая только начальное видимое соотношение без возможности его перемещения.
Собственный гид Элементора на отзывчивый дизайн охватывает основы точки останова, если вам также необходимо изменить размер самого виджета для планшета или мобильного телефона, отдельно от поведения ручки.
Основные дополнения и другие параметры сравнения элементов
| Опция | Стоимость | Ориентационный контроль | Ручка Триггеры |
|---|---|---|---|
| Сравнение изображений главных аддонов | Бесплатно | Горизонтальный и вертикальный | Перетащите/проведите, щелкните, наведите курсор |
| Сравнение изображений основных дополнений | Доступен бесплатный уровень | Да | Драг |
| До Ползунок сравнения изображений (WordPress.org) | Бесплатный, автономный плагин | Ограниченный | Драг |
| Элементор Про (родной) | Нет встроенного виджета | Не применимо | Не применимо |
Ядро Elementor, бесплатное или Pro, не имеет собственного собственного виджета сравнения изображений. по какому бы маршруту вы ни пошли, вы в любом случае устанавливаете сторонний виджет, поэтому честное сравнение проводится между этими виджетами, а не между плагином и встроенным в “ Elementor.”
Устранение общих проблем
- Виджет отсутствует на панели Элементы: перепроверьте основные дополнения → виджеты и подтвердите, что сравнение изображений включено.
- Слайдер выглядит растянутым или перекошенным: эти два изображения имеют разные размеры пикселей; обрежьте их, чтобы они соответствовали.
- Ручка не будет двигаться по телефону: Переместить ручку установлено в Ховер; переключите его на Перетащить/Провести пальцем или Нажмите.
- Метки не отображаются: подтвердите, что переключатель наложения в настройках включен и что метка действительно введена на обеих вкладках.
Если вам нравится это взаимодействие перетаскивания с раскрытием, Виджет точки доступа изображения и Виджет эффектов наведения изображения используйте аналогичный шаблон наведения и щелчка для аннотирования или анимации изображений.
Часто задаваемые вопросы
Как сделать ползунок изображения в Elementor?
Установите виджет, который поддерживает его, так как ни бесплатный, ни Pro Elementor не поставляет его изначально. бесплатный плагин Master Addons добавляет виджет сравнения изображений, который вы перетаскиваете на страницу, затем вы загружаете два изображения и устанавливаете ориентацию, соотношение и дескриптор из разделов "Содержимое" и "Настройки".
Как добавить ползунок с картинками в WordPress?
Установите Elementor плюс плагин виджета, как Master Addons, затем перетащите виджет сравнения изображений на любую страницу. Он работает внутри редактора Elementor, а не через отдельный экран настроек WordPress, поэтому нет короткого кода, который нужно запомнить.
Как сделать ползунок до и после картинки?
Загрузите изображение до и изображение после одинаковых размеров пикселей во вкладки виджета "До и после", затем выберите вертикальную или горизонтальную ориентацию. виджет генерирует драгируемый делитель автоматически, вы не проектируете эту часть самостоятельно.
Как показать до и после на слайде?
Ползунок "до" и "после" складывает два изображения в один кадр с разделителем между ними, поэтому один слайд заменяет два статических изображения. Посетители перетаскивают или постукивают по ручке, чтобы переместить делитель и раскрыть больше одного или другого изображения.
Как редактировать слайдер в Elementor?
Выберите виджет сравнения изображений на холсте и его настройки откроются на левой панели. вкладка Содержимое удерживает изображения и метки, а разделы Настройки и Стиль находятся под контролем соотношения, поведения ручки и визуального стиля. изменяет предварительный просмотр в прямом эфире на холсте.
Как сравнить, если два изображения одинаковы?
Виджет сравнения изображений создан для визуального, бок о бок раскрытия, а не для дифференциала на уровне пикселей. Если вам нужно, чтобы два изображения выстроились в чистую линию, что требуется виджету для чистого результата, обрезайте их до одинаковой ширины и высоты перед загрузкой, а не полагайтесь на виджет для обнаружения несоответствия.
Как сделать картинку до и после?
Снимать или экспортировать как до, так и после версии в одном разрешении и кадрировании, обрезать их, чтобы соответствовать, если они не выстраиваются, то загрузить оба в виджет сравнения, как Мастер Аддоны Сравнение изображений. Соответствие кадрирования имеет большее значение, чем соответствие настроек камеры для убедительного результата.
Связанное чтение
