• 0k
  • 0
Web design \ 15 Decembre 2014

Comment créer des effets remarquables pour vos images ?

La plateforme Wix a été conçue pour offrir à chacun une liberté complète de création Web. Si certains outils de design sont connus de tous, d’autres demeurent encore dans l’ombre malgré leur formidable potentiel. Nous avons décidé de mettre en lumière cette semaine une fonctionnalité spécifique qui peut être utile à chacun d’entre vous : générer un effet visuel sur une image au survol du curseur.

Le pourquoi du comment : une image qui change de look au passage de la souris (ou du curseur) rend votre site plus interactif, captive le regard de vos visiteurs et augmente vos chances d’obtenir des clics sur les éléments que vous présentez. Résultat, les internautes passeront plus de temps sur votre site – chose qui n’échappera pas à Google – et seront plus enclins à consommer. Comme vous en convenez, cette astuce mérite bien un petit tutoriel.

L’exemple de Naomi

Naomi utilise ces effets parfaitement. Notre premier réflexe en faisant défiler son site est de nous arrêter sur chacune de ses images en noir et blanc qui révèlent leurs couleurs lorsque notre curseur les survole.  Pour tout vous dire, la beauté de la chose relève aussi des combinaisons de couleurs minimalistes qui caractérisent ses visuels et de l’utilisation aérée de l’espace dans sa mise en page. Un design remarquable, en effet(s) :

Site de Naomiki avec des effets sur les images avant-après survol de la souris

Comment reproduire cet effet sur votre site ?

Sans plus attendre, le tutoriel détaillé pour donner vie à vos images comme l’a fait Naomi :

Dans l’éditeur, cliquer sur l’icône Ajouter  > Boutons & Menus  > Bouton Image

Tutoriel Wix : ajouter des effets sur vos images. Etape 1

Effectuez un double-clic sur le bouton image par défaut (une flèche bleue) pour accéder aux paramètres

Tutoriel Wix : ajouter des effets sur vos images. Etape 2

Sélectionnez votre image par défaut (avant le passage du curseur) et au survol (pendant le passage du curseur)

Tutoriel Wix : ajouter des effets sur vos images. Etape 3

Et voilà le résultat ! Pas mal, non ?

Image avec effet au survol

Remarque : étant donné qu’il s’agit d’un bouton, votre image doit renvoyer vers une page. Prenez soin de sélectionner une destination pertinente pour les surfeurs curieux. Une page de produits/services par exemple.

Tutoriel Wix : ajouter des effets sur vos images. Etape 4

Astuce : il est préférable de préparer vos différents visuels à l’avance. Nous suggérons de modifier vos images directement dans l’éditeur en utilisant notre outil d’édition d’images intégré. Vous pouvez utiliser l’effet classique noir et blanc/couleurs ou sépia/couleurs mais n’hésitez pas essayer des concepts plus originaux comme flou/net ou vintage/classique. C’est à vous de voir.

éditeur d'images Wix

Deux bons tuyaux pour la route :

Maintenant que vous maîtrisez le fonctionnement du bouton image, il ne vous reste qu’à donner libre cours à votre créativité. Ci-dessous, quelques pistes qui pourraient vous plaire :

Utilisez un texte Pop-Up qui apparait quand un visiteur navigue à proximité d’un visuel :

Image pop-up invisible

Inclinez votre image « au survol » pour signaler à vos visiteurs où cliquer :

Effet d'inclinaison

Créez votre propre site gratuitement dès aujourd’hui !

Abonnez-vous à notre newsletter pour vous tenir informé de nos meilleurs conseils :



Recevez le
par e-mail !

Rejoignez le blog de Wix Ne manquez rien de notre actu !

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

Rejoignez-nous ! \ 

Découvrez nos conseils en web design, en marketing digital,
et suivez toute l'actu Wix ! Pas de spam. Promis.

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