• 0k
  • 0
Веб-дизайн \ 18 Декабрь 2014

Хитрости Wix: как создать красивый hover-эффект

В редакторе Wix предусмотрено очень много возможностей для создания красивых и необычных сайтов. Некоторые из них довольно очевидные, а про другие нужно специально узнавать. Мы, кстати, ведем этот блог в том числе и для того, чтобы рассказывать вам обо всяких таких штуках. Героем сегодняшнего поста станет интересная функция под названием hover-эффект, или, если подробнее, — эффект, возникающий в тот момент, когда посетитель сайта наводит курсор мышки на изображение.

Смысл hover-эффекта в том, что он превращает обычные сайты в интерактивные и «отзывчивые». Попадая на них, пользователь начинает с интересом наводить курсор на все подряд и смотреть, что происходит. В результате он проводит на сайте немало времени, что дает ему возможность разглядеть товары, и, возможно, подписаться на рассылку или совершить покупку.

Отличный пример использования hover-эффекта

Согласитесь, что hover-эффект на сайте дизайнера Наоми Кижнер более, чем уместен. Вам ведь наверняка захотелось навести курсор на каждую фотографию, чтобы она превратилась из черно-белой в цветную? Кстати, обратите внимание на дизайн и цветовое решение. Придумав использовать hover-эффект, Наоми выбрала неяркий серый фон и остановилась на очень простом шаблоне. И все правильно сделала!

Сайт Наоми Кижнер

 

Как это сделать в редакторе Wix

Пожалуй, пора переходить к практике. Зайдите в редактор Wix, нажмите кнопку «Добавить», выберите пункт «Кнопки и Меню», а затем — «Кнопка с Фото».

Добавляем кнопку с фото.

Кликнув два раза по появившейся в окошке редактора кнопке, вы активируете панель с ее настройками.

Открывойте настройки кнопки.

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

Выберите изображения.

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

Как это будет выглядеть при наведении курсора.

Не забывайте, что раз уж это кнопки, то при их нажатии должно что-то происходить. Люди любят кликать по картинкам со всякими эффектами, поэтому дайте им эту возможность и переведите их туда, куда вам нужно — на страничку с товарами, например.

Не забудьте привязать ссылку.

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

Редактировать изображения  можно прямо в редакторе Wix.

 

Как еще можно использовать hover-эффект

Теперь, когда вы узнали что это за эффект и как его сделать, попробуйте поэкспериментировать. Вот несколько интересных идей:

  • При наведении курсора на картинке могут появляться коротенькие тексты — и мотивировать посетителей на какое-то действие.

Можно добавить текст.

  • Попробуйте сделать так, чтобы при наведении курсора картинки двигались, поворачивались или наклонялись.

Можно создать эффект движения.

  • А иконки — неожиданно меняли цвет.

Можно сделать так, чтобы иконка меняла цвет.

Как видите, вариантов немало, сделать такое под силу каждому, а результат понравится всем: и вам, и вашим пользователям.

Понравилась статья? Подпишитесь на нашу рассылку и будьте в курсе всех секретов редактора Wix:



Оставайтесь в курсе
новинок блога

Подпишитесь на блог и не пропустите ни одной статьи!

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email

Давайте дружить \ 

Подпишитесь на нашу рассылку и получайте
новые статьи блога прямо себе на почту.

Hmmm, that's not a valid email address.

Hmmm, that's not a valid email address. Email already exists

Hmmm, that's not a valid email address. Invalid email