Эффекты наведения изображения Elementor: 30 анимаций наведения на действие для изображений
Статическое изображение просто сидит там Добавить эффекты наведения изображения и то же изображение начинает делать некоторые работы: заголовок сползает, описание затухает, и щелчок отправляет людей на ссылку или открывает полное всплывающее окно Виджет эффектов наведения изображения для Elementor поставляется с 30 анимациями наведения (8 в бесплатном плагине и еще 22 с Pro) и вы настраиваете их, не записывая строку CSS. Он подходит для мест, где одно изображение должно нести заголовок, подпись и действие: портфолио, командные сетки, сервисные карты, витрины продуктов.
Выберите эффект, выберите, что делает щелчок, и стиль каждый слой, чтобы соответствовать вашему дизайну. то, что вы в конечном итоге с карточкой изображения люди на самом деле останавливаются на вместо прокрутки мимо. видео ниже проходит через все это, показывает каждую анимацию, и настройка занимает пару минут.
Что такое эффекты наведения изображения?
Эффект наведения изображения - это анимация, которая срабатывает, когда кто-то перемещает мышь по изображению. Вместо того, чтобы оставаться ровным, изображение реагирует. Он может увеличивать, размывать, менять цвет или перемещать текстовую панель в поле зрения. Вы также увидите их называемыми эффекты опрокидывания изображения или эффекты фотовведения, и все они делают одно и то же: берут простое изображение и заставляют его читать как “здесь больше, нажмите me.”
Вы можете построить все это вручную с пользовательским CSS. Это означает, что нужно писать переходы, заставлять их вести себя на мобильном телефоне и возвращаться в код каждый раз, когда дизайн меняется. виджет Master Addons обрабатывает его визуально внутри Elementor, так что вы получаете простые эффекты наведения изображения не открывая редактор кода. если вы хотите увидеть остальную часть инструментария, просмотрите Виджеты и расширения Master Addgets или Элементорные анимационные функции.
30 анимаций ховера, 8 из них бесплатные
Первые впечатления происходят на hover.Вы получаете библиотеку CSS анимации, которые приносят ваш заголовок и описание в плавно, поэтому текст приходит вместо того, чтобы просто поппинг на экран. Примените любой эффект одним щелчком мыши, затем циклически через них в редакторе, пока один подходит к изображению. Я обычно стараюсь три или четыре, прежде чем остановиться, так как эффект, который отлично выглядит на широком пейзажном кадре может чувствовать себя от плотного портретного урожая.
- Затухание и масштабирование: изображение затухает или масштабируется, а текст затухает.
- Слайд (вверх, вниз, влево, вправо): панель надписей вставляется с любого края.
- Нажмите и раскройте: изображение меняется, освобождая место для названия и описания.
- Плавайте и сияйте: небольшой подъемник и легкий размах по изображению.
- Восемь эффектов бесплатны: Лили, Сэди, Рокси, Бубба, Ромео, Лейла, Хани и Оскар. Pro добавляет еще 22, от Марли до Дюка.
- Работает на CSS: движение остается плавным, поскольку оно не опирается на тяжелые сценарии.
- Быстро протестировать: эффекты замены в редакторе и сразу увидеть изменение.
Умное связывание и всплывающий контент нажатием
Вы решаете, что происходит, когда кто-то щелкает карту. укажите его на любом URL-адресе со стандартной ссылкой или, с помощью Pro, переключите действие на всплывающее окно и удерживайте людей на странице. Всплывающее окно также не ограничивается текстом: установите тип контента на Сохраненный раздел и он втягивает любой шаблон Elementor, который вы уже построили. Это превращает одну карту изображения в дверной проем к полной биографии, лист спецификации продукта или контактную форму, и посетитель никогда не покидает страницу.
- Два действия щелчка: отправляйте трафик по ссылке или оставляйте людей на месте с помощью всплывающего окна (Pro).
- Настоящие шаблоны во всплывающем окне (Pro): покажите изображение, текст или полный макет из вашей библиотеки.
- Дразнить, потом сказать: изображение представляет собой крючок, а всплывающее окно несет детали.
Полный контроль контента и стиля
Вы контролируете, как карта смотрит с точностью до деталей. Загрузите свое изображение и установите его непрозрачность и фильтр отдельно для нормального состояния и состояния наведения. Добавьте заголовок (выберите правильный тег HTML, чтобы он помог структуре вашей страницы) и описание, затем стилизуйте каждую часть самостоятельно с помощью своих цветов, типа, теней и интервалов.
- Отдельное название и описание: создайте стиль каждого из них так, чтобы иерархия читалась ясно.
- Фильтры изображений: трюк с зависанием от оттенка серого до цвета по-прежнему выглядит хорошо и здесь является одноразовым изменением.
- Карточка: фон, границы и тень коробки, а также закругленные углы и набивка с помощью Pro, поэтому он находится прямо в вашем макете.
Как добавить эффекты наведения изображения в Elementor?
Вы можете иметь работающую карту наведения менее чем за две минуты. Нет CSS, нет коротких кодов.
- Установите и активируйте главные дополнения, а затем отредактируйте любую страницу с помощью Elementor.
- Найдите на панели виджетов Эффекты наведения изображения и перетащите его на свою раскладку.
- Загрузите изображение и добавьте заголовок и описание.
- Откройте раскрывающийся список "Эффект наведения" и выберите анимацию. Восемь бесплатны, и еще 22 поставляются с Pro.
- Установите действие щелчка на ссылку или на всплывающее окно с сохраненным шаблоном, если у вас есть Pro.
- Создайте стиль названия, описания и контейнера, затем опубликуйте.
Перед публикацией стоит сделать одну вещь: просмотреть карту на телефоне. Наведение на курсор не существует на связи, поэтому проверьте, имеет ли поведение касания смысл (подробнее об этом в часто задаваемых вопросах). для каждого параметра, изложенного по порядку, следуйте инструкциям Документация Image Hover Effects.
Где использовать эффекты наведения на изображения?
- Командные сетки: имя и роль на hover, затем полная биография во всплывающем окне нажатия. Вот как построить раздел членов команды.
- Портфолио и галереи: название проекта и ссылка “View case study” над каждой фотографией.
- Сервисные карты: краткое описание и ссылка на страницу обслуживания.
- Витрины продукции: дразните изображение продукта, затем откройте характеристики во всплывающем окне.
- Плитки блога и категорий: подпись на зависании навигации на основе изображений.
Чтобы узнать больше о способах объединения текста и изображений, прочтите 25 Элементорных методов преобразования текста в изображение. Виджеты связанных изображений включают в себя Изображение Карусель, Фильтруемая галерея изображений, Точка доступа к изображению виджет и Расширенное изображение виджет.
Часто задаваемые вопросы по эффектам наведения изображения
Будут ли эти эффекты зависания работать на мобильных устройствах?
Они созданы для рабочего стола, где есть мышь для наведения курсора На сенсорном экране эффект обычно срабатывает при первом нажатии, чтобы показать содержимое, а второй нажатие следует по ссылке или открывает всплывающее окно. поэтому запланируйте два нажатия на мобильный телефон и убедитесь, что текст остается читаемым, как только он отобразится.
Как создать простые эффекты наведения изображения без записи CSS?
Бросьте виджет "Эффекты наведения изображения" на свою страницу, загрузите изображение, добавьте заголовок и описание и выберите анимацию из раскрывающегося списка. То есть без CSS. Виджет пишет CSS для вас за кулисами, поэтому даже довольно вовлеченную карту наведения остается легко собрать.
Могу ли я открыть биографию команды или подробную информацию о продукте во всплывающем окне при нажатии?
Да, с Pro. Поставьте имя в Заголовок и роль в Описание, установите действие щелчка на Всплывающее окно, и выберите Тип контента: Сохраненный раздел. Постройте биографию как шаблон в Elementor и выберите здесь. Нажмите на фотографию и этот полный макет откроется во всплывающем окне.
Все 30 эффектов наведения изображения бесплатны?
Нет. восемь эффектов бесплатны: Лили, Сэди, Рокси, Бубба, Ромео, Лейла, Хани и Оскар. остальные 22 поставляются с Master Addons Pro, наряду с всплывающим контентом, закругленными углами и элементами управления заполнением. название, описание, ссылка и фильтры изображений все работают в бесплатной версии.
Затормозит ли мой сайт множество анимированных карт изображений?
Эффекты работают на CSS, поэтому горстка на странице не проблема. Что на самом деле замедляет ситуацию, так это вес изображения, поэтому сначала сжатие изображений. Как только вы пройдете 20 или около того карт на одной странице, включите ленивую загрузку, и первая краска останется быстрой.
Могу ли я использовать разные эффекты наведения на разные изображения?
Настройки охватывают одну карту за раз. чтобы смешать эффекты, добавьте отдельный виджет Image Hover Effects для каждого изображения и настройте их независимо. так вы получаете галерею, где карты не все анимируются одинаково.
В чем преимущество "Сохраненного раздела" во всплывающем окне перед простым текстом?
Сохраненный раздел - это опция Pro, и он дает вам полный редактор Elementor внутри всплывающего окна. Вместо обычного текста вы можете добавлять изображения, кнопки, столбцы, видео или формы, поэтому всплывающее окно выглядит как остальная часть вашего сайта, а не как простое текстовое поле.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
Дубликатор сообщений/страниц
