Изображение, которое показывает название и подпись на hover превращает плоскую галерею в то, к чему люди хотят прикоснуться.The Эффекты наведения изображения виджет в Мастер-аддоны для Elementor заворачивает любое изображение в анимацию наведения CSS, поэтому заголовок, описание и слайд ссылки, затухание или масштабирование появляются, когда на него попадает курсор.
Эта страница является ссылкой настройки. для живых демо эффектов и что бесплатно или Pro, см. Виджет эффектов наведения изображения Elementor страница.
Вы выбираете один из названных эффектов, опускаете изображение, добавляете накладной текст, затем стилизуете цвета и фильтры. не требуется пользовательский CSS. Это руководство охватывает каждый параметр виджета.
Что делает виджет Image Hover Effects #
Виджет берет одно изображение и роняет анимированное наложение сверху. Наведите на него и он может открыть заголовок, описание, а также кнопку или ссылку, при этом движение исходит от предустановленного эффекта. Есть 30 именованных эффектов. восемь бесплатны (Лили, Сэди, Рокси, Бубба, Ромео, Лейла, Хани и Оскар) и еще 22 поставляются с Master Addons Pro.
Три вкладки запускают его. Содержание удерживает эффект, изображение и накладной текст. Стиль обрабатывает непрозрачность изображения, фильтры, границы, а также цвета заголовка и описания. Продвинутый это обычное расстояние и видимость Элементора.
Прежде чем начать #
- WordPress с Элементор установлен и активен.
- Мастер-аддоны для Elementor установлен и активен. Новое в плагине? Видеть руководство установки.
- Изображение, а также текст заголовка и подписи, который вы хотите показать на ховере.
Как добавить виджет "Эффекты наведения изображения" #
В редакторе Elementor откройте Элементы панель и поиск Эффекты наведения изображения, или прокрутить в раздел Главные дополнения (виджеты несут фиолетовый значок МА). перетащите его на страницу, и он загружается образцом изображения и наложения, которое вы можете редактировать.
Выберите эффект и изображение #
Открыть Содержание вкладка. Эффекты и изображение раздел - это место, где вы устанавливаете анимацию наведения и загружаете изображение.
- Эффект наведения: названная анимация, используемая при наведении курсора (подробнее об этом далее).
- Загрузить изображение: выберите изображение из медиатеки.
- Размер изображения и разрешение изображения: урожай и резолюция послужили.
- Ссылки или всплывающие окна?: сделайте все изображение ссылкой или откройте всплывающее окно (всплывающему контенту нужен Pro).
Выберите эффект зависания #
The Эффект наведения выпадающий список 30 названных CSS эффектов Первые восемь свободны, а остальные отмечены Pro. каждый оживляет изображение и накладываемый текст по-разному, от мягкого затухания до подписи, которая вставляется.
- Сэди, Лили, Лейла: заглавие и подпись выцветают поверх затемненного изображения.
- Рокси, Бубба, Ромео: вставьте границу или панель с текстом.
- Дорогая, Оскар, Марли (Профессионал): раскройте подчеркивание или движущуюся подпись.
- Варианты масштабирования и размытия: масштабируйте или смягчайте изображение за текстом.
Выберите изображение #
Нажмите Загрузить изображение чтобы открыть медиатеку, затем выберите или загрузите изображение. Какой бы эффект вы ни выбрали, он работает поверх этого изображения.
Добавить заголовок #
Открыть Заголовок раздел для заголовка, который отображается на hover. Введите текст и установите тег HTML, чтобы он правильно читался для SEO.
- Название: текст заголовка Если ваш сайт использует Elementor AI, здесь также отображается собственная ссылка Elementor "Написать с помощью AI".
- Тег HTML: уровень курса от H1 до H6.
Добавить описание и ссылку #
Открыть Описание раздел для добавления подписи, которая отображается под заголовком на hover.Back in Эффекты и изображениеесли вы установите Ссылки или всплывающие окна? всплывающему окну Тип контента и Содержание поля решают, что показывает всплывающее окно Всплывающий контент нуждается в Pro.
- Тип контента: что показывает всплывающее окно: изображение, текст, сохраненный раздел, сохраненный виджет или сохраненный шаблон страницы (Pro).
- Содержание: всплывающий текст, отредактированный в полном поле WYSIWYG.
- Ссылки или всплывающие окна?: укажите изображение на URL-адрес или откройте его во всплывающем окне.
Стиль изображения и наложения #
Открыть Стиль вкладка. Изображение раздел управляет тем, как изображение выглядит до и во время зависания, и именно отсюда на самом деле возникает большая часть эффекта.
- Непрозрачность изображения и непрозрачность наведения: насколько видно изображение в состоянии покоя и на зависании.
- Фильтр изображений и фильтр изображений наведения: размытие, яркость и контрастность для каждого состояния.
- Граница, Радиус границы (Pro), Тень коробки: рамка вокруг изображения.
Под разделом Изображение, раздельный Название и Описание разделы обрабатывают цвет и типографику накладного текста.
Обычные случаи использования #
- Портфели раскрытие имени проекта и ссылки при наведении.
- Командные сетки показ имени и роли на каждой фотографии.
- Плитки обслуживания с заголовком и короткой подписью на изображение.
- Миниатюры блога это означает, что заголовок сообщения находится на ховере.
- Галереи продуктов сопряжение изображения с именем и кнопкой.
Советы по работе с виджетом Image Hover Effects #
- Используйте четкие изображения. Наложение затемняет картинку, поэтому занятой кадр может сделать текст трудночитаемым. более спокойное изображение с комнатой посередине работает лучше всего.
- Держите подпись короткой. Одна строка под заголовком читается лучше, чем абзац, впихнутый в наложение.
- Сопоставьте эффект с содержанием. Тонкие блеклости подходят портфолио; смелые слайды подходят для промо.
- Установите правильный тег заголовка. Используйте для названий галерей H2 или H3, а не H1, если только это не основной заголовок страницы.
- Тест на мобильном. Нажатие на касание отсутствует, поэтому проверьте, что наложение все еще имеет смысл, когда вместо этого кто-то нажимает.
Смотрите видеоурок #
Предпочитаете следовать на экране? Видеоурок ниже проходит через элемент "Эффекты наведения изображения" от начала до конца, показывая, как эффекты, наложение текста и стиль работают в редакторе Elementor.
Часто задаваемые вопросы #
Что такое виджет Image Hover Effects в Master Addons?
Это виджет Elementor, который добавляет к изображению CSS-анимацию наведения на поверхность. При наведении он показывает заголовок, подпись и дополнительную ссылку, при этом движение исходит от именованного эффекта предустановки. Все устанавливается с панели Elementor без кода.
Сколько эффектов наведения включает виджет?
Тридцать. Восемь бесплатны (Сэди, Лили, Рокси, Бубба, Ромео, Лейла, Хани и Оскар), а остальные 22 поставляются с Master Addons Pro. Каждый оживляет изображение и накладывает текст по-своему.
Могу ли я добавить ссылку или кнопку к изображению?
Да. опция Ссылки или всплывающее окно может сделать все изображение ссылкой в бесплатной версии. с помощью Pro он может открыть всплывающее окно вместо этого, показывая изображение, текст или сохраненный шаблон Elementor.
Могу ли я показать заголовок и подпись на ховере?
Да. раздел Заголовок устанавливает заголовок и его тег HTML, а поле Описание добавляет под ним подпись Оба появляются как часть анимации наведения, поэтому изображение остается чистым, пока кто-то не зависает над ним.
Работают ли эффекты наведения изображения на мобильных устройствах?
Наведение курсора - это взаимодействие с рабочим столом, поэтому сенсорные устройства не имеют настоящего зависания. Многие эффекты по-прежнему показывают наложение на касание, но вы должны протестировать на телефоне и сохранить текст ключа видимым или доступным, особенно если изображение также является ссылкой.
Завершая #
The Виджет эффектов наведения изображения превращает статическое изображение в интерактивное: выберите эффект, загрузите изображение, добавьте заголовок и подпись, затем создайте стиль непрозрачности, фильтров и текста. Чтобы узнать о связанных виджетах, см Виджет информационного ящика и Виджет Flipbox, просмотр всего Виджеты и расширения Master Addgetsи проверьте страница ценообразования за то, что включает каждый план.
