Comment connecter Google Search Console et Google Analytics à votre site WordPress ?
Victor Mailloux
3 décembre 2025
Lire la suite »
Que ce soit pour afficher des témoignages clients, mettre en avant des réalisations ou dynamiser l’apparence d’un site, le carrousel est un élément visuel incontournable dans la création de site internet. Avec WordPress et Elementor, il est facile d’en intégrer un pour donner du mouvement et du style à ton site vitrine ou à ton site e-commerce. Mais ici, on va aller plus loin : découvrir comment concevoir un carrousel entièrement personnalisé, esthétique et optimisé, idéal lors d’une refonte de site web ou d’une amélioration du référencement SEO.
Dans la vidéo disponible sur ma chaîne YouTube, je détaille chaque étape du processus. Et pour ceux qui souhaitent gagner du temps ou gérer eux-mêmes la maintenance de leur site web, vous trouverez ci-dessous tous les extraits de code prêts à être intégrés.
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;
}
}
<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>
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…
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.
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.
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-prev et card-next aux deux boutons
En combinant CSS et JavaScript, vous obtenez un système de navigation sur mesure, beaucoup plus souple et esthétique.
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.
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 !
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.
