comment réaliser une wishlist cliquable
Blogging

Comment réaliser une wishlist cliquable

Sharing is caring!

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 !

moi

Je m’appelle Annick, Je suis une mère de 4 enfants mais avant tout une femme et une blogueuse qui s’efforce d’aider d’autre femme à trouver leurs voix dans le merveilleux monde du blogging !

vous aimerez peut être aussi

16 Comments

  1. Aipaminomdas says:

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

    1. Geekette says:

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

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

    Julie – Comme on est

    1. Geekette says:

      de rien contente que ça te plaise !!

  3. super tuto 🙂

    1. Geekette says:

      merci contente que ça te plaise !

  4. Serena says:

    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^^

    1. Geekette says:

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

  5. Sarah_Croft says:

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

    1. Geekette says:

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

  6. 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

    1. Geekette says:

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

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

    1. Geekette says:

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

  8. 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

    1. Geekette says:

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

Leave a Reply

Ce site utilise Akismet pour réduire le pourriel. En savoir plus sur comment les données de vos commentaires sont utilisées.