skip to Main Content

Comment ajouter l’effet Zoom d’Amazon sur vos photos

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Avez-vous déjà acheté un produit sur Amazon ? Si tel est le cas, vous avez certainement remarqué le Zoom qui s’affiche lorsqu’une image est survolée (cet effet se nomme Elevate Zoom). Si vous avez longtemps cherché à ajouter cet effet sur votre boutique WordPress, sachez que cela est désormais possible.

Dans ce tutoriel, nous vous montrerons comment ajouter l’effet Elevate Zoom sur votre blog WordPress.

Mais avant de vous lancer, prenez la peine de jeter un coup d’œil sur Comment installer un thème WordPressCombien de plugins faut-il installer sur WordPress.

Ensuite, mettons-nous au travail !

La première chose à faire est de télécharger le plugin, de l’installer et de l’activer. Il est hébergé sur Github.

Comment configurer ElevateZoom

Une fois que vous accédez à l’interface, vous pourrez voir une liste d’options disponibles.

elevateZoom-interface-du-plugin-comment-creer-l-effet-zoom-sur-wordpress

L’option la plus importante est certainement le champ « Activate elevateZoom for images with this class ». En effet, pour activer la loupe sur une image, vous devez utiliser la classe qui se trouve dans ce champ. Par défaut la valeur est « elevateZoom », vous pouvez remplacer cette valeur.

Concrètement pour qu’une image ait cet effet, vous devez accéder à l’éditeur de texte, qui affiche le code HTML. Ensuite, vous devez repérer l’image sur laquelle vous souhaitez ajouter l’effet zoom au survol de la souris, et ajouter la classe correspondante (elevateZoom ou ce que vous aurez choisi) .

comment-ajouter-une-classe-a-une-image-pour-intégrer-l-effet-zoom

Sur l’image précédente, vous remarquerez que la classe d’une image est mise en surbrillance (bleu), il s’agit de la classe « elevateZoom », qui est celle utilisée dans cette option.

  • L’option « zoomType », permet de déterminer la forme de la loupe. Il peut s’agit d’une fenêtre (window), d’une loupe (lens), ou à l’intérieur de l’image (inner).
  • L’option « scrollZoom », permet d’activer un zoom progressif avec la molette de la souris ou l’équivalent sur les surfaces tactiles sur tablettes et ordinateurs portables.
  • L’option « lensSize », permet de définir la largeur de la loupe.
  • L’option « zoomWindowPosition », permet de définir la position de la fenêtre, par rapport à l’image source.
  • L’option « zoomWindowHeight », permet de définir la hauteur de la fenêtre, qui affichera une image zoomée de l’image source.
  • L’option « zoomWindowWidth », permet de définir la largeur de la fenêtre qui affichera une version zoomée de l’image source.

elevateZoom-en-cours-d-utilisation-comment-créer-un-effet-zoom-sur-les-images

C’est tout ce que vous devez savoir sur la configuration de ce plugin. Désormais, lorsque vous souhaitez ajouter cet effet à une image, n’oubliez pas d’ajouter la classe spécifiée sur l’option « Activate elevateZoom for images with this class ».

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Consultez aussi : Comment ajouter un zoom sur les images de WordPress

Ce que nous avons aimé :

  • Simplicité
  • Effets
  • Compatibilité aux thèmes
  • Options de configuration de la loupe

Ce que nous n’avons pas aimé :

  • Le plugin est en anglais, donc il n’est pas forcément accessible à tous, mais avec ce tutoriel nous espérons que vous serez en mesure de prendre en main ce tutoriel.
  • Le positionnement lien vers l’interface du plugin qui est caché dans le menu « Réglages ».
  • Petite maîtrise du code HTML requise.

Découvrez aussi : Comment ajouter un sitemap HTML sur un site web WordPress

En bref :

Que du bonheur en perspective avec ce plugin. Aucun bug détecté et la compatibilité nous a tout simplement impressionnée. Nous espérons que vous éprouverez, tout comme nous, autant de plaisir à faire usage de ce plugin.

Si vous avez des questions, nous sommes à votre disposition.

Découvrez aussi quelques plugins WordPress premium  

Vous pouvez utiliser d’autres plugins WordPress pour donner une apparence moderne et pour optimiser la prise en main de votre blog ou site web.

Nous vous proposons donc ici quelques plugins WordPress premium qui vous aideront à le faire.

1. WP Google PageSpeed Insights Image Optimizer

Ce plugin WordPress premium est destiné à toutes les personnes qui souhaitent optimiser leurs images. Il peut scanner les thèmes et les répertoires des plugins pour retrouver les images et les optimiser.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Il repose sur l’API Google PageSpeed, donc il possède exactement la même compression, mais il faudrait définir la clé API.

Consultez aussi 5 plugins WordPress pour sauvegarder votre blog

Il peut aussi optimiser les images en masse, sauvegarder les images originales, restaurer les images originales et autres.

Télécharger | Démo | Hébergement Web

2. Image Elevator for WordPress

Ce plugin WordPress premium vous donne la faculté d’ajouter des images à vos publications à partir de vos captures d’écran ou de vos éditeurs graphiques.

En outre, le plugin WordPress prend en charge les types de posts personnalisés et vous aurez la possibilité de gagner beaucoup de temps au cours de vos publications.

Télécharger | Démo | Hébergement Web

3. EWWW Image Optimizer

EWWW Image Optimizer est une excellente option gratuite pour la compression d’image sur WordPress. Il est facile à utiliser et peut automatiquement optimiser à la volée les images que vous téléchargez. Il peut également compresser et optimiser en masse des images existantes. 

Il effectue toute la compression sur vos propres serveurs, ce qui signifie que vous n’avez pas besoin de vous inscrire pour obtenir une clé API

Il peut également optimiser les images générées par d’autres plugins WordPress et stockées en dehors des dossiers de la médiathèque. Il ne nécessite pas de compte pour utiliser le plugin, mais vous pourrez vous inscrire à son API pour obtenir des fonctionnalités supplémentaires.

Télécharger Démo | Hébergement Web

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Ressources recommandées

Découvrez d’autres ressources recommandées qui vous accompagneront dans la création et la gestion de votre site web.

Conclusion

Voilà ! C’est tout pour ce tutoriel, j’espère qu’il vous permettra de créer d’ajouter l’effet de Zoom d’Amazon sur vos photos. N’hésitez pas à le partager avec vos amis sur vos réseaux sociaux préférés

Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress.

Si vous avez des suggestions ou des remarques, laissez-les dans notre section commentaires.

… 

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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

Back To Top
3 Partages
Partagez3
Tweetez
Enregistrer