Créer un carrousel personnalisé avec WordPress et Elementor
Que ce soit pour afficher des témoignages clients, mettre en avant des réalisations ou simplement dynamiser l’apparence de son site, le carrousel est un élément visuel puissant. Avec WordPress et Elementor, on peut rapidement en intégrer un. Mais dans ce tutoriel, on va aller plus loin : je vous montre comment créer un carrousel entièrement personnalisé, esthétique et fonctionnel, sans dépendre uniquement des widgets de base.
Dans la vidéo que vous pouvez retrouver sur ma chaîne YouTube, je détaille chaque étape de ce processus. Pour ceux qui souhaitent aller plus vite ou simplement copier/coller les extraits de code, vous trouverez ci-dessous tous les bouts de code à intégrer.
Extrait de code CSS sur le widget de carrousel de témoignage :
selector{
--radius: 25px;
--height: 550px;
--overlay: 0.75;
}
selector .swiper-slide{
display: flex;
align-items: flex-end;
border-radius: var(--radius);
height: var(--height);
}
selector .swiper-slide:before{
content: "";
position: absolute;
top: 0;
left: 0;
background: rgb(0,0,0);
background: linear-gradient(20deg, rgba(0,0,0,var(--overlay)) 0%, rgba(0,0,0,0) 00%);
height: 100%;
width: 100%;
z-index: 1;
}
selector .elementor-testimonial__footer{
display: block;
}
selector img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--radius);
}
selector .elementor-testimonial__cite{
z-index: 2;
position: relative;
}
selector .elementor-testimonial__name{
margin-bottom: 10px;
}
selector .elementor-swiper-button-prev,
selector .elementor-swiper-button-next{
display: none;
}
@media (max-width: 1024px){
selector{
--height: 370px;
}
}
@media (max-width: 767px){
selector .elementor-main-swiper{
width: 100% !important;
}
}
Extrait de code JavaScript pour la navigation gauche/droite :
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
$('.card-carousel .card-prev').on('click', function(){
$(this).closest('.card-carousel').find('.elementor-swiper-button-prev').trigger('click')
$(this).closest('.card-carousel').find('.swiper-container').trigger('mouseleave')
})
$('.card-carousel .card-next').on('click', function(){
$(this).closest('.card-carousel').find('.elementor-swiper-button-next').trigger('click')
$(this).closest('.card-carousel').find('.swiper-container').trigger('mouseleave')
})
$('.card-carousel .card-prev a, .card-carousel .card-next a').on('click', function(e){
e.preventDefault()
})
})
</script>
Créer la structure de base dans Elementor
Commencez par créer une nouvelle section dans Elementor avec un conteneur principal. Supprimez la marge interne et définissez une largeur maximale de 1200 pixels. Ensuite, ajoutez deux conteneurs à l’intérieur pour séparer votre contenu en deux colonnes. Dans le conteneur de gauche, insérez les éléments classiques comme un titre, du texte descriptif, une liste ou un bouton d’appel à l’action.
Cette partie permet de contextualiser votre carrousel. Par exemple, dans le cas d’un carrousel de témoignages, utilisez ce côté gauche pour présenter votre entreprise ou introduire la section. Personnalisez chaque élément pour qu’ils soient en cohérence avec votre charte graphique : typographies, couleurs, espacements…
Ajouter et configurer le carrousel de témoignages
Dans le conteneur de droite, ajoutez un widget “Carrousel de témoignages”. Supprimez les éléments par défaut (deux et trois), puis gardez uniquement un élément vierge. Ajoutez-y votre première image (créée par exemple avec Canva), puis dupliquez cet élément autant de fois que nécessaire (dans mon exemple : quatre images, donc quatre slides).
Dans les réglages :
Alignement : à gauche
Nombre de diapositives par vue : 3
Largeur personnalisée : 1200px (en pixels)
Options supplémentaires : désactivez les points de navigation
Ces réglages permettent d’obtenir un carrousel fluide, centré et sans pagination inutile, parfait pour une navigation à la souris.
Intégrer du code CSS personnalisé
Pour styliser davantage le carrousel, notamment ses transitions et animations, on utilise un code CSS personnalisé. Si vous avez Elementor Pro, vous pouvez coller le code directement dans l’onglet “CSS personnalisé”. Sinon, installez une extension comme Royal Addons (gratuite), qui permet aussi d’ajouter du CSS personnalisé à vos sections.
Ce CSS va notamment :
Ajuster l’espacement entre les images
Modifier l’apparence au survol
Donner une meilleure fluidité au défilement
C’est à ce moment-là que vous utilisez les bouts de code fournis plus haut dans l’article.
Ajouter des boutons de navigation personnalisés
Plutôt que d’utiliser les flèches natives d’Elementor, on va les créer manuellement. En dessous du carrousel, insérez un conteneur horizontal avec deux boutons : un pour la flèche gauche, l’autre pour la droite. Choisissez une icône de flèche adaptée, et pensez à bien la rendre visible (couleur, taille, contraste).
Ensuite, pour relier ces boutons à votre carrousel :
Ajoutez un bloc HTML juste au-dessus des boutons
Intégrez un code JavaScript qui relie les boutons à la logique du carrousel
Donnez les classes
card-prevetcard-nextaux deux boutons
En combinant CSS et JavaScript, vous obtenez un système de navigation sur mesure, beaucoup plus souple et esthétique.
Améliorer la mise en page finale
Pour peaufiner l’ensemble :
Centrez le carrousel et ses éléments
Ajoutez des marges hautes et basses (par exemple 150px)
Ajoutez une phrase d’accroche ou une citation en gras juste au-dessus du carrousel
Ce sont ces détails qui font la différence entre un site “bricolé” et un rendu professionnel. Pensez aussi à tester le rendu en responsive, sur mobile et tablette, pour vous assurer que le carrousel reste fonctionnel et lisible.
Et maintenant, à vous de jouer !
Ce carrousel personnalisé, en plus d’être esthétique, est aussi très flexible. Il peut s’adapter à une multitude d’usages : galerie photo, témoignages, réalisations, etc. En le construisant vous-même avec Elementor, vous gardez la main sur chaque détail. Et avec les codes fournis ici, vous gagnez un temps précieux.
N’oubliez pas de regarder la vidéo YouTube associée pour bien visualiser chaque étape. Et si vous avez des questions, les commentaires sont ouverts !
Sommaire
Les bouts de code à copier
Créer la structure de base dans Elementor
Ajouter et configurer le carrousel de témoignages
Intégrer du code CSS personnalisé
Ajouter des boutons de navigation personnalisés
Améliorer la mise en page finale
Et maintenant, à vous de jouer !
À propos de moi : Victor Mailloux
Je me suis passionné pour le digital en 2020. Curieux de nature, j’ai commencé à explorer le web, puis à créer mes premiers sites en 2022, d’abord pour moi, puis rapidement pour d’autres.
Après avoir créé mes premiers sites en 2022, j’ai décidé de me former sérieusement sur WordPress, le design web et le SEO. En 2024, j’ai lancé Web Armor, une petite agence indépendante.
Mon objectif : créer des sites WordPress modernes, rapides et bien référencés, pensés pour vraiment aider les entreprises à grandir en ligne.
Audit gratuit de votre site internet
Victor Mailloux
Artisan du web
Je me suis passionné pour le digital en 2020. Curieux de nature, j’ai commencé à explorer le web, puis à créer mes premiers sites en 2022, d’abord pour moi, puis rapidement pour d’autres.
Mon objectif : créer des sites WordPress modernes, rapides et bien référencés, pensés pour vraiment aider les entreprises à grandir en ligne. il faut que ce soit court et insiste à aller me suivre sur les réseaux sociaux
Découvre d’autres articles similaires
Créer un carrousel personnalisé avec WordPress et Elementor
Victor Mailloux
juin 11, 2025
Lire la suite »
Créer un menu qui change de couleur au scroll sur Elementor
Victor Mailloux
juin 4, 2025
Lire la suite »
