Elementor до слайдера изображений после: бесплатный виджет сравнения
Сравнение изображений - это бесплатный виджет Master Addons, который складывает изображение до и после в один кадр с ручкой между ними. Посетители перетаскивают или проводят ручку, чтобы показать изменение. добавьте этикетку в каждую сторону, выберите "Горизонтальный" (слева и справа) или "Вертикальный" (сверху и снизу), установите место начала ручки и создайте стиль ручки, этикеток и наложения. Ни в свободном Elementor, ни в Elementor Pro нет ползунка до и после, поэтому этот виджет заполняет этот пробел на свободном Elementor.
Как добавить ползунок "До после" в Elementor
Вам нужен Elementor и бесплатный плагин Master Addons от WordPress.org.
- Убедитесь, что сравнение изображений включено ниже Мастер-аддоны, виджеты.
- В редакторе Elementor выполните поиск Сравнение изображений и перетащите его на страницу.
- На вкладке До выберите первое изображение и метку, затем сделайте то же самое на вкладке После.
- В Настройках установите видимое соотношение и выберите "Горизонтальный" или "Вертикальный".
- Сохраните ручку перемещения на Mouse Drag/Swipe для телефонов или используйте опцию Pro на страницах, ориентированных на рабочий стол.
- Стилизуйте ручку и этикетки на вкладке "Стиль", затем протестируйте ползунок на телефоне.
Советы и примеры дизайна читайте в разделе направляющая до и после ползуна. Каждая настройка указана в Настройки виджета сравнения изображений.
Перетащите и проведите пальцем перед ползунком After
Загрузите До и После изображения, каждое со своей меткой и разрешением изображения. В Настройки, Видимое соотношение (%) устанавливает, где начинается ручка, Ориентация является горизонтальным (по умолчанию) или вертикальным, и Наложение показывает или скрывает этикетки. Переместить ручку является ли перетаскивание/проверка мыши в бесплатном плагине.Master Addons Pro добавляет Mouse Move, где ручка следует за курсором, и Mouse Click.
- Перетащите и проведите работу на настольных и сенсорных экранах.
- Начните ручку смещаться от центра, чтобы подчеркнуть результат.
- Используйте изображения с одинаковыми размерами пикселей, чтобы обе стороны выстроились в одну линию.
Настраиваемые наложения и прозрачные этикетки
Включать Наложение чтобы показать метки До и После на изображениях. раздел Стиль наложения имеет Нормальный и Наведение фона.The Этикетка раздел стилизует каждую сторону отдельно с цветом, типографикой, границей, радиусом границы, полем и заполнением, так что вы можете изменить “Before” и “After” на “Old” и “”” или любые другие слова.
- Пользовательский текст метки на любом языке.
- Отдельные стили для меток до и после.
- Другой накладной фон при наведении.
Профессиональный стиль ручки и контейнера
The Ручка в разделе задаются цвет и размер ручки, ширина и высота ручки, а также цвет значка, радиус границы и границы для нормального и наведения. Стиль макета добавляет границу, заполнение и маржу вокруг всего ползунка.Border Radius и Box Shadow на контейнере являются вариантами Master Addons Pro.
- Подберите цвет ручки к вашему бренду.
- Тонкая планка с круглой коробкой для ручек для чистого вида.
- Округленные углы и тень на контейнере с Pro.
Сравнение изображений: Бесплатно против Про
У Elementor нет виджета до и после в бесплатном плагине или плагине Pro. Вот что включает в себя бесплатный виджет Master Addons и что добавляет Pro.
| Особенность | Бесплатно | Мастер Аддоны Про |
|---|---|---|
| Изображения до и после с метками | Да | Да |
| Горизонтальная и вертикальная ориентация | Да | Да |
| Видимая начальная точка отношения | Да | Да |
| Мышь Перетащить/Проведите ручку | Да | Да |
| Ручки перемещения мыши и щелчка мыши | Нет | Да |
| Стиль ручки, этикетки и наложения | Да | Да |
| Радиус границы контейнера и тень коробки | Нет | Да |
Для большинства до и после слайдеров достаточно бесплатной версии.Pro имеет смысл, когда вы хотите, чтобы ручка следовала за курсором или вам нужны закругленные углы и тень без пользовательских CSS. чтобы вместо этого прикрепить заметки к одному изображению, см Точка доступа к изображению (Про).
Часто задаваемые вопросы для сравнения изображений
Виджет сравнения изображений бесплатен?
Да. виджет свободен с перетаскиванием и свайпом, метками, как ориентацией, так и стилем ручки. Master Addons Pro добавляет ручки перемещения мыши и щелчка мыши, а также радиус границы контейнера и тень коробки.
Работает ли он на телефонах?
Да, с бесплатной рукояткой перетаскивания/свайпа мыши Посетители проводят пальцем, чтобы переместить разделитель Опция Pro Mouse Move опирается на наведение курсора, поэтому на сенсорных экранах она не работает.
Есть ли у Элементора слайдер до и после?
Нет. Ни бесплатный Elementor, ни Elementor Pro не включают сравнение изображений или виджет до и после, поэтому вам нужен такой аддон, как этот.
Когда мне следует использовать вертикальную ориентацию?
Используйте Вертикаль для высоких изображений, таких как портреты в полный рост, фасады зданий или длинные скриншоты. изображение перед сидит сверху, а изображение после - внизу, с ручкой вверх и вниз.
Затормозит ли использование двух изображений в высоком разрешении мою страницу?
Он может, если изображения очень большие. использовать настройку Разрешение изображения разумно (например, “Large” вместо ‘Полный’) и всегда оптимизировать ваши изображения для Интернета перед загрузкой. Сам элемент легкий, но размер файла изображения является основным фактором производительности.
Могу ли я сравнить более двух изображений?
Нет. каждый виджет сравнивает два изображения. для большего количества пар добавьте один виджет на пару или покажите несколько изображений в Изображение Карусель.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
