Як додати ефекти наведення курсора миші на зображення у WordPress (5 простих способів)

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

Цей ледь помітний рух покращить залученість і допоможе зменшити показники відмов. Ефекти наведення курсора особливо корисні в електронній комерції. Вони дозволяють покупцям детальніше переглядати товари, спонукаючи їх до подальшого дослідження та переходу до оформлення замовлення.

Існує багато способів додавання ефектів наведення курсора на зображення в WordPress, від простих поступових переходів до привабливої ​​анімації перегортання. Нижче ви знайдете кілька способів для початку!

Як додати ефекти наведення курсора миші на зображення у WordPress

У цій статті ми зібрали п'ять простих способів додати ефекти наведення курсора на ваш сайт. Виберіть той, який вам найкраще підходить!

Спосіб 1: Використання плагіна

Плагін заощадить вам багато часу та зусиль, особливо якщо ви хочете використовувати кілька ефектів наведення курсора на одному сайті.

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

Використання плагіна, такого як Image Hover Effects Ultimate, значно спрощує цей процес. Цей плагін безкоштовний для всіх і пропонує широкий спектр ефектів для кожного елемента. Щоб розпочати, просто встановіть його, виконавши інструкції нижче: 

Встановлення плагіна

• Відкрийте адміністративну панель WordPress.
• Натисніть «Додати плагін» у «Плагіни» на бічній панелі.

• Введіть Image Hover Effects Ultimate у рядок пошуку.

• Виберіть перший результат і натисніть «Встановити зараз» , щоб розпочати завантаження.
• Після завершення встановлення натисніть «Активувати» , щоб почати використовувати плагін.

Використання плагіна WordPress «Ефекти наведення курсора на зображення»

• Після встановлення плагіна ви побачите нове Image Hover на своїй інформаційній панелі.

• Натисніть меню, щоб відкрити налаштування плагіна. 

• Виберіть будь-які ефекти, які ви хочете використовувати. У цьому посібнику ми будемо експериментувати зі Збільшувачем зображень .
• Після вибору ефекту ви побачите різноманітні стилі анімації.

Коли знайдете потрібний, натисніть «Створити стиль» .

• З’явиться спливаюче вікно. Введіть назву в «Ім’я» та виберіть ефект із макета (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::після, .hover-underline:hover::перед { трансформація: scaleX(1); }
 

• Натисніть кнопку «Опублікувати» , щоб зберегти код.

• Тепер поверніться до своєї публікації та виберіть текст, до якого ви хочете застосувати ефект підкреслення.
• Відкрийте «Додатково» на бічній панелі блоку та введіть underline-hover у «Додаткові класи CSS» .

• Збережіть сторінку та перегляньте її, щоб побачити ефект. 

Існує так багато ефектів наведення курсора, тож оберіть той, який найкраще відповідає вашому стилю. Ви можете або навчитися писати CSS самостійно, або знайти приклади у спільноті WordPress. Усі вони доступні!

Спосіб 3: Використання конструкторів сторінок (наприклад, Elementor)

Конструктор сторінок, такий як Elementor, дозволяє вам створювати вебсайт з великою кількістю креативності. Він має вбудовані ефекти наведення курсора, готові до використання, щоб оживити ваш сайт без необхідності написання коду.

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

Щоб налаштувати ефекти:

• Відкрийте Elementor з панелі адміністратора.
• Додайте своє зображення.

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

• У «Анімація при наведенні курсора » ви знайдете різноманітні готові до використання ефекти.

• Тут ми обрали «Збільшення» як приклад. Потім ви можете налаштувати тривалість переходу, непрозорість та інші параметри відповідно до дизайну вашого сайту.

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

Спосіб 4: Використання плагінів Flipbox

Якщо ви шукаєте швидкий доступ, ви можете встановити плагін flipbox. Ефект flipbox — це коли зображення перевертається, показуючи вміст на передній або задній стороні, коли ви наводите на нього курсор.

Цей ефект чудово підходить для фотографій, де можна відобразити фотографію на передній панелі, а деталі камери — на задній. Але можливості безмежні.

• На панелі інструментів WordPress натисніть Плагіни . Потім виберіть Додати плагін .
• Введіть Flipbox — чудове накладання зображень для фліпбоксів у рядку пошуку.

• Натисніть «Встановити зараз» , а потім активуйте плагін.

• Щоб створити фліпбокс, перейдіть до Фліпбокс і натисніть «Створити новий» .
• Виберіть будь-яку анімацію, яка вам подобається. Щойно ви знайдете потрібну, натисніть «Створити стиль» .

• З’явиться спливаюче вікно. Виберіть потрібний макет (1-й, 2-й або 3-й) та введіть заголовок. 

• Натисніть кнопку «Зберегти» , щоб продовжити.
• Далі ви потрапите до меню налаштування, де зможете встановити ефекти та додати свій контент.

• Прокрутіть униз, щоб знайти «Попередній перегляд» . Натисніть «Редагувати» , щоб налаштувати вміст як для передньої, так і для задньої частини фліпбоксу.

• Після завершення натисніть «Надіслати» щоб зберегти його.

• Щоб додати цей фліпбокс на свою сторінку, просто скопіюйте та вставте згенерований шорткод у будь-який розділ вашого сайту. 

• І все, ось готовий продукт! 

Спосіб 5: Використання блоків Гутенберга

Gutenberg – це редактор блоків WordPress за замовчуванням, який дозволяє додавати ефекти наведення курсора безпосередньо в редакторі.

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

Як приклад, давайте створимо простий ефект згасання при наведенні курсора. Ось покрокова інструкція:

• Перейдіть до публікації або сторінки, на яку потрібно додати ефект наведення курсора.
• Натисніть значок + , щоб додати новий блок, а потім виберіть «Обкладинка» .

• Всередині «Обкладинка» додайте «Абзац» .

• Введіть свою назву та короткий опис.
• За потреби налаштуйте розмір шрифту, непрозорість, вирівнювання та колір.

• Потім виберіть Cover , щоб додати власний CSS-клас.
• Відкрийте «Додатково» на правій бічній панелі.
• Введіть fade-hover-effect у поле «Додатковий клас CSS» .

• Після цього збережіть сторінку як чернетку.

• Перейдіть до Плагіни та виберіть плагін фрагмента коду. У цьому прикладі ми використовуємо WPCode .
• Створіть новий фрагмент CSS, а потім вставте наступний код:

.fade-hover-effect { непрозорість: 0; transform: translateY(10px); transition: непрозорість 0.4s легкість, transform 0.4s легкість; } .fade-hover-effect:hover { непрозорість: 1; transform: translateY(0); } 

• Збережіть фрагмент коду та активуйте його.
• Тепер перегляньте свою сторінку, щоб побачити ефект поступового наведення курсора в дії.

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

Чи впливає використання занадто великої кількості ефектів на продуктивність?

Так, використання занадто великої кількості ефектів наведення курсора на вашому сайті може потенційно вплинути на продуктивність, особливо якщо вони не оптимізовані належним чином. Це пояснюється тим, що деякі ефекти наведення курсора вимагають додаткового CSS. Розмір CSS вашого сайту може збільшувати розмір сторінки та уповільнювати її завантаження.

Найкраще використовувати лише необхідні ефекти наведення курсора, щоб покращити взаємодію з користувачем, не перевантажуючи ваш сайт.

Підсумок

Навчання тому, як додавати ефекти наведення курсора на зображення в WordPress, може допомогти покращити ваш сайт, покращуючи взаємодію з користувачами та підтримуючи їхню зацікавленість.

Завдяки кільком способам додавання ефектів наведення курсора, чи то за допомогою плагінів, користувацького CSS чи конструкторів сторінок, ви маєте свободу вибору того, що найкраще підходить саме вам. Експериментуйте з різними стилями, щоб знайти той, який найкраще підходить для вашого сайту!