Хитрости Wix: как создать красивый hover-эффект
В редакторе Wix предусмотрено очень много возможностей для создания красивых и необычных сайтов. Некоторые из них довольно очевидные, а про другие нужно специально узнавать. Мы, кстати, ведем этот блог в том числе и для того, чтобы рассказывать вам обо всяких таких штуках. Героем сегодняшнего поста станет интересная функция под названием hover-эффект, или, если подробнее, — эффект, возникающий в тот момент, когда посетитель сайта наводит курсор мышки на изображение.
Смысл hover-эффекта в том, что он превращает обычные сайты в интерактивные и «отзывчивые». Попадая на них, пользователь начинает с интересом наводить курсор на все подряд и смотреть, что происходит. В результате он проводит на сайте немало времени, что дает ему возможность разглядеть товары, и, возможно, подписаться на рассылку или совершить покупку.
Отличный пример использования hover-эффекта
Согласитесь, что hover-эффект на сайте дизайнера Наоми Кижнер более, чем уместен. Вам ведь наверняка захотелось навести курсор на каждую фотографию, чтобы она превратилась из черно-белой в цветную? Кстати, обратите внимание на дизайн и цветовое решение. Придумав использовать hover-эффект, Наоми выбрала неяркий серый фон и остановилась на очень простом шаблоне. И все правильно сделала!
Как это сделать в редакторе Wix
Пожалуй, пора переходить к практике. Зайдите в редактор Wix, нажмите кнопку «Добавить», выберите пункт «Кнопки и Меню», а затем — «Кнопка с Фото».
Кликнув два раза по появившейся в окошке редактора кнопке, вы активируете панель с ее настройками.
Теперь вам надо решить, как эта кнопка будет выглядеть, когда ее никто не трогает (Вид по умолчанию), и когда пользователь наводит на нее курсор (Вид при наведении). Нажав на кнопку «Заменить фото», вы сможете загрузить нужные вам изображения.
После этого кнопки на вашем сайте будут выглядеть вот так:
Не забывайте, что раз уж это кнопки, то при их нажатии должно что-то происходить. Люди любят кликать по картинкам со всякими эффектами, поэтому дайте им эту возможность и переведите их туда, куда вам нужно — на страничку с товарами, например.
Подсказка: для создания кнопки с hover-эффектом вам понадобятся два варианта одной и той же фотографии, допустим, цветная и черно-белая. Обработать снимки вы можете прямо в нашем встроенном редакторе изображений.
Как еще можно использовать hover-эффект
Теперь, когда вы узнали что это за эффект и как его сделать, попробуйте поэкспериментировать. Вот несколько интересных идей:
При наведении курсора на картинке могут появляться коротенькие тексты — и мотивировать посетителей на какое-то действие.
Попробуйте сделать так, чтобы при наведении курсора картинки двигались, поворачивались или наклонялись.
А иконки — неожиданно меняли цвет.
Как видите, вариантов немало, сделать такое под силу каждому, а результат понравится всем: и вам, и вашим пользователям.
