Хитрощі Wix: як створити гарний hover-ефект

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

Hover-ефект – ефект, що виникає в той момент, коли відвідувач сайту наводить курсор мишки на зображення.

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

Чудовий приклад використання hover-ефекту.

Погодьтеся, що hover-ефект на сайті дизайнера Наомі Кіжнера більш, ніж доречний. Вам адже напевно захотілося навести курсор на кожну фотографію, щоб вона перетворилася з чорно-білої в кольорову? До речі, зверніть увагу на дизайн і колірне рішення. Придумавши використовувати hover-ефект, Наомі вибрала неяскравий сірий фон і зупинилася на дуже простому шаблоні.

hover-effect1[1]

Як це зробити в редакторі Wix?

Зайдіть в редактор Wix, натисніть кнопку «Додати», виберіть пункт «Кнопки і Меню», а потім – «Кнопка з Фото».

hover-effect2[1]

Клікнувши два рази по віконцю, яке з’явиться в редакторі кнопки, ви активуєте панель з її налаштуваннями.

hover-effect3[1]

Тепер вам треба вирішити, як ця кнопка буде виглядати, коли її ніхто не чіпає (Вид за замовчуванням), і коли користувач наводить на неї курсор (Вид при наведенні). Натиснувши на кнопку «Замінити фото», ви зможете завантажити потрібні вам зображення.

hover-effect4[1]

Після цього кнопки на вашому сайті будуть виглядати ось так:

hover-effect5[1]

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

hover-effect6[1]

Підказка: для створення кнопки з hover-ефектом вам знадобляться два варіанти однієї і тієї ж фотографії, припустимо, кольорова і чорно-біла. Обробити знімки ви можете прямо в вбудованому редакторі зображень WiX.

hover-effect7[1]

Як ще можна використовувати hover-ефект?

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

  • При наведенні курсору на зображенні можуть з’являтися коротенькі тексти – і мотивувати відвідувачів на якусь дію.

hover-effect8[1]

  • Спробуйте зробити так, щоб при наведенні курсору картинки рухалися, поверталися або нахилялися.

hover-effect9[1]

  • А іконки – несподівано змінювали колір.

hover-effect10[1]

 

Як бачите, варіантів чимало, зробити таке під силу кожному, а результат сподобається всім: і Вам, і Вашим користувачам.

За матеріалами WiX.com

Leave a Comment

Ваша пошт@ не публікуватиметься. Обов’язкові поля позначені *