Prendre RDV calendar

Comment créer un carrousel vidéo sur WordPress

Vous souhaitez ajouter un carrousel vidéo moderne à votre site WordPress ? Avec Elementor, rien de plus simple : créez une section en pleine largeur, ajoutez le widget Carousel, insérez vos vidéos en arrière-plan et superposez votre texte et vos boutons d’appel à l’action. En quelques minutes, vous obtenez une hero section dynamique, parfaite pour capter l’attention de vos visiteurs et valoriser vos services lors d’une création de site internet ou d’une refonte de site web.

Je vous guide pas à pas, sans jargon, avec les réglages essentiels pour un rendu fluide, responsive et optimisé pour le référencement SEO. Idéal pour renforcer l’identité visuelle de votre entreprise tout en améliorant l’expérience utilisateur.

Préparer sa page dans WordPress

Pour commencer, connectez-vous à votre tableau de bord WordPress. Créez une nouvelle page (ou un article) et nommez-la, par exemple, “Test vidéo”. Cliquez ensuite sur “Modifier avec Elementor”.

  • Ajoutez une section pleine largeur et définissez sa hauteur en 100 vh.

  • Supprimez toutes les marges et espacements pour partir d’une base propre.

  • Glissez le widget Carousel dans la section et ne gardez qu’une seule diapositive pour travailler plus facilement.

Ce réglage est important pour que votre vidéo occupe tout l’espace visible à l’écran sans décalage visuel.

Astuce : si vous voyez une bande blanche entre les slides, vérifiez que la largeur est bien réglée sur “Pleine largeur” et que l’espace entre diapositives est à 0.

Ajouter un carrousel et le configurer

Glissez maintenant un widget carrousel dans votre conteneur. Par défaut, il y aura trois diapositives : conservez-en une seule pour le moment, en supprimant les deux autres.

Dans les réglages du carrousel :

  • Désactivez les flèches de navigation pour un rendu plus fluide,

  • Réglez l’espacement entre les diapositives à 0 pour éviter les bandes blanches,

  • Désactivez la pause au survol et à l’interaction,

  • Ajoutez une transition fluide de 750 millisecondes pour une meilleure expérience utilisateur.

💡 Astuce : pensez à publier régulièrement votre travail pour éviter de perdre vos modifications.

Ajouter une vidéo de fond

Dans la première diapositive, ajoutez un nouveau conteneur avec une marge interne de 150 px. Ensuite, ajoutez une vidéo d’arrière-plan :

  • soit en téléversant un fichier MP4,

  • soit en collant une URL YouTube ou autre lien direct.

Assurez-vous que :

  • le conteneur soit en pleine largeur,

  • toutes les marges soient désactivées,

  • l’arrière-plan vidéo soit bien activé dans les réglages du conteneur.

Cela permet d’avoir un rendu immersif et dynamique qui attire immédiatement l’attention des visiteurs.

Ajouter titre, description et bouton d’action

Pour ajouter du contenu par-dessus la vidéo, insérez :

  • un titre accrocheur,

  • une description brève mais percutante,

  • un bouton d’appel à l’action (ex. : “Découvrir”, “En savoir plus”, etc.).

Réglez les éléments comme suit :

  • Alignement centré,

  • Largeur personnalisée de 40%,

  • Marge interne de 70 px pour chaque élément.

Pour le style :

  • Titre : blanc, taille 45 px,

  • Description : police par défaut, en blanc également,

  • Bouton : fond blanc, texte noir ou effet transparent pour plus de modernité.

Intégrer les icônes de réseaux sociaux

Pour afficher vos réseaux sociaux, ajoutez une colonne verticale d’icônes sur la droite :

  • activez la position absolue pour les placer indépendamment,

  • mettez une marge de 0, puis ajustez verticalement,

  • ajoutez un espacement de 30 px entre chaque icône.

Cela permet de renforcer votre crédibilité et d’ouvrir des canaux de communication supplémentaires avec vos visiteurs.

Dupliquer les diapositives pour enrichir le slider

Une fois votre première diapositive bien configurée, dupliquez-la :

  • changez la vidéo de fond,

  • modifiez le titre, la description et le bouton pour adapter le message,

  • vérifiez bien que les textes sont différents d’une diapositive à l’autre.

Grâce à cette méthode, vous pouvez créer un slider complet avec plusieurs sections vidéos dynamiques et personnalisées.

Astuces pour une expérience optimale

Voici quelques conseils bonus pour tirer le meilleur parti de votre aérosection :

  • Compressez vos vidéos pour éviter un temps de chargement trop long.

  • Utilisez des vidéos sans son, ou désactivez le son par défaut.

  • Pensez mobile : testez votre slider sur smartphone pour vérifier que le rendu reste fluide.

  • Ajoutez un effet overlay (superposition colorée) pour améliorer la lisibilité du texte.

Et surtout : gardez à l’esprit l’objectif de chaque section. Il ne s’agit pas juste de faire joli, mais de capter l’attention et de guider l’utilisateur vers une action.

À vous de jouer !

Vous savez maintenant comment créer un carrousel vidéo animé sur WordPress avec Elementor. L’astuce est simple : concevez une première diapositive bien structurée, puis dupliquez-la et personnalisez-la. Avec quelques réglages (vidéos adaptées, texte lisible, autoplay fluide), vous obtenez une herosection moderne et professionnelle qui valorise votre site dès la première impression.

Sommaire

Découvre mes autres vidéos Youtube
Audit gratuit de votre site internet
Qui se cache derrière Web armor ?
Expert WordPress

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.

Prendre RDV avec moi calendar