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