Ключевые выводы
- Виджет "Эффекты наведения изображения главных дополнений" для Elementor имеет 30 эффектов наведения изображения, каждый из которых выбран по имени из одного раскрывающегося списка "Эффект наведения" на вкладке "Контент".
- Восемь эффектов наведения изображения работают без Master Addons Pro: Лили, Сэди, Рокси, Бубба, Ромео, Лейла, Хани и Оскар. для остальных 22 эффектов нужен Pro.
- Большинство из 30 эффектов наведения изображения показывают заголовок и описание, шесть также показывают социальные значки, Хани использует подзаголовок, а Джулия показывает три отдельные строки текста.
- Каждый эффект наведения изображения в виджете построен с помощью CSS, и каждый виджет содержит одно изображение, поэтому сетка карт наведения создается из нескольких виджетов.
- На сенсорных экранах эффекты наведения изображения обычно появляются при первом нажатии, а второе нажатие следует по ссылке.
Эффекты наведения изображения - это анимации, которые воспроизводятся, когда указатель перемещается по изображению, чаще всего для раскрытия названия и описания. Ниже приведены 30 из них, все из Виджет эффектов наведения изображения для Elementor, каждый из которых запечатлен в состоянии наведения на реальной странице. Используйте список, чтобы выбрать эффект по тому, что он показывает и где он подходит.
Эффекты идут по имени в виджете, поэтому имена ниже, то, что вы увидите в раскрывающемся списке. первые восемь работают над каждым планом, а остальные нуждаются в Master Addons Pro.
Оглавление
Как читать эти примеры
Каждый пример показывает карту, пока указатель находится над ней. перед наведением изображения является простым, или показывает только заголовок, в зависимости от эффекта. строка под каждым изображением говорит, что находится на экране и предлагает использование.
Текст, цвета и шрифты - все, что вы можете изменить. Что исправляет эффект, так это расположение наложения и то, как оно появляется.
8 эффектов, которые работают без Pro
Первые восемь эффектов в раскрывающемся списке доступны на каждом плане. Все восемь имеют заголовок и описание, кроме Honey, где заголовок отображается с подзаголовком.
1. Лилия
Название и описание расположены в левом нижнем углу над слегка затемненным изображением. Это подходит для миниатюр портфолио, где фотография должна оставаться в фокусе.
2. Сэди
Заголовок центрирован, и описание отображается ниже, как оттенок покрывает изображение. Он подходит для плиток назначения и карт категорий с коротким слоганом.
3. Рокси
Внутри изображения нарисована тонкая рамка с заголовком и описанием в центре. Он подходит для плиток продуктов или услуг, которым нужен аккуратный, коробочный вид.
4. Бубба
Вокруг центра нарисована рамка, а заголовок и описание находятся внутри нее. Это подходит для списков, где каждая карта содержит имя и одну строку деталей.
5. Ромео
Две тонкие линии пересекают изображение, с заголовком над центром и описанием ниже. Он подходит для карты собственности и проекта с сильным фото.
6. Лейла
Горизонтальные и вертикальные линии образуют открытую рамку вокруг названия и описания. Он подходит для интерьера, архитектуры и галерейных сеток.
7. Мед
Название и Sub Title имеют одну строку внизу, над цветной полосой. Он подходит для категорий меню и коротких этикеток. Мед - единственный эффект, использующий поле Sub Title.
8. Оскар
Изображение темнеет, и появляется рамка с заголовком и описанием в центре. Он подходит для категорий магазинов и любой карты с двумя короткими строками текста.
Наведите на них курсор самостоятельно. выше Страница виджета эффектов наведения изображения имеет эти восемь эффектов в виде живых карт.
Эффекты 22 Pro
Остальным 22 эффектам нужны Master Addons Pro. В шесть из них добавлены социальные значки, а в один, Julia, показаны три строки текста.
9. Марли
Название находится в правом верхнем углу, под ним проходит строка, а описание появляется в правом нижнем углу. Это подходит для редакционных макетов и карточек в стиле журнала.
10. Рубин
Название остается над рамкой, которая держит описание. Оно подходит для плиток функций, где описание является призывом к действию.
11. Майло
Описание находится вверху справа рядом с вертикальной линией, а заголовок - внизу справа. Он подходит для карт изображений с подписью и титром.
12. Декстер
Название находится вверху, а толстая рамка внизу держит описание. оно подходит смелые рекламные плитки.
13. Сара
Название находится вверху слева с линией под ним, и описание следует ниже. Он подходит для карт в стиле блога и тизеров тематических исследований.
14. Зои
Цветная полоса поднимается снизу с заголовком и социальными значками, а описание находится над ней. Он подходит членам команды и авторским карточкам.
15. Чико
Изображение темнеет внутри кадра, с центром названия и описания. оно подходит темным, кинематографическим галереям.
16. Юлия
Название находится в верхнем левом углу и под ним появляются до трех коротких строк, каждая на своей метке. он подходит для карт, которым нужно несколько фактов, похожих на пули. у Джулии есть свой ретранслятор для этих строк.
17. Голиаф
Темная панель покрывает нижнюю часть изображения и содержит заголовок и описание. Она подходит для карт с более длинными описаниями, которые нуждаются в твердом фоне.
18. Гера
В центре появляется ромбовидный контур с названием и четырьмя социальными значками. Он подходит для изображений профиля и карточек социальных ссылок.
19. Уинстон
Название находится вверху, а внизу появляется ряд социальных значков. Он подходит для командных сетей, где каждый человек имеет социальные профили.
20. Селена
Изображение сжимается внутри кадра, а заголовок и описание располагаются вверху. Оно подходит для лукбуков и фотографий продуктов.
21. Терри
Изображение перемещается в меньшее окно на темном фоне, с заголовком в левом нижнем углу и социальными значками. Оно подходит для карточек ораторов и сотрудников.
22. Фиби
В центре заголовка находится ряд социальных значков прямо под ним. Он подходит для простых карт профиля.
23. Аполлон
Название находится в правом верхнем углу, а описание в правом нижнем углу рядом с короткой вертикальной линией. Он подходит для минимальных плиток портфолио.
24. Кира
Название находится вверху с социальными значками в световой панели под ним, после чего следует описание. Он подходит членам команды с одной строкой роли.
25. Стив
Название и описание появляются на своей белой полосе на изображении. Это подходит для высококонтрастных меток на занятых фотографиях.
26. Моисей
Название находится в поле вверху слева и описание во втором поле внизу справа. оно подходит для двух частей этикетки, такие как имя и цена.
27. Джаз
Название и описание сосредоточены, а по углам прорезаны диагональные линии. Это подходит для мероприятий и музыкальных произведений.
28. Мин
Рамка окружает центр с заголовком над описанием. Он подходит для официальных карт, таких как награды или сертификаты.
29. Лекси
Название находится вверху слева, а описание находится внизу справа внутри изогнутой линии. Он подходит для игривых плиток продукта и образа жизни.
30. Герцог
Название находится вверху, а описание находится в поле внизу слева. Оно подходит для карточек с короткой меткой, которая должна читаться как тег.
Все 30 эффектов наведения изображения в одной таблице
В этой таблице перечислены все эффекты с отображаемыми текстовыми слоями и нужен ли ему Pro.
| Эффект | Показывает на hover | Потребности про |
|---|---|---|
| ландыш | Название и описание | Нет |
| Сэди | Название и описание | Нет |
| рокси | Название и описание | Нет |
| пьяница | Название и описание | Нет |
| Ромео | Название и описание | Нет |
| Лейла | Название и описание | Нет |
| мед | Название и подзаголовок | Нет |
| Оскар | Название и описание | Нет |
| марли | Название и описание | Да |
| рубин | Название и описание | Да |
| милю | Название и описание | Да |
| ловкий | Название и описание | Да |
| Сара | Название и описание | Да |
| Зои | Название, описание и социальные значки | Да |
| шикарный | Название и описание | Да |
| Юлия | Название и три строки | Да |
| Голиаф | Название и описание | Да |
| герой | Название и социальные иконы | Да |
| Уинстон | Название и социальные иконы | Да |
| Селена | Название и описание | Да |
| мах | Название и социальные иконы | Да |
| Фиби | Название и социальные иконы | Да |
| Аполлон | Название и описание | Да |
| кира | Название, описание и социальные значки | Да |
| Стив | Название и описание | Да |
| Моисей | Название и описание | Да |
| джаз | Название и описание | Да |
| звено | Название и описание | Да |
| лекси | Название и описание | Да |
| герцог | Название и описание | Да |
Как добавить один из этих эффектов в Элементор
Добавление эффекта занимает один виджет и один раскрывающийся список.
- Отредактируйте свою страницу с помощью Elementor и перетащите ее Эффекты наведения изображения виджет на него.
- Загрузите изображение под Эффекты и изображение.
- Выберите эффект по имени Эффект наведения.
- Заполните Название и Описание. Эффекты со значками также отображают раздел "Социальные ссылки".
- Набор Ссылки или всплывающие окна? если щелчок должен куда-то вести.
Для сетки поместите один виджет в столбец и используйте тот же эффект по всей строке. Наше пошаговое руководство по добавление эффектов наведения изображения в Elementor охватывает и встроенные опции. подписи, которые остаются на изображении см Текст элементара поверх изображения.
Часто задаваемые вопросы
Что такое эффекты наведения изображения?
Эффекты наведения изображения - это анимации, которые запускаются, когда посетитель перемещает указатель по изображению. Изображение может увеличивать, затемнять или изменять цвет, а заголовок или описание часто скользит или исчезает поверх него. Их также называют эффектами опрокидывания изображения или наложениями изображения.
Какие эффекты наведения изображения работают без Master Addons Pro?
Восемь из 30: Лили, Сэди, Рокси, Бубба, Ромео, Лейла, Хани и Оскар. они первые восемь записей в раскрывающемся списке Hover Effect.Остальным 22, от Марли до Дьюка, нужны Master Addons Pro.
Могу ли я использовать разный эффект наведения на каждое изображение?
Да. каждый виджет "Эффекты наведения изображения" содержит одно изображение и один эффект, поэтому каждая карта в сетке может иметь свой собственный. Для аккуратной страницы сохраняйте один эффект на строку или на раздел.
Нужен ли этим эффектам наведения изображения собственный CSS?
Нет. Вы выбираете эффект от раскрывающегося списка, и виджет поставляет CSS. цвета, непрозрачность и типографика установлены на вкладке Стиль. если вы предпочитаете писать CSS самостоятельно, несколько строк на виджете Image от Elementor могут производить простые эффекты, такие как масштабирование или оттенок серого.
Какой эффект зависания лучше всего подходит для командной секции?
Эффекты с социальными значками подходят под командные карты: Зои, Геры, Уинстона, Терри, Фиби и Киры. также Зои и Кира показывают описание, которое работает как роль человека. всем шестерым нужны Master Addons Pro.
Заключительные мысли
Эти 30 эффектов наведения изображения охватывают большинство макетов, которые вам понадобятся: угловые подписи, центральные рамки, полосы, панели и ряды значков. выбирайте по тексту, который у вас есть. одно короткое название подходит Лили или Оскар, более длинное описание подходит Голиафу, а социальные ссылки вызывают Зою или Уинстона.
выше Страница виджета эффектов наведения изображения есть живые карты, которые стоит попробовать, и страница ценообразования перечисляет планы, включающие все 30.
Связанное чтение
