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

Ajouter un effet de survol à votre site Web peut sembler un petit détail, mais cela peut améliorer l'apparence et la convivialité du site. Lorsque les visiteurs survolent leur souris sur une image ou un bouton et voient un léger changement, cela signale que l'élément est interactif. 

Ce mouvement subtil améliorera l'engagement et aidera à réduire les taux de rebond. Les effets de survol sont particulièrement utiles dans le commerce électronique. Ils permettent aux acheteurs de prévisualiser les produits de plus près, les encourageant à explorer davantage et à passer à la caisse.

Il existe de nombreuses façons d'ajouter des effets de survol d'image dans WordPress, des simples fondus aux animations de retournement accrocheuses. Ci-dessous, vous trouverez plusieurs méthodes pour commencer !

Comment ajouter des effets de survol d'image dans WordPress

Dans cet article, nous avons rassemblé cinq façons faciles d'ajouter des effets de survol à votre site. Choisissez celui qui fonctionne le mieux pour vous !

Méthode 1 : Utilisation d'un plugin

Un plugin vous fera gagner beaucoup de temps et d'efforts, surtout si vous souhaitez utiliser plusieurs effets de survol sur le même site.

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

Utiliser un plugin comme Image Hover Effects Ultimate rend ce processus beaucoup plus facile. Ce plugin est gratuit pour tout le monde et offre 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 Ajouter un plugin depuis le menu Plugins dans la barre latérale.

• Tapez Effets de survol d'image ultime dans la barre de recherche.

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

Utilisation du plugin Image Hover Effects WordPress

• Une fois le plugin installé, vous verrez un nouveau menu Survol d'image 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'agrandisseur d'image.
• Après avoir sélectionné l'effet, vous verrez une variété de styles d'animation.

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

• Une fenêtre contextuelle apparaîtra. Entrez un titre dans le champ Nom et sélectionnez un effet dans la disposition (1er, 2ème ou 3ème). 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é. Jouez avec pour voir ce qui convient le mieux.

• Une fois que vous êtes satisfait des paramètres, cliquez sur Modifier pour personnaliser votre image.

• Une autre fenêtre contextuelle apparaîtra. Ici, vous pouvez personnaliser la position de magnification. 

• Vous pouvez également remplacer l'image par le bouton Choisir une image.
• Après avoir tout configuré, cliquez sur Soumettre pour enregistrer votre effet de survol.

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

• Maintenant, votre effet de survol d'image simple est prêt à être utilisé dans n'importe quelle partie de votre site. 

Méthode 2 : Utilisation de CSS

Vous n'avez pas besoin d'installer de plugins pour cette méthode. En utilisant du CSS personnalisé, vous pouvez ajouter divers effets de survol à votre thème.

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

• Accédez à l'article où vous souhaitez ajouter un effet de survol.
• Ajoutez une image en cliquant sur le bloc Couverture à partir du +.

• Entrez votre contenu dans le bloc Couverture. Ici, nous ajouterons un titre et un bouton.

• Définissez la police et les styles à votre goût.
• Enregistrez la page en tant que brouillon.
• Ensuite, allez dans le menu Apparence de votre tableau de bord.

• Ensuite, cliquez sur Personnaliser et allez à CSS supplémentaire. Ajoutez le code suivant :

corps { affichage : flex ; justifier-contenu : centre ; aligner-éléments : centre ; hauteur : 100vh ; arrière-plan : #0f0f0f ; marge : 0 ; famille-de-polices : Arial, sans empattement ; } .surbrillance-survol { taille-de-police : 2rem ; couleur : #ffffff ; position : relative ; affichage : bloc-en-ligne ; } .surbrillance-survol::après, .surbrillance-survol::avant { contenu : '' ; position : absolue ; largeur : 100% ; hauteur : 2px ; arrière-plan : dégradé-linéaire(vers la droite, #ff0000, #00ffff) ; bas : -5px ; gauche : 0 ; transformation : échelleX(0) ; origine-transformation : droite ; transition : transformation 0.4s ease-out ; } .surbrillance-survol::avant { haut : -5px ; origine-transformation : gauche ; } .surbrillance-survol:hover::après, .surbrillance-survol:hover::avant { transformation : échelleX(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é dans la barre latérale du bloc et entrez underline-hover dans le champ Classe(s) CSS supplémentaire(s).

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

Il y a tellement d'effets de survol parmi lesquels choisir, alors choisissez celui qui convient le mieux à votre style. Vous pouvez soit apprendre à écrire le CSS vous-même, soit trouver des exemples dans la communauté WordPress. Tout est là!

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

Un outil de création de page comme Elementor vous permet de construire votre site web avec beaucoup de créativité. Il dispose d'effets de survol intégrés, tous prêts à l'emploi pour animer votre site sans nécessiter de code.

Vous pouvez également l'utiliser pour créer des effets de survol d'image dans WordPress. Dans cette section, nous expérimenterons les effets de survol intégrés dans le constructeur de page lui-même.

Pour configurer les effets :

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

• Sélectionnez votre image, puis accédez à l'onglet Style.
• Faites défiler et cliquez sur Survol.

• Dans le menu déroulant Animation de survol, vous trouverez une variété d'effets prêts à l'emploi.

• Ici, nous avons choisi l'effet Agrandir comme exemple. Vous pouvez ensuite personnaliser la durée de transition, l'opacité et d'autres paramètres pour correspondre à la conception de votre site.

• Une fois que vous avez 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 un raccourci, vous pouvez installer le plugin flipbox. Un effet flipbox se produit lorsqu'une image se retourne pour révéler le contenu sur l'avant ou l'arrière lorsque vous passez la souris dessus.

Cet effet est idéal pour les images de photographie, où vous pouvez afficher la photo sur le devant et les détails de l'appareil photo sur l'arrière. Mais les possibilités sont infinies.

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

• Cliquez sur Installer maintenant, puis Activez le plugin.

• Pour créer un flipbox, allez dans le menu Flip Box et cliquez sur Créer un nouveau.
• Choisissez n'importe quelle animation que vous aimez. Une fois que vous en avez trouvé une, cliquez sur Créer un style.

• Une pop-up apparaîtra. Sélectionnez la mise en page souhaitée (1re, 2e ou 3e) et entrez un titre. 

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

• Faites défiler pour trouver l'onglet Aperçu. Cliquez sur Modifier pour personnaliser le contenu pour l'avant et l'arrière du flipbox.

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

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

• Et c'est tout, voici le produit fini ! 

Méthode 5 : Utilisation des blocs Gutenberg

Gutenberg est l'éditeur de blocs WordPress par défaut 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 en utilisant du CSS personnalisé.

À titre d'exemple, créons un effet de fondu simple au survol. Voici le tutoriel étape par étape :

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

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

• Entrez votre titre et une courte description.
• Personnalisez la taille de police, l'opacité, l'alignement et la couleur selon vos besoins.

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

• Après cela, enregistrez la page en tant que brouillon.

• Allez dans le menu Plugins et sélectionnez votre plugin d'extrait de code. Dans cet exemple, nous utilisons WPCode.
• Créez un nouvel extrait 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 survol en action.

Vous pouvez réutiliser cet effet en ajoutant la classe fade-hover-effect à n'importe quel bloc ou image. Mais si vous avez affaire à un grand nombre d'images, envisagez d'utiliser un plugin comme WP Media Folder pour organiser votre bibliothèque de médias en dossiers. Cela facilite la recherche et la réutilisation de contenu associé.

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

Oui, utiliser trop d'effets de survol sur votre site peut potentiellement affecter les performances, en particulier si elles ne sont pas optimisées correctement. C'est parce que certains effets de survol nécessitent du CSS supplémentaire. La taille du CSS de votre site peut s'additionner et ralentir les temps de chargement de la page.

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.

Conclusion

Apprendre à ajouter des effets de survol d'image dans WordPress peut aider à booster votre site en améliorant l'interaction utilisateur et en les gardant engagés.

Avec plusieurs façons d'ajouter des effets de survol, que ce soit via des plugins, du CSS personnalisé ou des constructeurs de page, vous avez la liberté de choisir ce qui fonctionne le mieux pour vous. Expérimentez différents styles pour trouver celui qui convient le mieux à votre site !