comment réaliser une wishlist cliquable

Comment réaliser une wishlist cliquable

16 Commentaires .

comment réaliser une wishlist cliquable

Depuis quelques temps, je vois beaucoup de personne demander sur des groupes Facebook comment faire une wishlist cliquable. Plusieurs utilisaient ou utilise des services tel que RewardStyle ou encore utilise des plugins ou des galeries d’image.

Pour ma part, je n’aimais pas beaucoup ces solutions alors j’ai cherché plus loin mon investigation. C’est mon petit côté geek qui ressort ! Finalement, j’ai trouvé la solution parfaite dans le logiciel Corel Paint Shop Pro (payant) ou utiliser la version d’essais.

 

Réaliser une wishlist cliquable

Tout d’abord nous devons créer notre image qui sera notre wishlist. Pour ce faire, j’ai utilisé le site Canva. Voici le résultat :

wishlist

Maintenant nous voulons rendre cette image cliquable pour que chaque objet pointe vers le site web ou les trouver. Vous ouvrez votre image dans Paint Shop Pro et vous allez dans fichier/exporter/image cliquable :

image cliquable

Vous aurez alors une fenêtre qui va apparaitre :

cliquable

En dessous de l’image, vous devrez cliquer sur le petit rectangle afin de délimiter les zones cliquable de votre image comme ceci :

tuto_cliquable

Pour chaque région cliquable, vous devez mettre le lien dans l’emplacement URL : Refaire la même chose pour toutes les zones cliquables

url

Une fois toute les zones cliquable fait, il ne faut pas oublier de mettre le bon format d’image (JPG) et de cliquer sur optimiser l’image afin de réduire le poids de celle-ci afin de ne pas ralentir la vitesse de chargement de votre article.

format

Insérer l’image cliquable dans votre article

Une fois que vous avez cliquez sur enregistrer on vous demandera d’enregistrer un fichier html ainsi que votre image. La première des choses à faire est d’uploader votre image dans vos média afin d’avoir le lien de partage de cette image. Copier et coller ce lien dans le bloc-notes pour plus tard car vous en aurez de besoin.

media

Ensuite il faut insérer le code html de votre image cliquable. Vous pouvez vous servir d’un éditeur web tel que dreamweaver ou sublime text ou simplement ouvrir votre fichier html avec bloc note.

editeur

Vous devez copier la partie entre <body> et </body> et la coller dans votre éditeur sur votre blog dans l’onglet texte puisque c’est du code html.

article

Puisque votre image est maintenant sur le serveur du blog on doit changer le chemin menant à cette image dans le code html. Donc comme dans l’image ci-haut on doit coller le lien de votre image après img src=« .

Félicitation vous avez votre wishlist cliquable !! Pour voir le résultat rendez-vous sur mon article wishlist de la fête des mères.

Si vous avez des questions sur ce tutoriel, n’hésitez pas à m’écrire; Il me fera plaisir de vous répondre !

 

Vous aimez cet article ? N’hésitez pas à le partager !

Rendez-vous sur Hellocoton !

You Might Also Like

16 Comments

  • Reply
    Aipaminomdas
    3 décembre 2017 at 9:38 am

    Comme toujours, simple, pratique, « accompagnant », … , enlevé, 😀 et super utile.
    Un grand merci.

    • Reply
      Geekette
      4 décembre 2017 at 8:14 pm

      contente que ça te plaise !! merci de ton passage !

  • Reply
    Comme on est
    9 juin 2017 at 2:03 pm

    Coucou !
    Je vois tellement de fille demander, je trouve ça vraiment cool ce genre de tuto ! Merci beaucoup !

    Julie – Comme on est

    • Reply
      Geekette
      9 juin 2017 at 2:37 pm

      de rien contente que ça te plaise !!

  • Reply
    jenstyle
    27 mai 2017 at 3:45 am

    super tuto 🙂

    • Reply
      Geekette
      27 mai 2017 at 7:38 am

      merci contente que ça te plaise !

  • Reply
    Serena
    24 mai 2017 at 6:04 pm

    Coucou,
    Oh alors ça c’est top car ça pourrait m’être utile ! Merci pour le partage du coup 🙂
    Ton tuto est super !
    Gros bisous à toi^^

    • Reply
      Geekette
      24 mai 2017 at 6:11 pm

      contente que ça te plaise !! j’ai hâte de voir ton résultat !

  • Reply
    Sarah_Croft
    24 mai 2017 at 4:30 pm

    Hello,
    Merci pour ce tuto ! Pour ma part je vais au plus simple, je publie les images une par une avec chacune un lien ^^

    • Reply
      Geekette
      24 mai 2017 at 4:40 pm

      c’est sur que c’est plus simple ! ce tuto est pour ceux qui aiment se mettre les mains dans le cambouis !

  • Reply
    Sabrina.espritmode
    24 mai 2017 at 9:02 am

    Ah c’est super merci pour cet article qui est bien explicite ! C’est vrai que comme certains je cherchais à insérer plusieurs liens sur une même image et maintenant je sais comment faire ( -;

    @sabrina.espritmode

    • Reply
      Geekette
      24 mai 2017 at 9:08 am

      contente que ça te sois utile !! merci de ton commentaire !

  • Reply
    Gwenaëlle Mtn
    24 mai 2017 at 8:58 am

    Yeaah merci pour tes infos! Cest top ! On en apprend toujours plus avec toi 🙂

    • Reply
      Geekette
      24 mai 2017 at 9:08 am

      merci contente que ça te plaise !! j’ai toujours du plaisir a trouver des infos pour aider !!

  • Reply
    rosecapsule
    23 mai 2017 at 10:09 am

    Cet article tombe juste à pic ! Même pas 10min avant de tomber sur ton article, je me suis notée dans mon carnet comme idée de rubrique « wishlist », comme quoi, c’était le destin ! 😂
    Merci pour ce tuto ! Je pense que du coup, il va bien m’aider à l’avenir !
    Bisous ♡
    Jennifer

    • Reply
      Geekette
      23 mai 2017 at 11:14 am

      contente que ca te plaise !!! merci de ton commentaire !

    Leave a Reply

    5 Shares
    Share4
    Tweet
    Pin1
    +1