Vous voulez mettre en avant vos partenaires, clients ou marques à travers un défilement infini élégant sur votre site WordPress ? Ce type d’animation apporte du mouvement et valorise votre image de marque dans toute création de site web professionnelle.
Bonne nouvelle : nul besoin de fonctionnalités complexes pour y parvenir. Avec Elementor, il suffit d’ajouter un carrousel d’images et quelques lignes de CSS pour un rendu fluide et moderne, idéal lors d’une amélioration de site internet, pour dynamiser un site e-commerce ou renforcer votre visibilité en ligne grâce au référencement SEO.
Et pour ceux qui n’ont pas Elementor Pro, une alternative gratuite permet d’obtenir le même effet facilement.
Avant de rentrer dans la technique, voici un exemple visuel de ce que tu pourras obtenir sur ton site WordPress.
Les logos vont défiler à l’infini de manière fluide et continue. Tu pourras évidemment personnaliser le contenu, les couleurs et la vitesse du défilement selon tes besoins.
/* Animation infinie du carrousel */
selector .swiper-wrapper {
display: flex;
animation: swiperInfinite 15s linear infinite;
}
/* Définir le comportement de l'animation */
@keyframes swiperInfinite {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
Ce code est à coller dans la section « CSS personnalisé » de votre widget Elementor. Si vous utilisez l’alternative gratuite, il faudra le coller dans le champ CSS de l’extension Royal Elementor Addons.
Commencez par créer ou modifier une page existante avec Elementor. Glissez simplement le widget carousel d’imagessur votre page. Ce widget est inclus dans la version Pro d’Elementor.
Ajoutez vos logos préparés au préalable. Idéalement, optez pour des visuels au format 200 x 100 px, sans fond, pour un rendu plus propre. Choisissez l’option d’affichage « entier » pour conserver la qualité. Réglez ensuite le nombre de diapositives à afficher selon le nombre de logos.
Pour obtenir un défilement fluide et automatique, il faut ajuster quelques paramètres :
Lecture automatique : activée
Pause au survol : désactivée
Pause à l’interaction : désactivée
Cela permet de supprimer les interruptions du scroll, pour un effet infini plus fluide. Ensuite, collez le code CSS (fourni plus haut) dans l’onglet CSS personnalisé du widget carousel.
Le timing est important. Si le défilement est trop rapide, on n’a pas le temps de bien voir les logos. Trop lent, l’effet devient ennuyant. L’animation est réglée par défaut sur 15 secondes dans le code CSS, ce qui est un bon compromis.
Vous pouvez ajuster ce chiffre selon vos préférences, en modifiant la ligne animation: scroll 15s linear infinite;par exemple en scroll 10s ou scroll 20s.
Vous n’avez pas Elementor Pro ? Aucun souci. Il suffit d’installer l’extension Royal Elementor Addons (gratuite). Voici comment faire :
Rendez-vous dans Extensions > Ajouter.
Recherchez Royal Elementor Addons.
Installez puis activez l’extension.
Une fois activée, cette extension permet d’ajouter du CSS personnalisé même dans la version gratuite d’Elementor. Vous pouvez donc réutiliser exactement le même code CSS que précédemment.
Il ne vous reste plus qu’à enregistrer votre brouillon, puis prévisualiser votre page pour voir le rendu. Vous devriez voir vos logos défiler en boucle, sans interruption, de manière fluide.
Ce genre de module est parfait pour renforcer la crédibilité de votre site en mettant en avant des collaborations ou des références clients. Et le tout, sans avoir à passer par une solution complexe ou coûteuse.
Je me suis d’abord lancé comme freelance, créant mes premiers sites WordPress en 2022 et me formant progressivement au SEO et au design web. Fin 2023, j’ai fondé Agence web armor, pour accompagner les entreprises dans leur présence en ligne. Aujourd’hui, je conçois des sites simples, rapides et bien référencés, pensés pour attirer des visiteurs qualifiés et générer des résultats concrets.
