Envie de découvrir comment ajouter un effet de survol à des éléments du widget posts d’Elementor?
Si vous êtes un utilisateur WordPress utilisant Elementor pour créer votre site Web, vous devez être familier avec la fonction d’effet de survol. Vous pouvez trouver cette fonctionnalité principalement dans chaque paramètre de widget Elementor.
L’effet de survol peut rendre vos éléments attrayants, c’est donc un moyen efficace d’améliorer l’expérience utilisateur sur votre site web.
Eh bien, en parlant de l’effet de survol, cet article vous montrera comment ajouter ce dernier aux éléments de publication individuels dans le widget Elementor Posts à l’aide de CSS personnalisé d’Elementor, plus précisément, l’effet de survol avec zoom avant.
Il y a deux raisons pour lesquelles nous faisons ce tutoriel pour vous:
- Par défaut, vous pouvez ajouter un effet de survol à un article du widget Elementor posts. Mais, l’effet de survol sera très basique / standard.
- Par défaut, Elementor vous permet d’ajouter un effet de fermeture éclair au widget Posts (onglet Avancé -> Transformer –> échelle). Mais l’effet de survol aura un impact sur tous les éléments du widget posts ( non individuels ).
Étapes pour ajouter un effet de survol aux publications individuels du widget posts d’Elementor
Avant de commencer le tutoriel, nous voulons vous informer que ce tutoriel utilise la fonctionnalité CSS personnalisé d’Elementor. Cette fonctionnalité n’est disponible que sur Elementor Pro; assurez-vous d’avoir mis à niveau votre version.
Étape 1: Ajouter le widget Posts
Accédez à votre éditeur Elementor et nous commencerons tout à partir de zéro, alors créez une section avec une seule colonne.
Lire aussi : Comment intégrer MailChimp à Elementor
Ensuite, sélectionnez le widget Posts dans le panneau de widgets, puis faites-le glisser et déposez-le dans la zone d’édition. Une fois que vous avez ajouté le widget Posts, vous pouvez modifier et styliser le widget selon vos préférences.
Remarque: Veuillez vous assurer que vous avez déjà publié des articles sur votre site web.
Étape 2: Ajouter l’extrait CSS
Une fois que vous avez modifié et stylisé le widget Posts, nous ajouterons ensuite un effet de survol dans un article individuel en ajoutant l’extrait CSS simple. Dans les paramètres du widget Posts, accédez à Onglet Avancé – > CSS personnalisé. Veuillez copier l’extrait CSS ci-dessous, puis collez-le dans le champ CSS personnalisé.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Le code ci-dessus sélectionnera l’élément de publication individuel sur le widget Posts à l’aide du sélecteur .élémentor-post et applique la transformation CSS.
Si vous êtes satisfait de l’effet de survol qui a été utilisé, vous pouvez le conserver ainsi et enregistrer votre projet si vous le souhaitez. Mais, si vous souhaitez personnaliser la vitesse de transition et la valeur de l’échelle de transformation, vous pouvez modifier la valeur dans l’extrait CSS.
Remarque: La transformation / zoom avant est un effet courant et populaire utilisé sur les sites Web. Si vous voulez en savoir plus sur les autres méthodes de transformation des effets de survol, vous pouvez visiter cette page.
Découvrez aussi: tous les sélecteurs de widgets Elementor dans l’article suivant
Obtenez Elementor Pro Maintenant !!!
Conclusion
Cet article vous montre à quel point il est facile d’ajouter un effet de survol à des éléments de publication individuels du widget posts d’Elementor à l’aide de CSS personnalisé.
La technique que nous avons utilisé pour cet effet est ( zoom-in ) qui implique la 2D et certains pseudo éléments transformés. Personnalisez et jouez avec tous les styles d’effets de survol jusqu’à ce que vous trouviez le meilleur effet de survol pour votre site web.
Voilà! Nous venons de vous présenter les meilleurs outils de marketing par e-mail pour Elementor. Si vous avez des soucis sur comment les utiliser faites le nous savoir dans les commentaires.
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 ou celui sur Divi : le meilleur thème WordPress de tous les temps.
Mais en attendant, partagez cet article sur vos différents réseaux sociaux.
…
