Sommaire
Vous cherchez un moyen facile d’ajouter des effets de survol d’images dans WordPress ? Si c’est le cas, le plugin Image Hover Effects for Elementor est exactement ce que vous cherchez. Il est simple à utiliser et offre une variété d’effets de survol Elementor parmi lesquels choisir.
Ils peuvent vous aider à ajouter des informations importantes aux images, comme l’emplacement, le prix, la disponibilité, etc. Cela ouvre vraiment un nouveau niveau de personnalisation de vos images.
Aujourd’hui, je vais vous montrer comment ajouter des effets d’image avec Elementor dans WordPress.
Quels sont les effets de survol des images dans WordPress ?
Un effet de survol d’image est un élément interactif qui permet d’afficher des informations supplémentaires sur une image de manière élégante. Il existe une grande variété d’effets de survol parmi lesquels vous pouvez choisir, et ils ne ralentissent pas votre site web ou n’encombrent pas votre design.
Normalement, une animation provoque une certaine forme de ralentissement, mais ce n’est pas le cas avec ces effets CSS.
Ils sont donc parfaitement adaptés aux besoins de chaque site web.
Ils ont des utilisations diverses. Par exemple, si votre site web est axé sur la photographie, vous pouvez ajouter un effet de survol de l’image pour montrer où la photo a été prise, la date, ou autre chose.
Les informations sur les produits sont également très utiles. Vous pouvez ajouter une image d’un produit et utiliser l’effet de survol pour afficher le moment où il est disponible pour la commande, son prix ou autre chose.
La seule limite est votre créativité.
Comment ajouter des éléments ou des effets de survol
Étape 1 : Installation des effets de survol des images
Le plugin Image Hover Effects – Elementor Addon est étonnant. Comme son nom l’indique, il s’agit d’un addon pour Elementor Website Builder, qui est l’un des meilleurs, sinon le meilleur, constructeur de sites web pour WordPress. Vous devez donc avoir installé les deux.
Le plugin offre 40 effets de survol différents, dont le fondu, le zoom, le flou et bien d’autres encore. Vous pouvez, entre autres, ajouter un titre, une description, définir une balise de titre, ajouter des icônes, créer des liens vers d’autres pages (idéal pour les produits ou les affiliés).
Il est également fourni avec un nouveau widget dont vous pouvez profiter si vous souhaitez voir les effets dans votre pied de page ou dans les zones latérales.
Commençons par cliquer sur Plugins et sélectionner l’option Add New dans le panneau d’administration de gauche.
Recherchez les effets de survol des images dans la boîte de recherche disponible. Vous obtiendrez ainsi des plugins supplémentaires qui peuvent vous être utiles.
Faites défiler vers le bas jusqu’à ce que vous trouviez le plugin Image Hover Effects – Elementor Addon et cliquez sur le bouton “Installer maintenant” et activez le plugin pour l’utiliser.
Si le plugin Elementor Website Builder n’est pas installé, vous verrez une notification en haut de chaque page vous demandant de l’installer. Il est nécessaire.
Étape 2 : Ajouter le widget d’effets de survol d’images
Heureusement, il est très facile d’ajouter des effets de survol. Pour être clair, vous ne pouvez pas simplement ajouter un effet de survol à une image existante. Vous devez plutôt réintégrer l’image avec le widget approprié dans l’éditeur Elementor.
Vous devrez donc peut-être faire des recherches dans la médiathèque pour trouver des images plus anciennes, mais cela ne devrait pas être trop grave. Cela signifie que si vous souhaitez ajouter cette fonctionnalité à l’ensemble de votre site web, cela prendra pas mal de temps.
Allez à n’importe quel poste ou page existant sur votre site web. Vous pouvez également en créer un nouveau pour le tester. Une fois dessus, cliquez sur le bouton “Edit with Elementor”.
Cela ouvrira l’éditeur Elementor. Sur le côté gauche, recherchez les effets de survol d’image et faites glisser le widget dans la page ou l’article.
Vous pouvez maintenant commencer à personnaliser le widget et tous les paramètres se trouvent sur le côté gauche.
Etape 3 : Mise en place des effets de survol de l’image
Le passage en revue des paramètres ne devrait prendre qu’une minute ou deux, et ils sont assez faciles à comprendre pour tout le monde.
La première option concerne les effets. Comme je l’ai déjà dit, il y en a 40 à choisir et ils apparaissent dans une boîte déroulante. Sélectionnez celui que vous voulez utiliser.
Note : Vous pouvez voir l’effet produit en le sélectionnant et en survolant le widget que vous avez ajouté à votre message ou à votre page. Je vous recommande de les tester tous si vous avez le temps.
L’option suivante consiste à ajouter l’image réelle. Il suffit de cliquer sur celle-ci et de sélectionner une image dans votre médiathèque. En dessous, vous pouvez sélectionner la taille de l’image.
Ensuite, vous pouvez ajouter un titre et une balise de titre. Le titre est ce qui apparaîtra dans le texte de l’en-tête, tandis que la balise titre est le type d’en-tête sous lequel il apparaîtra (H2, H3, H4, etc.).
Ensuite, vous pouvez trouver une description. C’est là que vous pouvez ajouter de nombreuses informations supplémentaires, mais je vous recommande personnellement de rester bref et précis. Entrez les informations de la description.
Ensuite, il y a le paramétrage des icônes. Ici, vous pouvez ajouter une icône à votre titre. Elle n’apparaîtra qu’avant (à gauche du titre) ou après (à droite du titre).
Note : Si vous ne voyez pas l’icône apparaître lorsque vous survolez l’image, c’est en raison d’une mise à jour récente d’Elementor. Pour remédier à cela, cliquez sur Elementor Paramètres Avancé et activez la prise en charge de Load Font Awesome 4.
Enfin, il y a le lien vers l’option. C’est ainsi que vous pouvez transformer votre image en un lien vers une autre page ou un autre site web. C’est idéal pour une page de vente ou un lien d’affiliation.
N’hésitez pas à laisser ce champ vide si vous ne souhaitez pas ajouter de lien.
Cela couvre tous les paramètres, cliquez sur le bouton Enregistrer ou mettre à jour et vous pourrez le consulter sur votre site web.
Félicitations pour avoir ajouté des effets de survol d’images avec Elementor dans WordPress.
Chaque image n’a pas besoin d’un effet de survol
Comme la plupart des effets, on peut avoir trop de bonnes choses. Les effets de survol peuvent être utiles dans de nombreux domaines de votre site web, mais il convient de souligner qu’ils peuvent également sembler gênants pour certains visiteurs.
Par exemple, il est assez courant qu’un utilisateur laisse sa souris au milieu d’une page lorsqu’il la fait défiler. Il pourrait déclencher involontairement des effets de survol lorsqu’il descend la page. Bien qu’il soit assez simple de déplacer sa souris, cela peut devenir ennuyeux.
Il en va de même pour la transformation des images en liens. Un visiteur peut penser qu’en cliquant sur une image, il peut l’agrandir ou la zoomer. Le fait d’être dirigé vers une autre page peut être très gênant.
Il vous suffit de trouver le bon équilibre pour votre site web et de vous souvenir d’écouter les commentaires des utilisateurs et d’étudier la façon dont vos pages sont interactives.
Être cohérent avec l’utilisation des effets
Une fois que vous avez trouvé la formule parfaite pour réussir, vous devez être cohérent.
Cela peut être très déroutant pour les visiteurs qui ne savent pas quelles images comporteront ou non des informations supplémentaires. En fait, certains peuvent même ne pas savoir que vous avez des effets de survol sur votre site web.
Pour remédier à cela, vous pouvez essayer d’ajouter une sorte d’indication avant ou sous vos images pour avertir les visiteurs. Cela peut vraiment vous aider à tirer le meilleur parti de la fonction.
Avez-vous trouvé facilement le module complémentaire d’effets de survol d’images à utiliser ? À quoi servent les effets de survol sur votre site web ?
