Comment ajouter des effets de survol d'image dans WordPress (5 méthodes simples)

Ajouter un effet de survol à votre site web peut sembler un détail, mais cela peut améliorer son apparence et son ergonomie. Lorsque les visiteurs survolent une image ou un bouton avec leur souris et constatent un léger changement, cela indique que l'élément est interactif. 

Ce léger mouvement améliorera l'engagement et contribuera à réduire le taux de rebond. Les effets de survol sont particulièrement utiles en e-commerce. Ils permettent aux acheteurs d'examiner les produits de plus près, les incitant ainsi à explorer davantage et à finaliser leur achat.

Il existe de nombreuses façons d'ajouter des effets de survol aux images dans WordPress, des simples fondus aux animations de basculement les plus attrayantes. Vous trouverez ci-dessous plusieurs méthodes pour vous lancer !

Comment ajouter des effets de survol d'image dans WordPress

Dans cet article, nous avons rassemblé cinq méthodes simples pour ajouter des effets de survol à votre site. Choisissez celle qui vous convient le mieux !

Méthode 1 : Utilisation d'un plugin

Un plugin vous fera gagner un temps précieux, surtout si vous souhaitez utiliser plusieurs effets de survol sur un même site.

Par exemple, si vous avez plusieurs galeries d'images, vous pouvez appliquer des animations différentes à chacune : un simple zoom pour les vignettes d'articles de blog ou un effet de retournement pour les images de produits.

L'utilisation d'un plugin comme Image Hover Effects Ultimate simplifie considérablement ce processus. Ce plugin est gratuit et propose une large gamme d'effets pour chaque élément. Pour commencer, installez-le simplement en suivant le tutoriel ci-dessous : 

Installation d'un plugin

• Ouvrez votre zone d'administration WordPress.
• Cliquez sur « Ajouter un plugin » dans le menu « Plugins »

• Saisissez « Image Hover Effects Ultimate » dans la barre de recherche.

• Sélectionnez le premier résultat et cliquez sur « Installer maintenant » pour lancer le téléchargement.
• Une fois l'installation terminée, cliquez sur le Activer pour commencer à utiliser le plugin.

Utilisation du plugin WordPress Effets de survol d'image

• « Survol de l'image » apparaîtra dans votre tableau de bord.

• Cliquez sur le menu pour ouvrir les paramètres du plugin. 

• Choisissez les effets que vous souhaitez utiliser. Pour ce tutoriel, nous allons expérimenter avec l'effet Loupe d'image .
• Après avoir sélectionné l'effet, vous verrez différents styles d'animation.

Lorsque vous en trouvez un qui vous plaît, cliquez sur Créer un style .

• Une fenêtre contextuelle s'affichera. Saisissez un titre dans le Nom et sélectionnez un effet dans la mise en page (1er, 2e ou 3e). Cliquez ensuite sur Enregistrer pour continuer.
• Vous serez redirigé vers une nouvelle page où vous pourrez personnaliser les paramètres, tels que la hauteur, la largeur et l'opacité. N'hésitez pas à faire des essais pour trouver le réglage qui vous convient le mieux.

• Une fois les paramètres définis, cliquez sur Modifier pour personnaliser votre image.

• Une autre fenêtre contextuelle apparaîtra. Vous pourrez alors personnaliser le niveau de zoom. 

• Vous pouvez également remplacer l'image en cliquant sur le Choisir une image .
• Une fois tous les paramètres configurés, cliquez sur Soumettre pour enregistrer votre effet de survol.

• Pour appliquer cet effet à votre site, copiez et collez le code court dans votre article ou votre page. 

• Votre effet de survol d'image simple est maintenant prêt à être utilisé n'importe où sur votre site. 

Méthode 2 : Utilisation du CSS

Cette méthode ne nécessite l'installation d'aucun plugin. Grâce au CSS personnalisé, vous pouvez ajouter divers effets de survol à votre thème.

Nous allons commencer par quelque chose de simple, comme un effet de soulignement au survol de la souris. Si vous souhaitez ajouter cet effet à votre thème, suivez les étapes simples ci-dessous :

• Accédez à la publication sur laquelle vous souhaitez ajouter un effet de survol.
• Ajoutez une image en cliquant sur le bloc Couverture + .

• Saisissez votre contenu dans le Couverture . Nous y ajouterons un titre et un bouton.

• Choisissez la police et les styles selon vos préférences.
• Enregistrez la page comme brouillon.
• Ensuite, accédez au Apparence de votre tableau de bord.

• Cliquez ensuite sur Personnaliser , puis accédez à CSS additionnel . Ajoutez le code suivant :

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• Cliquez sur Publier pour enregistrer le code.

• Retournez maintenant à votre article et sélectionnez le texte auquel vous souhaitez appliquer l'effet de soulignement.
• Ouvrez la section Avancé underline-hover dans le champ Classe(s) CSS supplémentaire(s)

• Enregistrez la page et prévisualisez-la pour voir l'effet. 

Il existe une multitude d'effets de survol ; choisissez celui qui correspond le mieux à votre style. Vous pouvez apprendre à écrire le CSS vous-même ou trouver des exemples auprès de la communauté WordPress. Tout est là !

Méthode 3 : Utilisation de constructeurs de pages (par exemple, Elementor)

Un constructeur de pages comme Elementor vous permet de créer votre site web avec une grande créativité. Il intègre des effets de survol, prêts à l'emploi pour dynamiser votre site sans aucune connaissance en programmation.

Vous pouvez également l'utiliser pour créer des effets de survol d'images dans WordPress. Dans cette section, nous allons expérimenter les effets de survol intégrés au constructeur de pages.

Pour configurer les effets :

• Ouvrez l' Elementor depuis le tableau de bord d'administration.
• Ajoutez votre image.

• Sélectionnez votre image, puis accédez à l' onglet Style
• Défilez vers le bas et cliquez sur Survoler .

• Dans le Animation au survol , vous trouverez divers effets prêts à l'emploi.

• Nous avons choisi ici l' « Croissance » comme exemple. Vous pouvez ensuite personnaliser la durée de la transition, l'opacité et d'autres paramètres pour les adapter au design de votre site.

• Une fois terminé, vous pourrez voir l'effet immédiatement, sans avoir besoin de le prévisualiser. 

Méthode 4 : Utilisation des plugins Flipbox

Si vous cherchez une solution rapide, vous pouvez installer l'extension Flipbox. L'effet Flipbox consiste à faire pivoter une image pour révéler son contenu au premier plan ou au verso lorsqu'on la survole avec la souris.

Cet effet est idéal pour les images photographiques, car il permet d'afficher la photo au recto et les informations de l'appareil photo au verso. Mais les possibilités sont infinies.

• Depuis votre tableau de bord WordPress, cliquez sur le Extensions . Ensuite, sélectionnez Ajouter une extension .
• Tapez Flipbox - Awesome Flip Boxes Image Overlay dans la barre de recherche.

• Cliquez sur « Installer maintenant » , puis sur « Activer le plugin ».

• Pour créer une flipbox, allez dans le Flip Box et cliquez sur Créer nouveau .
• Choisissez les animations qui vous plaisent. Une fois votre choix fait, cliquez sur Créer un style .

• Une fenêtre contextuelle s'affichera. Sélectionnez la mise en page souhaitée (1re, 2e ou 3e) et saisissez un titre. 

• Cliquez sur Enregistrer pour continuer.
• Vous serez ensuite redirigé vers le menu de personnalisation où vous pourrez définir les effets et ajouter votre contenu.

• Faites défiler vers le bas pour trouver l' onglet Aperçu Modifier pour personnaliser le contenu du recto et du verso de la boîte à rabat.

• Une fois terminé, cliquez sur Soumettre pour l'enregistrer.

• Pour ajouter ce flipbox à votre page, il vous suffit de copier et de coller le code court généré dans n'importe quelle section de votre site. 

• Et voilà, voici le produit fini ! 

Méthode 5 : Utilisation des blocs Gutenberg

Gutenberg est l'éditeur de blocs par défaut de WordPress qui vous permet d'ajouter des effets de survol directement dans l'éditeur.

Bien qu'il ne propose pas d'effets de survol avancés, vous pouvez améliorer les animations à l'aide de CSS personnalisé.

Prenons l'exemple d'un simple effet de fondu au survol. Voici le tutoriel étape par étape :

• Accédez à la publication ou à la page où vous souhaitez ajouter l'effet de survol.
• Cliquez sur le + pour ajouter un nouveau bloc, puis choisissez le Couverture .

• À l'intérieur du Couverture , ajoutez un bloc Paragraphe

• Saisissez votre titre et une brève description.
• Personnalisez la taille, l'opacité, l'alignement et la couleur de la police selon vos besoins.

• Sélectionnez ensuite le Couverture pour ajouter une classe CSS personnalisée.
• Ouvrez la Avancé dans la barre latérale droite.
• Saisissez fade-hover-effect dans le champ Classe CSS supplémentaire .

• Ensuite, enregistrez la page comme brouillon.

• Accédez au Extensions et sélectionnez votre extension de snippets de code. Dans cet exemple, nous utilisons WPCode .
• Créez un nouveau fragment de code CSS, puis collez le code suivant :

.fade-hover-effect { opacité: 0; transform: translateY(10px); transition: opacité 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacité: 1; transform: translateY(0); } 

• Enregistrez l'extrait de code et activez-le.
• Maintenant, prévisualisez votre page pour voir l'effet de fondu au survol en action.

Vous pouvez réutiliser cet effet en ajoutant la classe fade-hover-effect à n'importe quel bloc ou image. Cependant, si vous gérez un grand nombre d'images, il est conseillé d'utiliser une extension comme WP Media Folder pour organiser votre bibliothèque multimédia en dossiers. Cela facilitera la recherche et la réutilisation du contenu associé.

L'utilisation excessive d'effets affecte-t-elle les performances ?

Oui, l'utilisation excessive d'effets de survol sur votre site peut impacter ses performances, surtout si l'optimisation n'est pas optimale. En effet, certains effets nécessitent du CSS supplémentaire. La taille de ce CSS peut s'accumuler et ralentir le chargement des pages.

Il est préférable de n'utiliser que les effets de survol essentiels pour améliorer l'expérience utilisateur sans surcharger votre site.

Conclure

Apprendre à ajouter des effets de survol d'images dans WordPress peut contribuer à dynamiser votre site en améliorant l'interaction des utilisateurs et en les maintenant engagés.

Grâce aux nombreuses possibilités offertes par les plugins, le CSS personnalisé ou les constructeurs de pages pour ajouter des effets de survol, vous pouvez choisir la solution qui vous convient le mieux. Testez différents styles pour trouver celui qui s'intègre parfaitement à votre site !