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