Как добавить эффекты наведения на изображения в WordPress (5 простых способов)

Добавление эффекта наведения на ваш сайт может показаться мелочью, но оно может улучшить внешний вид и удобство использования сайта. Когда посетители наводят курсор на изображение или кнопку и видят, что оно слегка меняется, это сигнализирует о том, что элемент является интерактивным. 

Это тонкое движение улучшит взаимодействие и поможет снизить процент отказов. Эффекты наведения особенно полезны в электронной коммерции. Они позволяют покупателям более детально просматривать товары, побуждая их к дальнейшему изучению и переходу к оформлению заказа.

Существует множество способов добавить эффекты наведения на изображения в WordPress, от простых затуханий до привлекательных анимаций переворота. Ниже вы найдете несколько методов, чтобы начать!

Как добавить эффекты наведения на изображения в WordPress

В этой статье мы собрали пять простых способов добавить эффекты наведения на ваш сайт. Выберите тот, который лучше всего подходит вам!

Метод 1: Использование плагина

Плагин сэкономит вам много времени и сил, особенно если вы хотите использовать несколько эффектов наведения на одном сайте.

Например, если у вас есть несколько галерей изображений, вы можете применить разные анимации к каждой, такие как простой зум для миниатюр блога или эффект переворота для изображений товаров.

Использование плагина вроде Image Hover Effects Ultimate значительно упрощает этот процесс. Этот плагин бесплатен для всех и предлагает широкий спектр эффектов для каждого элемента. Чтобы начать, просто установите его, следуя руководству ниже: 

Установка плагина

• Откройте административную область WordPress.
• Нажмите Добавить плагин из меню Плагины в боковой панели.

• Введите Image Hover Effects Ultimate

• Выберите первый результат и нажмите Установить сейчас для начала загрузки.
• После завершения установки нажмите кнопку Активировать, чтобы начать использовать плагин.

Использование плагина эффектов наведения изображения WordPress

• Once the plugin is installed, you'll see a new Image Hover menu in your dashboard.

• Нажмите на меню, чтобы открыть настройки плагина. 

• Выберите любые эффекты, которые вы хотите использовать. Для этого урока мы будем экспериментировать с Увеличителем изображения.
• После выбора эффекта вы увидите разнообразие стилей анимации.

Когда вы найдёте подходящий, нажмите Создать стиль

• Появится всплывающее окно. Введите название в поле Имя и выберите эффект из макета (1-й, 2-й или 3-й). Затем нажмите Сохранить для продолжения.
• Вы будете перенаправлены на новую страницу, где сможете настроить параметры, такие как высота, ширина и прозрачность. Поэкспериментируйте, чтобы увидеть, что выглядит лучше всего.

• Когда вы будете удовлетворены настройками, нажмите Редактировать

• Появится еще одно всплывающее окно. Здесь вы можете настроить позицию увеличения. 

• Вы также можете заменить изображение, нажав на кнопку Выбрать изображение.
• После настройки всего, нажмите Отправить для сохранения эффекта наведения.

• Чтобы применить эффект к вашему сайту, скопируйте и вставьте шорткод в вашу запись или страницу. 

• Теперь ваш простой эффект наведения изображения готов к использованию в любой части вашего сайта. 

Метод 2: Использование CSS

Вам не нужно устанавливать какие-либо плагины для этого метода. Используя пользовательский CSS, вы можете добавить различные эффекты наведения на вашу тему.

Мы начнём с чего-то простого, например, с эффекта подчёркивания при наведении. Если вы хотите добавить этот эффект к вашей теме, следуйте простым шагам ниже:

• Перейдите к публикации, где вы хотите добавить эффект наведения.
• Добавьте изображение, нажав на блок Обложка из +.

• Введите ваш контент в блок Обложка. Здесь мы добавим заголовок и кнопку.

• Установите шрифт и стили по вашему желанию.
• Сохраните страницу как черновик.
• Далее перейдите в меню Внешний вид в вашей панели управления.

• Затем, нажмите Настроить и перейдите к Дополнительный CSS. Добавьте следующий код:

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• Нажмите Опубликовать для сохранения кода.

• Теперь вернитесь к своему посту и выберите текст, к которому вы хотите применить эффект подчеркивания.
• Откройте раздел Дополнительно в боковой панели блока и введите underline-hover в поле Дополнительные классы CSS

• Сохраните страницу и просмотрите ее, чтобы увидеть эффект. 

Есть так много эффектов наведения на выбор, поэтому выберите тот, который лучше всего подходит вашему стилю. Вы можете либо научиться писать CSS самостоятельно, либо найти примеры из сообщества WordPress. Всё это есть!

Метод 3: Использование конструкторов страниц (например, Elementor)

Конструктор страниц, такой как Elementor, позволяет создавать веб-сайт с большой креативностью. Он имеет встроенные эффекты наведения, все готовы к использованию, чтобы оживить ваш сайт без необходимости кодирования.

Вы также можете использовать его для создания эффектов наведения на изображения в WordPress. В этом разделе мы поэкспериментируем со встроенными эффектами наведения в самом конструкторе страниц.

Чтобы настроить эффекты:

• Откройте редактор Elementor из панели администратора.
• Добавьте ваше изображение.

• Выберите изображение, затем перейдите на вкладку Стиль.
• Прокрутите вниз и нажмите Наведение.

• В выпадающем меню анимации наведения вы найдёте разнообразные готовые эффекты.

• Здесь мы выбрали эффект Расти в качестве примера. Затем вы можете настроить продолжительность перехода, прозрачность и другие параметры в соответствии с дизайном вашего сайта.

• После того, как вы закончите, вы сможете увидеть эффект сразу же, не нуждаясь в предварительном просмотре. 

Метод 4: Использование плагинов Flipbox

Если вы ищете сокращение, вы можете установить плагин flipbox. Эффект flipbox - это когда изображение переворачивается, чтобы показать содержимое на передней или задней части при наведении на него.

Этот эффект отлично подходит для фотографий, где вы можете отобразить фотографию на лицевой стороне и детали камеры на обратной стороне. Но возможности безграничны.

• Из панели управления WordPress нажмите на меню Плагины. Затем выберите Добавить плагин.
• Введите Flipbox - Awesome Flip Boxes Image Overlay в строке поиска.

• Нажмите Установить сейчас, затем Активировать

• Чтобы создать flipbox, перейдите в меню Flip Box и нажмите Создать новый.
• Выберите любую анимацию, которая вам нравится. Как только вы найдете подходящую, нажмите Создать стиль.

• Появится всплывающее окно. Выберите желаемый макет (1-й, 2-й или 3-й) и введите название. 

• Нажмите Сохранить
• Далее вы будете перенаправлены в меню настройки, где вы сможете задать эффекты и добавить содержимое.

• Прокрутите вниз, чтобы найти вкладку Предварительный просмотр. Нажмите Редактировать для настройки содержимого как передней, так и задней стороны flipbox.

• Когда закончите, нажмите Отправить для сохранения.

• Чтобы добавить этот flipbox на вашу страницу, просто скопируйте и вставьте сгенерированный шорткод в любой раздел вашего сайта. 

• И всё, вот готовый результат! 

Метод 5: Использование блоков Гутенберга

Gutenberg - это редактор блоков WordPress по умолчанию, позволяющий добавлять эффекты наведения непосредственно в редакторе.

Хотя он может не предлагать расширенные эффекты наведения, вы можете улучшить анимацию с помощью пользовательского CSS.

В качестве примера давайте создадим простой эффект затухания при наведении. Вот пошаговое руководство:

• Перейдите к записи или странице, где вы хотите добавить эффект наведения.
• Нажмите + чтобы добавить новый блок, затем выберите блок Обложка.

• Внутри блока Обложка добавьте блок Параграф.

• Введите заголовок и краткое описание.
• Настройте размер шрифта, непрозрачность, выравнивание и цвет по мере необходимости.

• Затем выберите Обложку блока, чтобы добавить пользовательский класс CSS.
• Откройте Дополнительные настройки в правой боковой панели.
• Введите fade-hover-effect в поле Дополнительный класс CSS .

• После этого сохраните страницу как черновик.

• Перейдите в меню Плагины и выберите плагин сниппета кода. В этом примере мы используем WPCode
• Создайте новый фрагмент CSS, затем вставьте следующий код:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• Сохраните фрагмент и активируйте его.
• Теперь просмотрите свою страницу, чтобы увидеть эффект наведения в действии.

Вы можете повторно использовать этот эффект, добавив класс fade-hover-effect к любому блоку или изображению. Но если вы работаете с большим количеством изображений, рассмотрите возможность использования плагина вроде WP Media Folder для организации вашей медиатеки в папки. Это упрощает поиск и повторное использование связанного контента.

Влияет ли использование слишком многих эффектов на производительность?

Да, использование слишком многих эффектов наведения на вашем сайте может потенциально повлиять на производительность, особенно если они не оптимизированы должным образом. Это связано с тем, что некоторые эффекты наведения требуют дополнительного CSS. Размер CSS вашего сайта может накапливаться и замедлять время загрузки страницы.

Лучше всего использовать только основные эффекты наведения, чтобы улучшить пользовательский опыт, не перегружая ваш сайт.

Заключение

Научиться добавлять эффекты наведения на изображения в WordPress может помочь повысить эффективность вашего сайта, улучшая взаимодействие с пользователем и удерживая его внимание.

С несколькими способами добавления эффектов наведения, будь то через плагины, пользовательский CSS или конструкторы страниц, у вас есть свобода выбора того, что лучше всего подходит для вас. Экспериментируйте с разными стилями, чтобы найти тот, который лучше всего подходит для вашего сайта!