Сравнение изображений
Изображение стоит тысячи слов, но сравнение бесценно. элемент Image Comparison позволяет демонстрировать изменения, обновления или различия с помощью интерактивного ползунка. поместите два изображения рядом и позвольте посетителям перетащить ручку, чтобы показать “after” над “before.” Идеально подходит для ремонта, результатов фитнеса, изменений продукта или любой визуальной истории прогресса. с полным контролем над ручкой, этикетками и наложением, вы можете создать убедительное профессиональное сравнение, которое задействует и убеждает за считанные секунды.
Интерактивный слайдер перетаскивания и раскрытия
Волшебство во взаимодействии Загрузите изображения “Before” и “After”, затем установите начальное видимое соотношение — вроде 50%, чтобы показать оба одинаково. пользователи могут щелкнуть и перетащить Ручку, чтобы скользить между двумя изображениями, давая им прямой контроль над раскрытием. выберите ориентацию (горизонтальную или вертикальную) и установите взаимодействие на перетаскивание мыши или проведите пальцем касания. Это захватывающий способ продемонстрировать изменения.
- Интуитивное управление: пользователи перетаскивают ручку для интерактивного сравнения двух изображений.
- Гибкая ориентация: создание горизонтальных (слева/справа) или вертикальных (вверх/вниз) ползунков сравнения.
- Регулируемая начальная точка: установите начальное разделение (например, 30% до, 70% после), чтобы выделить результат.
Настраиваемые наложения и прозрачные этикетки
Убедитесь, что зрители понимают, что они видят. включить наложение отобразить метки “Before” и “After” прямо на изображениях. Полностью настроить эти метки: изменить текст, типографику, цвета, и фон. можно даже использовать градиент для наложения. стилизовать штаты Normal и Hover отдельно, и контролировать наложение наложения, поля, и границы для полированного, интегрированного образа.
- Пользовательские Текст Метки: Изменить “До/После” на что-либо вроде “Старый/Новый,” “Оригинальный/Улучшенный,” и т. д.
- Стильный фон наложения: используйте однотонные цвета, градиенты или даже изображения для фона этикетки.
- Четкий визуальный контекст: убедитесь, что зрители никогда не задаются вопросом, какое изображение какое.
Профессиональный стиль ручки и контейнера
Ползунок должен выглядеть как часть вашего дизайна, а не как общий инструмент. полностью настроить Ручку: изменить ее цвет и размер стержня, стилизовать коробку для перетаскивания значками, цветами и фоном, а также добавить тень коробки и радиус границы. Затем стилизовать основной контейнер (стиль макета) с рамками, набивкой, тенями. Каждый элемент от ручки до этикеток к контейнеру (Box Shadow) может быть адаптирован к вашему бренду.
- Дизайн перетаскивающей ручки: стилизуйте ползунок и драгируемую коробку значками, цветами и эффектами наведения.
- Контейнерный польский: добавьте к виджету границы, тени и расстояние, чтобы он легко вписывался в ваш макет.
- Адаптивное касание: ручка спроектирована так, чтобы ее было легко захватывать и перетаскивать как на настольных, так и на сенсорных устройствах.
Часто задаваемые вопросы для сравнения изображений
Могу ли я использовать это для сравнения более двух изображений?
Нет, этот элемент специально разработан для прямого, бок о бок сравнения двух изображений, Он идеально подходит для сценариев до/после. чтобы продемонстрировать несколько изображений или состояний, рассмотрите возможность использования Галерея Слайдер или Изображение Карусель вместо.
Как это работает на мобильных телефонах?
Идеально! ползунок полностью сенсорный Пользователи могут провести пальцем влево/вправо (или вверх/вниз), чтобы переместить ручку. элемент отзывчив, и вы можете настроить такие настройки, как размер этикетки и размер ручки для мобильных устройств в режиме адаптивного редактирования Elementor.
Могу ли я изменить текст на этикетках?
Абсолютно. можно изменить текст по умолчанию “Before” и “After” на все, что вы хотите, прямо в настройках Контента. это позволяет настраивать метки для любого сценария, как “Day/Night,” “Without/With,” или “Product A/Product B.”
Какое применение лучше всего использовать для вертикальной ориентации?
Вертикальные ползунки отлично подходят для сравнения высоких изображений, как портреты в полный рост, фасады зданий, или любое преобразование “top vs. bottom”.Это также уникальный визуальный выбор, который может сделать ваше сравнение выделяться на странице горизонтального содержания.
Затормозит ли использование двух изображений в высоком разрешении мою страницу?
Он может, если изображения очень большие. использовать настройку Разрешение изображения разумно (например, “Large” вместо ‘Полный’) и всегда оптимизировать ваши изображения для Интернета перед загрузкой. Сам элемент легкий, но размер файла изображения является основным фактором производительности.
Могу ли я начать ползунок с изображением "После", по большей части скрытым?
Да, используйте настройку Видимое соотношение Если вы установите его на 90%, изображение “Before” займет 90% пространства, скрывая большую часть изображения “After”, пока пользователь не перетащит ручку Это отлично подходит для создания неожиданного раскрытия.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
Дубликатор сообщений/страниц
