Créer un site internet dynamique est un excellent moyen d’attirer l’attention de vos visiteurs et de donner un aspect moderne et professionnel à vos pages. Parmi les effets visuels les plus utilisés aujourd’hui, on retrouve le carrousel vertical infini, un défilement automatique qui permet d’afficher avis clients, logos, images ou tout type de contenu de manière fluide et élégante.
Dans cet article, je vous montre comment créer un carrousel vertical infini sur WordPress grâce à Elementor et à une simple portion de CSS. C’est l’effet que j’utilise sur mon propre site pour afficher mes avis clients.
Copiez-collez ce code dans votre zone de CSS personnalisée (Elementor Pro ou Royal Addons) :
.verticalcolumnone {
position: relative;
max-height: 750px;
height: 750px;
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
mask-image: linear-gradient(transparent, black 20%, black 80%, transparent 100%);
}
.verticalcolumnone:hover .carouselverticalone {
animation-play-state: paused;
}
.carouselverticalone {
display: flex;
flex-direction: column;
animation: verticalLoop 30s linear infinite;
will-change: transform;
}
.carouselverticalone > * {
margin: 0 0 20px 0;
}
@keyframes verticalLoop {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
@media only screen and (max-width: 360px) {
.verticalcolumn {
max-height: 350px;
height: 350px;
width: 100%;
}
}
La méthode suivante est conçue pour Elementor (gratuit ou Pro). Elle fonctionne aussi bien sur un site vitrine WordPress classique que sur un site en refonte.
Commencez par ajouter une section dans Elementor :
Créez une section simple avec un fond (couleur ou image) si nécessaire.
Ajoutez un conteneur horizontal à l’intérieur, qui servira de base à vos colonnes.
À l’intérieur de ce conteneur, créez votre première colonne verticale.
Retirez les marges et paddings internes pour éviter les décalages.
Astuce UX :
Pour mettre en avant des avis clients, placez un titre simple juste au-dessus (“Avis clients”, “Ce que disent nos clients”, “Témoignages”). C’est une structure que l’on retrouve dans des créations de site internet professionnelles car elle rassure et crédibilise un prestataire.
Parce que l’effet repose sur une animation translateY() : le contenu doit défiler du haut vers le bas, donc il doit être empilé en colonne.
Dans votre conteneur vertical :
Glissez un sous-conteneur nommé carouselverticalone via la classe CSS.
Insérez vos contenus à l’intérieur :
avis clients
images
logos
extraits de réalisations
cartes produits (pour un site e-commerce)
citations ou extraits d’articles
| Type d’élément | Usage possible | Bénéfice |
|---|---|---|
| Avis clients | Page d’accueil ou footer | Renforce la crédibilité et humanise le site |
| Logos partenaires | Page “À propos” ou “Clients” | Preuve sociale, rassurance |
| Photos | Hero section ou portfolio | Dynamisme, storytelling visuel |
| Articles | Blog ou sidebar | Augmente le temps passé sur le site |
Le carousel vertical est polyvalent et peut réellement améliorer l’engagement utilisateur lorsqu’il est bien utilisé.
C’est l’étape la plus importante.
Le CSS déplace le conteneur de -50%.
Pour que le défilement soit fluide et en boucle, vous devez impérativement dupliquer tout le contenu une seconde fois.
Exemple concret :
Vous avez 3 avis
Vous les dupliquez → vous obtenez 6 avis
Le CSS translateY(-50%) fonctionne parfaitement, sans saccade ni arrêt visuel
Si vous ne dupliquez pas, l’effet cassera la fluidité du mouvement.
Sélectionnez un élément
Copier → Coller
Organisez les doublons dans le même ordre que l’original
Cette duplication peut paraître technique, mais elle est incontournable dans toute animation CSS basée sur une boucle infini (principe identique aux sliders horizontaux sans JavaScript).
Attribuez les classes suivantes :
À la colonne → verticalcolumnone
Au sous-conteneur qui défile → carouselverticalone
C’est ce qui permet au CSS de cibler les bonnes zones.
Deux options :
Elementor Pro → onglet Avancé > CSS personnalisé
Plugin Royal Addons → activer uniquement “Custom CSS” pour alléger l’extension
L’un des avantages de cette méthode, c’est que vous pouvez ajuster le comportement à votre guise.
Dans la ligne :
Vous pouvez modifier :
la durée : 10s (rapide), 60s (lent et subtil)
le sens (en inversant les valeurs de translateY)
le comportement au survol (animation-play-state: paused;)
Pour un site très dynamique → 15–20s
Pour un site sobre, élégant → 45–60s
Pour des logos → très lent (60–90s)
Pour des avis clients → 25–35s
Plus la vitesse est lente, plus l’effet devient premium.
Un carousel vertical n’est pas qu’un petit gadget visuel. C’est réellement un outil UX qui répond à plusieurs objectifs concrets.
Sur une création de site internet, on cherche souvent à réduire la hauteur des pages pour améliorer la lisibilité.
Un carousel permet d’afficher 5, 10 ou 20 éléments dans un espace réduit.
Témoignages, avis, logos clients…
Ce sont des éléments essentiels dans un site vitrine orienté conversion.
Contrairement à certains sliders horizontaux trop rapides ou trop chargés, le vertical infini est doux, subtil, visuel et moderne.
L’œil humain suit naturellement le mouvement vertical, ce qui permet de capter l’attention sans être intrusif.
Vous pouvez l’utiliser pour distinguer une zone importante de la page :
hero section, zone “Ils nous font confiance”, partie “Témoignages”, etc.
Un carousel vertical peut devenir un fil qui raconte quelque chose :
une suite d’avis, une suite de réalisations, une suite d’étapes…
L’utilisateur comprend mieux et plus vite ce que vous faites.
L’ajout d’un carousel vertical peut s’intégrer dans une démarche plus globale d’amélioration de votre site internet :
améliorer l’engagement utilisateur
optimiser l’expérience de navigation
moderniser une page d’accueil vieillissante
retravailler votre crédibilité visuelle
renforcer la structure d’un site vitrine
préparer une refonte de site web complète
augmenter le taux de conversion
dynamiser votre branding
Ce genre d’effet, utilisé intelligemment, ne remplace pas un vrai travail stratégique, mais il s’intègre parfaitement dans une logique d’optimisation UX et SEO, comme c’est le cas lors d’une création d’un site internet à La Rochelle pensée pour la performance et la conversion.
Vous pouvez l’utiliser pour enrichir :
une hero section
un portfolio
une page “À propos”
une section clients
une section avis
un blog
une page services
Le carousel vertical infini est une technique simple à mettre en place sur WordPress, mais incroyablement efficace pour dynamiser une page et créer une expérience utilisateur moderne. Une fois la structure mise en place dans Elementor et le CSS appliqué, vous n’avez plus rien à gérer : la boucle tourne automatiquement, fluide, sans JavaScript et sans plugin lourd.
C’est un atout parfait pour améliorer un site vitrine, enrichir la présentation de vos services ou apporter une touche plus professionnelle lors d’une refonte de site internet.
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.
