ETAPE 1 : Créer une nouvelle page
Pour l’exemple, partons sur une nouvelle page !
Pour afficher une vidéo en arrière plan de la première section, vous pouvez passer sur le modèle de page « Elementor Canevas » en cliquant sur la roue crantée en bas à gauche « Réglages », supprimant ainsi le Header et le Footer.
Cette étape est facultative, dépendant de votre thème et de votre envie.
ETAPE 2 : Créer une nouvelle section adaptée à l'écran
Créez une nouvelle section en cliquant sur le bouton + Rouge sur le coté droit de votre écran. Cliquez sur modifier la section et sélectionnez « Adapté à l’écran » dans le champ « Hauteur », cela permettra à la section d’occuper toute la hauteur de l’écran du visiteur.
En faisant cette étape, vous pourrez ajouter du contenu en premier plan tout en laissant la vidéo en arrière plan.
ETAPE 3 : Ajouter la vidéo en arrière plan
Rendez-vous sur l’onglet « Style » de votre section, puis sélectionner l’icône caméra dans la partie « Arrière-plan ».
Vous pouvez ensuite entrer le lien Youtube, Vimeo ou de votre propre vidéo .mp4 dans le champ « Lien de la vidéo« .
Plusieurs paramétrages supplémentaires sont possibles :
- Vous pouvez déterminer le début de la vidéo en secondes
- Vous pouvez laisser la vidéo tourner en boucle ou sélectionner « Jouer une unique fois » pour lire la vidéo qu’une seule fois.
ETAPE 4 : Ajouter un filtre pour voir le contenu
Si vous souhaitez ajouter un titre et du contenu par dessus votre vidéo en arrière plan, il est préférable d’ajouter un « calque » permettant une meilleure lisibilité du contenu.
Pour cela, dans l’onglet « Style », rendez-vous sur le paramétrage « Superposition d’arrière-plan », sélectionnez une couleur (souvent foncé, pour du contenu clair et inversement) puis déterminez l’opacité. Plus elle sera proche de 1, moins vous verrez la vidéo en arrière plan.
ETAPE 5 : Ajouter votre contenu en premier plan
A présent, vous pouvez ajouter le contenu au dessus de la vidéo en utilisant les widgets Elementor habituels : Titre, texte, bouton …
N’oubliez pas de sauvegarder et de tester une fois terminé !
Conseil Bonus
Je vous recommande d'utiliser des vidéos Youtube ou Viméo et d'éviter les fichiers mp4 directement déposés sur votre serveur/hébergement. Cela peut alourdir la page en particulier sur la version mobile
