Бесплатный виджет изображения элементара с заменой наведения, лентой и наклоном
Расширенное изображение - это бесплатный виджет Master Addons, который добавляет дополнительные возможности к одному изображению. Переключитесь на второе изображение при наведении курсора, поместите ленту Simple, Corner или Cross в любой угол, откройте изображение в лайтбоксе с дополнительной кнопкой plus и добавьте эффект наклона, который следует за курсором или цветной тенью. В то время как изображение загружается вы можете показать размытый заполнитель или спиннер. стиль нормальные и наведение на действие состояния с границей, фоном и тенью коробки.
Как добавить замену изображения наведения в Elementor
Вам нужен Elementor и бесплатный плагин Master Addons от WordPress.org.
- Убедитесь, что расширенное изображение включено ниже Мастер-аддоны, виджеты.
- В редакторе Elementor выполните поиск Расширенное изображение и перетащите его на страницу.
- При необходимости выберите основное изображение и ссылку на изображение.
- Включать Отобразить изображение наведения и выберите второе изображение, в идеале того же размера.
- Добавьте ленту, лайтбокс, наклон или раскрашенную тень из разделов Содержимое и Настройки. раскрашенная тень не работает вместе с изображением наведения.
- Стиль нормального состояния и состояния наведения на вкладке Стиль.
Каждая обстановка описана в Расширенные настройки виджета изображений.
Наведите указатель мыши на изображение и интеллектуальные эффекты
Создать мгновенный “до и после сравнения” или простое наведение hover раскрывает.Загрузите свое основное изображение, затем включите Hover Image для загрузки второго изображения. когда посетители навеваются, изображение плавно переключается. добавьте слой изысканности с помощью эффекта наклона, который заставляет изображение слегка наклоняться по мере перемещения мыши по нему, добавляя тонкое ощущение 3D. Для дополнительной глубины, дайте возможность Colorized Shadow разместить мягкую цветную тень позади изображения, заставляя ее выскочить со страницы.
- Интерактивные сравнения: идеально подходит для показа продукта до и после или просмотра объекта недвижимости днем/ночью.
- Эффект вовлечения наклона: добавляется современный интерактивный слой, реагирующий на движение курсора.
- Визуальная глубина: используйте цветную тень, чтобы создать разделение и фокусировку без дополнительных элементов дизайна.
Настраиваемые ленты и этикетки
Выделите свои изображения профессиональными лентами. дайте возможность функции Ribbon добавить этикетку, как “NEW DESIGN,” “BESTSELLER,” или “SOLD OUT.” Выбирайте из разных стилей лент (например, Corner или Cross или Simple) и устанавливайте положение (верх/внизу, слева/вправо).Полностью настройте цвета, типографику и толщину ленты, чтобы она идеально дополняла ваш имидж и бренд.
- Выделите информацию о ключе: мгновенно сообщите статус, продвижение или категорию непосредственно на изображении.
- Гибкое расположение: поместите ленту в любой угол, чтобы не закрывать важные части изображения.
- Полный контроль стиля: подобрать фон ленты, цвет текста, шрифт к языку дизайна вашего сайта.
Добавьте интеграцию ссылок и лайтбоксов
Добавить Ссылка на изображение чтобы отправить посетителей на продукт или страницу или включить Открыть в лайтбоксе итак, щелчок показывает изображение в полном размере. The Знаменитая кнопка опция добавляет значок плюс над изображением. Включить Предварительная загрузка изображения чтобы показать заполнитель во время загрузки изображения: размытый предварительный просмотр, окно выполнения или синий, светлый или темный спиннер.
- Ссылка на страницу продукта или откройте полноразмерный лайтбокс.
- Выравнивание влево, в центре или вправо в столбце.
- Заполнитель загрузки для больших изображений.
Подробный контроль стиля и размера
Получите полный контроль дизайна над представлением вашего изображения.Установите точную максимальную ширину и максимальную высоту. Применяйте радиус границы индивидуально к каждому углу для получения уникальных форм. стилизируйте нормальное состояние и наведите указатель мыши отдельно с границами, фоном и тенями коробки. Это гарантирует, что ваше изображение будет выглядеть идеально в каждом контексте и во время каждого взаимодействия.
- Адаптивный размер: точно контролируйте размеры изображения, не полагаясь на непредсказуемый авторазмер.
- Пользовательские формы: создавайте круглые изображения, закругленные прямоугольники или уникальные асимметричные границы.
- Стиль, специфичный для штата: добавьте границу или тень только при наведении, чтобы визуально указать, что изображение интерактивно.
Часто задаваемые вопросы для расширенного изображения
Совместим ли эффект Hover Image с мобильными сенсорными экранами?
Да, но это работает немного по-другому. на сенсорных устройствах первое касание часто запускает эффект зависания (переключение изображения), если вы не включили лайтбокс. Но если вы включили лайтбокс, то лайтбокс получит больший приоритет, и при касании первое изображение откроется в лайтбоксе.
Виджет Advanced Image бесплатен?
Да. Advanced Image является частью бесплатного плагина Master Addons с изображением наведения, лентами, лайтбоксом, наклоном, цветной тенью и всеми вариантами стиля.
Чем это отличается от базового виджета Image от Elementor?
Базовый виджет Elementor позволяет добавить изображение, ссылку, подпись и простой стиль. Элемент Advanced Image добавляет набор профессиональных функций: обмен изображениями наведения, ленты/метки, эффект наклона, цветную тень, отдельный стиль состояния нормального/наведения и более детальное управление лайтбоксом. Он предназначен для создания более увлекательных интерактивных презентаций изображений.
Могу ли я использовать функцию ленты без изображения наведения или других эффектов?
Абсолютно! каждая функция независима. вы можете иметь только изображение с лентой или просто изображение с эффектом наклона. вы можете смешивать и сопоставлять функции по своему усмотрению. включите только те, которые вам нужны для вашей конкретной цели дизайна.
Что делает настройка Предварительная загрузка изображения?
Предварительная загрузка изображения показывает заполнитель во время загрузки изображения, поэтому посетители не видят пустое место Выберите Пустой, размытое изображение заполнителя, анимация в стадии разработки или синий, светлый или темный спиннер загрузки. Это наиболее полезно для больших изображений.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение 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)
Дубликатор сообщений/страниц
