• 0k
  • 0
Actualités Wix \ 19 Mars 2013

Tutoriel HTML5: Créer Un Menu Avec Une Image En Mosaïque

Saviez-vous qu’il est possible de découper une image en mosaïque et de vous en servir pour créer un menu ? Voici un exemple de ce qu’il est possible de faire.

Cette galerie peut servir d’alternative à votre menu de navigation habituel. Avec un peu de créativité vous donnerez une nouvelle dimension à votre page d’accueil ou de produits/services.Il suffit de fractionner votre image en quatre segments et de les connecter aux pages de votre choix. Il est bien entendu possible de découper votre image à volonté tant que vous respectez les paramètres présentés ci-dessous.

Tutoriel pour: créer un menu avec une image découpée en mosaïque

L’outil en ligne Image Splitter pourra vous être très utile afin de segmenter votre photo. Il vous suffit de l’importer et d’indiquer le nombre de visuels que vous souhaitez générer. Splitter vous renverra votre image sous format zip et en petits morceaux.

Tutoriel pour: créer un menu avec une image découpée en mosaïque

Comment Procéder ?

Tutoriel pour: créer un menu avec une image découpée en mosaïque
  • Ajoutez les pages que vous désirez connecter à vos images, et préparez vos liens.
Tutoriel pour: créer un menu avec une image découpée en mosaïque
  • Prenez soin de vérifier que vous disposez d’assez de place et organisez vos pages.
  • Sur le menu de gauche : cliquez sur « Ajouter », « Galerie » puis « Grid ».
Tutoriel pour: créer un menu avec une image découpée en mosaïque
  • Dans les paramètres, modifiez le nombre de colonnes et de rangées selon vos besoins.
  • Puis, dans la case « En cliquant sur l’image », sélectionnez « Etre dirigé vers un lien spécifique »
Tutoriel pour: créer un menu avec une image découpée en mosaïque
  • Cliquez sur « Organiser les images » pour importer les photos que vous avez préparées.
Tutoriel pour: créer un menu avec une image découpée en mosaïque
  • Jouez avec l’ordre des morceaux jusqu’au moment où votre puzzle sera en place.
  • Cliquez sur chaque image séparément afin de la configurer. Ajoutez vos titres et descriptions.
Tutoriel pour: créer un menu avec une image découpée en mosaïque
  • Allez sur « connecter à un lien » et sélectionnez la page qui répond à vos besoins (dans la catégorie « page »).
Tutoriel pour: créer un menu avec une image découpée en mosaïque
  • Une fois votre galerie entièrement organisée, il ne vous reste plus qu’à la personnaliser. Cliquez sur Galerie, puis «Changer Style » et modifiez le design selon vos goûts.
Tutoriel pour: créer un menu avec une image découpée en mosaïque

C’est tout, votre menu est en ligne !

Lire aussi: Les ressources d’images gratuites à connaître.


Recevez le
par e-mail !

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

Adresse courriel invalide.

l\'email existe déjà

Adresse courriel invalide.

Rejoignez-nous ! \ 

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

Adresse courriel invalide.

l'email existe déjà

Adresse courriel invalide.