Расширенное изображение
Изображение на вашем сайте должно делать больше, чем просто сидеть там Элемент Advanced Image заряжает базовую картинку умными интерактивными функциями.Создавайте привлекательные эффекты зависания “до и после”, добавляйте стильные ленты “NEW” или “SALE”, применяйте динамические эффекты наклона при движении мыши и даже добавляйте красочные тени. Полный контроль над лайтбоксами, ссылками и каждым аспектом стиля, вы можете превратить любое изображение в привлекательный фрагмент контента, который направляет посетителей и усиливает взаимодействие. идеально подходит для витрин продуктов, портфолио или избранных баннеров.
Наведите указатель мыши на изображение и интеллектуальные эффекты
Создать мгновенный “до и после сравнения” или простое наведение hover раскрывает.Загрузите свое основное изображение, затем включите Hover Image для загрузки второго изображения. когда посетители навеваются, изображение плавно переключается. добавьте слой изысканности с помощью эффекта наклона, который заставляет изображение слегка наклоняться по мере перемещения мыши по нему, добавляя тонкое ощущение 3D. Для дополнительной глубины, дайте возможность Colorized Shadow разместить мягкую цветную тень позади изображения, заставляя ее выскочить со страницы.
- Интерактивные сравнения: идеально подходит для показа продукта до и после или просмотра объекта недвижимости днем/ночью.
- Эффект вовлечения наклона: добавляется современный интерактивный слой, реагирующий на движение курсора.
- Визуальная глубина: используйте цветную тень, чтобы создать разделение и фокусировку без дополнительных элементов дизайна.
Настраиваемые ленты и этикетки
Выделите свои изображения профессиональными лентами. дайте возможность функции Ribbon добавить этикетку, как “NEW DESIGN,” “BESTSELLER,” или “SOLD OUT.” Выбирайте из разных стилей лент (например, Corner или Cross или Simple) и устанавливайте положение (верх/внизу, слева/вправо).Полностью настройте цвета, типографику и толщину ленты, чтобы она идеально дополняла ваш имидж и бренд.
- Выделите информацию о ключе: мгновенно сообщите статус, продвижение или категорию непосредственно на изображении.
- Гибкое расположение: поместите ленту в любой угол, чтобы не закрывать важные части изображения.
- Полный контроль стиля: подобрать фон ленты, цвет текста, шрифт к языку дизайна вашего сайта.
Добавьте интеграцию ссылок и лайтбоксов
Каждое изображение может быть шлюзом. свяжите свое изображение непосредственно с URL-адресом, например страницей продукта или вашим тарифным планом. альтернативно, включите Lightbox, чтобы зрители могли сосредоточиться на изображении в красивом всплывающем окне с полным экраном. выбирайте из разных значков лайтбокса (например, кнопка плюс) и контролируйте его выравнивание. для производительности используйте опцию "Преднагрузить изображение", чтобы обеспечить быструю загрузку, особенно для эффектов зависания.
- Прямые призывы к действию: свяжите изображения с важными страницами, превращая визуальный интерес в прямой трафик.
- Расширенный опыт работы в галерее: позвольте пользователям подробно просматривать изображения с помощью элегантного лайтбокса.
- Оптимизированная производительность: предварительно загрузите изображения наведения, чтобы предотвратить задержку или “flash” при первом взаимодействии.
Подробный контроль стиля и размера
Получите полный контроль дизайна над представлением вашего изображения.Установите точную максимальную ширину и максимальную высоту. Применяйте радиус границы индивидуально к каждому углу для получения уникальных форм. стилизируйте нормальное состояние и наведите указатель мыши отдельно с границами, фоном и тенями коробки. Это гарантирует, что ваше изображение будет выглядеть идеально в каждом контексте и во время каждого взаимодействия.
- Адаптивный размер: точно контролируйте размеры изображения, не полагаясь на непредсказуемый авторазмер.
- Пользовательские формы: создавайте круглые изображения, закругленные прямоугольники или уникальные асимметричные границы.
- Стиль, специфичный для штата: добавьте границу или тень только при наведении, чтобы визуально указать, что изображение интерактивно.
Часто задаваемые вопросы для расширенного изображения
Совместим ли эффект Hover Image с мобильными сенсорными экранами?
Да, но это работает немного по-другому. на сенсорных устройствах первое касание часто запускает эффект зависания (переключение изображения), если вы не включили лайтбокс. Но если вы включили лайтбокс, то лайтбокс получит больший приоритет, и при касании первое изображение откроется в лайтбоксе.
Будет ли использование эффекта наклона и цветной тени замедлять работу моей страницы?
Эти эффекты используют CSS, который, как правило, легкий Однако, использование их на очень большом количестве изображений на одной странице (как в плотной сетке и 100+ изображений) может способствовать более высокой нагрузке на устройство пользователя. использовать их выборочно на ключевых изображениях для наилучшей производительности и воздействия.
Чем это отличается от базового виджета Image от Elementor?
Базовый виджет Elementor позволяет добавить изображение, ссылку, подпись и простой стиль. Элемент Advanced Image добавляет набор профессиональных функций: обмен изображениями наведения, ленты/метки, эффект наклона, цветную тень, отдельный стиль состояния нормального/наведения и более детальное управление лайтбоксом. Он предназначен для создания более увлекательных интерактивных презентаций изображений.
Могу ли я использовать функцию ленты без изображения наведения или других эффектов?
Абсолютно! каждая функция независима. вы можете иметь только изображение с лентой или просто изображение с эффектом наклона. вы можете смешивать и сопоставлять функции по своему усмотрению. включите только те, которые вам нужны для вашей конкретной цели дизайна.
Какое самое лучшее применение настройке 'Preload Image'?
Включить предварительную загрузку изображения (установлено на ‘Вкл’) при использовании функции "Наведение изображения". Это заставляет браузер загружать второе изображение при загрузке страницы, даже если оно скрыто. Это предотвращает заметную задержку или пустую вспышку при первом наведении пользователя на изображение, обеспечивая плавное взаимодействие с пользователем.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
Дубликатор сообщений/страниц
