Як додати ефекти наведення на зображення у 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 у рядку пошуку.

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

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

• З'явиться спливаюче вікно. Виберіть потрібний макет (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 або конструкторів сторінок, ви маєте свободу вибору того, що найкраще підходить для вас. Експериментуйте з різними стилями, щоб знайти той, який найкраще підходить для вашого сайту!