Besoin d’un moyen de créer un effet de défilement d’image dans Elementor ? Dans cet article, nous vous guiderons pour créer un effet de défilement d’images à l’aide d’Elementor sur vos pages web.
L’effet de défilement d’images vous permettra de révéler l’image complète lorsque l’utilisateur survole les images. Lorsque vous visitez un site web qui vend des modèles de site web, vous pouvez voir l’aperçu complet des modèles avec des fonctionnalités d’effet de défilement d’images.
Avec ces fonctionnalités, vous pouvez facilement montrer à vos utilisateurs la vue complète du site web dans un espace réduit. Normalement, si vous souhaitez afficher une image complète d’un site web, cela prendra beaucoup de place sur vos pages web. De plus, cela affecte la conception de votre site web.
Mais avec un effet de défilement d’images, vous pouvez ajouter plus d’images de manière attrayante qui peuvent facilement attirer l’attention du public.
Créer un effet de défilement d’images dans Elementor
Elementor ne fournit pas de widget pour ajouter un effet de défilement d’images. Vous devez donc ajouter l’effet à l’aide de CSS personnalisé. La fonctionnalité CSS personnalisé est uniquement disponible avec Elementor Pro. Assurez-vous donc d’avoir mis à niveau vers Elementor Pro.
Maintenant, ouvrez une page avec l’éditeur Elementor et cliquez sur l’icône plus pour ajouter une section.
Maintenant, vous devez sélectionner la colonne pour votre section. Ici, nous sélectionnons la section à une colonne.
Maintenant, cliquez sur l’icône d’édition de la section et dans l’onglet mise en page, définissez la hauteur minimale à 500.
Maintenant, à partir du widget de bloc, ajoutez le bloc de section interne à votre section créée et supprimez la colonne par défaut. Cliquez avec le bouton droit sur l’icône d’édition de la colonne et cliquez sur l’option de suppression pour supprimer la colonne principale.
Allez de nouveau dans l’option d’édition de la section interne et, dans l’onglet mise en page, définissez la hauteur minimale à 500 comme nous l’avons montré précédemment.
Maintenant, passez à l’onglet style de la section interne et définissez le fond comme classique à partir de l’option de fond. Ensuite, vous devez ajouter votre image de fond. À partir de l’option de position de l’image, définissez la position de l’image en Top Center. À partir de l’option de répétition, définissez l’option no-repeat et la taille comme cover.
Maintenant, passez à l’onglet Avancé pour ajouter du CSS personnalisé. Dans le champ CSS personnalisé, ajoutez le code suivant :
selector{
-webkit-transition: ease-in-out 3s !important;
transition: ease-in-out 3s !important;
}
selector:hover{
background-position: center bottom !important;
}
Vous pouvez modifier la valeur de transition pour modifier l’effet de défilement des images. Si vous souhaitez ajouter plusieurs images avec le même effet, vous pouvez dupliquer la colonne, puis changer l’image de fond.
Conclusion
En suivant le processus, vous pourrez ajouter un effet de défilement d’images à votre site web en utilisant le constructeur de pages Elementor. Vous pouvez consulter nos autres articles pour apprendre :
- Comment utiliser les blocs Elementor dans l’éditeur Gutenberg ?
- Elementor vs Divi vs SeedProd – Quel est le meilleur ?
- Comment utiliser l’historique pour annuler et rétablir des actions sur Elementor
- Comment rendre un site Web Elementor super rapide
- Comment créer un cercle interactif dans Elementor
Nous espérons que cet article vous sera utile. Si vous aimez cet article, veuillez aimer notre page Facebook pour rester connecté.
