Перейти к основному контенту

Эффекты для WordPress

Зачем нужны плагины эффектов

Плагины WordPress — это маленькие программы, которые помогают сконфигурировать и оформить сайт перед размещением контента на нём. С их помощью можно решать многие задачи — от настройки поисковой оптимизации до добавления контактных форм и размещения интернет-магазина. Плагинами очень просто пользоваться благодаря интуитивно понятному интерфейсу.

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

Mouse cursor customizer

Плагин Mouse cursor customizer (настройщик курсора мышки) позволяет заменить стандартный курсор на любое изображение в форматах PNG, JPG и JPEG. Загрузите изображение, и пользователи вашего сайта будут видеть новый необычный курсор. На странице можно установить один вид курсора, а при наведении на ссылки или кнопки — другой. Также можно регулировать его размер.

Пример обновлённого курсора ниже. Заметьте, что при наведении на ссылку он меняется:

Эффекты для WordPress плагин Mouse cursor customizer

Weather Effect

С помощью плагина Weather effect (Погодные эффекты) можно добавить на страницы сайта разные «падающие» объекты. Это могут быть погодные явления разных времён года (например снежинки, звёздочки, солнышки, капли дождя, осенние листья) или объекты, приуроченные к праздникам (валентинки, шарики, рождественские подарки). Все объекты разбиты на группы по темам: Рождество, зима, осень, весна, лето, дождь, Хэллоуин, День благодарения, День святого Валентина, Новый год. Вы можете регулировать размер объектов, их количество и скорость падения на странице сайта.

Посмотрите, как может выглядеть на вашей странице плагин WordPress Эффект воды:

Эффекты для WordPress плагин Weather Effect

Easy Textillate

Плагин Easy Textillate предназначен для анимации текста на сайте. Он очень прост в использовании. Вы добавляете какой-либо текст в окно редактирования и выбираете нужные эффекты Вордпресс. В окне предпросмотра можно сразу увидеть, как будет выглядеть анимация на сайте. При этом автоматически создаётся шорткод. Вам остаётся только скопировать шорткод и добавить его на страницы, в записи или виджеты сайта (например календарь, облако меток, поиск).

Плагин имеет большое количество эффектов для начальной и конечной анимации — как текст появляется на странице и как он исчезает. Вы можете использовать дополнительные опции шорткода: выбрать шрифт для текста, его цвет и размер.

Как выглядит создание анимации для текста в редакторе:

Эффекты для WordPress плагин Easy Textillate 1

Скопируем полученный шорткод и добавим его на страницу сайта в редакторе:

Эффекты для WordPress плагин Easy Textillate 2

А вот как выглядит результат на сайте — теперь текст стал анимированным:

Эффекты для WordPress плагин Easy Textillate 3

Image Hover Effects Ultimate

Плагин Image Hover Effects Ultimate нужен для добавления hover-эффекта — эффекта наведения. Это значит, что при наведении курсора на изображение или текст появляется анимация.

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

Рассмотрим примеры. Один из эффектов плагина — General Effects:

Эффекты для WordPress плагин Image Hover Effects Ultimate 1

Эффект Flipbox Effects:

Эффекты для WordPress плагин Image Hover Effects Ultimate 2

Hover Effects — easily create any hover effect

Ещё один плагин Hover Effects с 39 интересными эффектами для WordPress. Можно добавить анимацию при наведении курсора как на изображение, так и на текст.

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

Эффекты для WordPress плагин Hover Effects — easily create any hover effect 1

Затем можно нажать на понравившийся эффект. Автоматически скопируется код. Когда вы будете редактировать запись или страницу, добавьте этот код в поле «Дополнительные классы CSS»:

Эффекты для WordPress плагин Hover Effects — easily create any hover effect 2

Пример двух разных эффектов анимации текста и изображения на сайте:

Эффекты для WordPress плагин Hover Effects — easily create any hover effect 3

Image Hover Effects Addon for Elementor

С помощью Image Hover Effects Addon for Elementor также можно добавлять эффекты при наведении курсора. Этот плагин можно использовать, если у вас есть плагин Elementor. Например, на хостинге для WordPress он уже установлен.

С плагином Image Hover Effects Addon for Elementor можно настроить эффект анимации — при наведении курсора на изображение будет появляться текст. Начните редактировать страницу через конструктор страниц Elementor. Затем перетащите виджет Image Hover Effects, выберите вид анимации, изображение и введите текст, который будет появляться при наведении:

Эффекты для WordPress плагин Image Hover Effects Addon for Elementor 1

Пример анимации на сайте:

Эффекты для WordPress плагин Image Hover Effects Addon for Elementor 2

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 2 из 2