Некоторые вещи легче показать, чем рассказать: отретушированное фото, комната после переделки, дизайн до и после уборки The Сравнение изображений виджет в Мастер-аддоны для Elementor складывает два изображения и роняет между ними драгируемую ручку, поэтому посетители скользят, чтобы сами выявить разницу.
Вы загружаете изображение до и изображение после, добавляете метки, выбираете вертикальное или горизонтальное разделение, затем создаете стиль ручки и этикеток в соответствии с вашим сайтом. Это руководство охватывает каждую настройку виджета.
Что делает виджет сравнения изображений #
Виджет показывает два изображения в одном кадре, один на другом, с ручкой ползунка вниз посередине. перетащите ручку и она протирает между изображением до и после. Вы можете пометить каждую сторону, перевернуть разделение с левого-правого на верхнее-нижнее, и решить, следует ли ручка за перетаскиванием, щелчком или наведением.
Есть две вкладки, с которыми нужно работать. Содержание содержит два изображения, метки и поведение ползунка. Стиль управляет макетом, накладными метками, и ручкой Рядом с ними сидят обычные опции Elementor Advanced.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Два изображения, которые выстраиваются в ряд, одинакового размера и кадра, поэтому слайд читается как одна сцена.
Как добавить виджет сравнения изображений #
В редакторе Elementor откройте Элементы панель и поиск Сравнение изображений, или прокрутите в раздел Главные дополнения (виджеты несут фиолетовый значок МА). перетащите его на свою страницу, и он загружается двумя образцами изображений и ползунком, который вы можете начать редактировать сразу.
Загрузите два изображения #
Открыть Содержание вкладка. Изображения раздел имеет До и ан После tab, и каждый устанавливает свое собственное изображение, метку и разрешение.
- До / После вкладок: переключитесь между двумя сторонами, чтобы установить каждое изображение.
- Выберите изображение: выберите изображение этой стороны в медиатеке.
- Этикетка: короткая подпись для стороны, например "Перед работой" или "Окончательные результаты".
- Разрешение изображения: размер подается, например, полный или большой.
Выберите каждое изображение из библиотеки #
Нажмите Выберите изображение и медиатека WordPress открывается.Установите изображение перед на вкладке До, затем переключитесь на вкладку После и выберите вторую. Легко забыть: вкладка, на которой вы находитесь, решает, на какую сторону вы меняете, поэтому проверьте ее перед тем, как нажать выберите.
Установите метки #
Тип а Этикетка на каждой вкладке и виджет печатает его как наложение на той стороне изображения. метка перед сидит на одной стороне, метка после на другой, поэтому посетители знают, что есть что, без вашего написания.
Отрегулируйте настройки ползунка #
Открыть Настройки раздел для того, как ведет себя ползунок, Здесь вы устанавливаете исходное положение, направление разделения и то, что перемещает ручку.
- Видимое соотношение (%): там, где ручка начинается, вы можете открыть ее на стороне до или после.
- Накладка: показывать или скрывать метки до и после.
- Ручка перемещения: перетащите или проведите пальцем, щелкните или наведите курсор, чтобы переместить ползунок.
Переключить ориентацию #
The Ориентация тумблер переворачивает разделение с вертикального на горизонтальное. Вертикальное обеспечивает протирание влево-вправо. Горизонтальное складывает изображение переднего изображения сверху и после внизу с ручкой вверх-вниз, которая обычно лучше читается для высоких фотографий.
Стиль макета, ручки и этикеток #
Открыть Стиль вкладка. Есть разделы для Стиль макета, Наложение, Ручкаи Этикетка, таким образом, ползунок соответствует вашему дизайну, а не внешнему виду по умолчанию.
- Стиль макета: тип границы, радиус и тень коробки вокруг всего ползунка.
- Ручка: цвет, размер и стиль управления перетаскиванием.
- Этикетка: цвет каждой стороны, типографика, фон, граница и интервал между подписями.
Обычные случаи использования #
- Редактирование фотографий показ необработанного кадра рядом с отретушированной версией.
- Дом и ремонт до и после реконструкции или очистки.
- Дизайн и разработка старый макет против редизайна.
- Здоровье и фитнес прогрессовые выстрелы бок о бок.
- Продукция простой предмет рядом с готовым или стилизованным результатом.
Советы по работе с виджетом Image Comparison #
- Сопоставьте два изображения. Одинаковый размер, угол и обрезка, поэтому слайд читается как одна сцена, а не как две фотографии, соединенные вместе.
- Установить начальное соотношение. Откройте часть с помощью Visible Ratio, чтобы посетители могли сказать, что есть что перетащить.
- Держите этикетки короткими. До и После, или два слова, сидят над изображением чище, чем полное предложение.
- Выберите правильный спусковой крючок. Перетащите костюмы рабочий стол. Hover чувствует себя быстро, но может застать касание пользователей врасплох, поэтому протестируйте его на телефоне перед отправкой.
- Используйте горизонтальное положение для высоких кадров. Разделение сверху вниз лучше подходит для портретных изображений, чем узкая протирка слева направо.
Смотрите видеоурок #
Предпочитаете следовать на экране? Видеоурок ниже проходит через элемент сравнения изображений от начала до конца, показывая, как изображения, метки, настройки ползунка и стиль работают в редакторе Elementor.
Часто задаваемые вопросы #
Что такое виджет сравнения изображений в главных аддонах?
Это виджет Elementor, который складывает изображение до и после с драгируемой ручкой между ними. Посетители перемещают ручку, чтобы стереть ее с одного изображения на другое, с дополнительными метками на каждой стороне, все они устанавливаются с панели Elementor без кода.
Как добавить метки до и после?
Откройте раздел Изображения и введите Метку на вкладке До и вкладке После Каждая метка печатает как наложение на своей стороне изображения Вы можете показать или скрыть их с помощью переключателя Наложение в Настройках и стилизовать их в разделе Метка вкладки Стиль.
Могу ли я сделать ползунок вертикальным или горизонтальным?
Да. в разделе Настройки есть переключатель Ориентация. по умолчанию - вертикальное разделение слева направо; переключайте его, и изображения складываются сверху и снизу с помощью ручки вверх-вниз. Горизонтальное хорошо работает для портретных изображений или высоких скриншотов.
Как посетители перемещают ползунок сравнения?
Выпадающий элемент Move Handle в настройках устанавливает триггер. ручка может следовать за перетаскиванием мыши или свайпом, перемещаться по щелчку или отслеживать зависание. перетаскивание является наиболее распространенным на рабочем столе, в то время как щелчок является самым безопасным выбором для сенсорных экранов.
Нужны ли мне изображения одинакового размера?
Для лучшего результата, да. два изображения сидят в одном кадре, поэтому соответствие размера, угла и обрезки делает слайд читается как одна сцена. если изображения различаются, установите фиксированное разрешение изображения, чтобы оба обслуживались в одних и тех же измерениях.
Завершая #
Виджет сравнения изображений превращает два изображения в интерактивные до и после: загрузить два изображения, добавить метки, установить ориентацию и дескриптор, затем стилизовать ползунок для соответствия. о связанных виджетах см Виджет точки доступа изображения и Виджет эффектов наведения изображения, просмотр всего Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
