Comment créer un slider vidéo animée sur WordPress
Quand on lance son site WordPress, on veut qu’il ait de l’allure et capte l’attention dès les premières secondes. Une astuce simple pour y parvenir ? Ajouter une section avec vidéo en arrière-plan, un effet très visuel qui donne tout de suite du cachet à votre page d’accueil. Voici comment le faire pas à pas avec Elementor.
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”.
Vous arrivez alors sur l’interface de création. Glissez un conteneur pleine largeur, définissez sa hauteur à 100% en vh, et pensez à supprimer la marge interne et l’écart des colonnes. C’est ce conteneur qui contiendra votre slider vidéo.
Ce réglage est important pour que votre vidéo occupe tout l’espace visible à l’écran sans décalage visuel.
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.
Sommaire
Préparer sa page dans WordPress
Ajouter un carrousel et le configurer
Ajouter une vidéo de fond
Ajouter titre, description et bouton d’action
Intégrer les icônes de réseaux sociaux
Dupliquer les diapositives pour enrichir le slider
Astuces pour une expérience optimale
À 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 »
