Comment créer un effet de zoom d’image WordPress

Vous avez probablement déjà vu des sites Web avec la loupe ou un zoom sur des images sur le Web, par exemple sur les pages de produits Amazon, et vous vous êtes peut-être demandé comment ajouter cette fonctionnalité intéressante à votre site WordPress. Si tel est le cas, nous avons de bonnes nouvelles pour vous. Il est assez facile de créer un effet de zoom d’image WordPress si vous le faites à l’aide d’un plugin WordPress.

L’ajout de ce type de fonctionnalité à votre site Web peut être extrêmement pratique pour vos visiteurs car ils pourront inspecter vos produits en détail. Cela leur permet de remarquer certains aspects qu’ils ne pourraient pas voir autrement si vous n’utilisiez que des images de taille normale pour présenter vos produits. Il ne s’agit pas seulement d’images de produits. Vous pouvez, par exemple, souhaiter que vos visiteurs puissent également regarder de plus près les images de votre portfolio. La possibilité de zoomer sur vos images est donc une bonne pratique UX et, potentiellement, un booster de ventes, aussi.

Sans plus tarder, voici comment vous pouvez ajouter un effet de zoom d’image WordPress grossissant à votre site WordPress avec le Plugin WP Image Zoom.

Installation et configuration du plugin WP Image Zoom

Zoom d'image WP

Tout d’abord, vous devez installer le plugin. Une fois que vous avez terminé son installation et son activation, dirigez-vous vers le Zoom d’image WP onglet dans votre tableau de bord d’administration WordPress.

L’ouverture de cet onglet vous permettra de définir facilement les paramètres de zoom d’image du plugin.

Paramètres de zoom d'image WP

Dans le réglages généraux languette, vous pouvez activer le zoom sur les produits WooCommerce, les pages de catégorie WooCommerce et les produits de variante. Vous pouvez également définir l’effet de zoom sur les appareils mobiles, supprimer la visionneuse pour zoomer plus facilement sur vos images, etc. De plus, vous pouvez activer le zoom à l’intérieur d’une visionneuse si vous souhaitez la conserver, et même consulter une liste des visionneuses prises en charge.

Onglet Paramètres généraux de WP Image Zoom

Assurez-vous de cliquer sur le Sauvegarder les modifications bouton une fois que vous avez défini toutes les options en fonction de vos préférences.

WP Image Zoom Enregistrer les modifications

Ensuite, dirigez-vous vers la Paramètres de zoom languette.

Onglet Paramètres de zoom

Tout comme le réglages généraux onglet, le Paramètres de zoom tab est assez intuitif et comprend 4 étapes simples qui vous permettront d’ajouter un effet de zoom à vos images.

L’étape 1 vous permet de choisir la forme de la lentille. Certaines des options disponibles incluent la forme de l’objectif en cercle, le carré et la fenêtre de zoom.

En relation :  Comment garantir des noms de fichiers image propres dans WordPress
Forme de lentille

Ensuite, vous pouvez vérifier vos modifications de configuration en prévisualisant l’image de test (l’image est fournie avec le plugin) à l’aide de l’objectif que vous avez choisi. Vous pouvez revenir à cette option et prévisualiser toutes les autres modifications que vous apporterez aux autres étapes.

Image zoom gif

La troisième étape vous permet de définir plusieurs options dans son Général languette. Vous pouvez choisir le type de curseur, définir l’effet d’accélération de l’animation, choisir si vous souhaitez activer le zoom au survol ou au clic de la souris et définir le niveau de zoom.

Plusieurs options dans son onglet Général

Ensuite, cliquez sur la Lentille languette. Là, vous pourrez définir des options supplémentaires, notamment la taille de l’objectif, la couleur de l’objectif, l’épaisseur de la bordure, la couleur de la bordure, etc. Cependant, vous devez noter que vous ne pouvez utiliser ces paramètres que si vous avez choisi une lentille circulaire ou carrée dans le premier étape.

Onglet Objectif

D’autre part, le Fenêtre de zoom peut être utilisé si vous avez sélectionné la forme de l’objectif Zoom Window. Si vous l’avez fait, vous pourrez définir la largeur de la fenêtre de zoom, la hauteur de la fenêtre de zoom, la distance par rapport à l’image principale, etc.

Forme de l'objectif de la fenêtre de zoom

Encore une fois, vous devez appuyer sur le bouton Enregistrer les modifications pour que les paramètres prennent effet.

WP Image Zoom Enregistrer

Et c’est tout – vos images de produits comporteront désormais un effet de zoom grossissant.

Ajouter un effet de zoom à vos images

Après avoir configuré les fonctionnalités du plugin selon vos préférences, il est temps d’ajouter l’effet de zoom à vos images, ce que vous devez faire manuellement pour chaque image.

Tout d’abord, accédez à la page ou à la publication où votre image est publiée (en allant sur Pages > Toutes les pages/articles > Tous les articles), ou, pour ajouter l’effet à une nouvelle image sur une publication ou une page, créez-en une nouvelle (Pages/Messages > Ajouter un nouveau).

Si vous utilisez l’éditeur Gutenberg, après avoir ajouté votre image à votre page ou publication (en cliquant sur le signe plus puis en choisissant le Image bloc), cliquez sur l’image en question, puis sélectionnez le bouton image situé dans le bloc image dans le coin supérieur gauche.

Ajout d'un effet de zoom d'image sur votre page ou votre publication

Cela ouvrira un Styles de blocs menu déroulant. Sélectionnez simplement le style nommé Avec zoom.

Liste déroulante Styles de blocs

Enfin, appuyez sur le Publier/Mettre à jour et accédez à votre page ou à votre publication pour voir à quoi ressemble votre image en direct.

Zoom sur l'image

Dans l’éditeur classique, le processus est très similaire. Après avoir ajouté votre image à une page ou à une publication, cliquez dessus et sélectionnez l’icône de loupe que vous verrez dans le coin droit de la barre d’outils d’édition. Cela permettra un effet grossissant sur votre image.

En relation :  6 meilleurs plugins de sauvegarde WordPress
Activer un effet grossissant

Notez que l’éditeur classique vous permet d’ajouter la fonction de zoom uniquement aux images non pleines, c’est pourquoi vous devez sélectionner votre image puis cliquer sur le bouton icône de crayon (Éditer) afin de changer sa taille.

Icône de crayon

Un nouvel écran apparaîtra, affichant les détails de l’image et vous permettant de modifier certains paramètres d’image. Vous pourrez également modifier la taille de l’image ici. Après avoir sélectionné la taille (toute autre taille à l’exception de Taille réelle), clique le Mettre à jour bouton.

Ajouter l'effet de zoom

Après avoir publié ou mis à jour votre page/article, continuez et prévisualisez à nouveau vos modifications.

Juste une dernière remarque : cette option ne s’applique qu’à l’image que vous avez sélectionnée sur cette page ou cet article en particulier, ce qui signifie que vous devez réactiver la même option pour chaque image à laquelle vous souhaitez ajouter l’effet de zoom.

Conclusion

Un effet de zoom grossissant sur les images peut être un excellent ajout à une boutique de commerce électronique ou à tout autre site Web qui souhaite vendre des produits. Quel que soit le type de produits que vous proposez, vos clients potentiels seront sûrement intéressés à les examiner le plus en détail possible.

Si vous utilisez un plugin WordPress comme WP Image Zoom pour ajouter cette fonctionnalité à vos images, vous pourrez le faire rapidement et facilement. Veillez simplement à utiliser des images de haute qualité pour vous assurer que la fonction de zoom est impeccable et fait bien son travail. Enfin, étant donné que des images de haute qualité peuvent avoir un impact sur la vitesse de votre site Web, vous devez également optimiser vos images pour le Web afin de réduire leur taille sans compromettre leur qualité.

Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.