Dans cet article, nous verrons en détail comment utiliser la fonction Elementor Page Builder Dans votre site WordPressAjouter un arrière-plan vidéoLa vidéo est un excellent moyen de tirer le meilleur parti de votre site web. Vous apprendrez toutes les étapes, du choix de la bonne vidéo à l'optimisation des performances, en vous assurant que les vidéos d'arrière-plan ne sont pas seulement esthétiques, mais qu'elles améliorent également les performances globales de votre site web.

Pourquoi ajouter un arrière-plan vidéo à mon site web ?

L'ajout d'un arrière-plan vidéo à votre site web peut considérablement améliorer son attrait et l'engagement des utilisateurs. Voici quelques raisons pour lesquelles les arrière-plans vidéo peuvent être un excellent complément à la conception d'un site web :

1. Un attrait visuel fascinantLes arrière-plans vidéo attirent instantanément l'attention des visiteurs et créent une première impression impressionnante. Par rapport aux images statiques, les vidéos offrent un moyen dynamique d'exprimer la personnalité et l'esthétique de votre marque, ce qui rend votre site web plus attrayant sur le plan visuel.
2. Amélioration de la narrationLa vidéo est un excellent moyen de transmettre des informations de manière directe et attrayante. Une vidéo de fond bien choisie peut raconter l'histoire de votre marque et créer un lien plus profond avec votre public, ce qui permet de mieux communiquer les valeurs et les idées de votre marque.
3. Augmenter l'engagement des utilisateursLes études montrent que les sites web qui intègrent du contenu vidéo bénéficient généralement d'un engagement plus important de la part des utilisateurs et d'une durée de session plus longue. Cela permet non seulement d'améliorer le classement de votre site en matière de référencement, mais aussi d'augmenter efficacement les taux de conversion globaux.

Comment ajouter une vidéo d'arrière-plan avec Elementor Page Builder

Avant de commencer, vous devez vous assurer que le plugin Elementor est installé et activé.

étape 1 : Créer une nouvelle section Elementor

Tout d'abord, allez dans l'éditeur Elementor et ajoutez une nouvelle section. Cliquez sur le bouton plus pour sélectionner la largeur de section souhaitée. Dans cet exemple, nous choisironslargeur totaleafin que l'arrière-plan vidéo couvre toute la largeur de la page.

Ajouter une section: :

• Dans l'éditeur Elementor, cliquez sur le bouton plus.
• Choisissez une mise en page pleine largeur afin que la vidéo occupe toute la largeur de la page.

Vous pouvez ainsi vous assurer que l'arrière-plan vidéo s'affichera correctement sur les ordinateurs de bureau et les appareils mobiles.

étape 2 : Ajouter le nom de la classe à la section Elementor

Après avoir ajouté une section, le panneau de gauche affiche une option intitulée "Modifier la section". Cette option permet de personnaliser la présentation et le style de la section. Pour ajuster l'apparence de la section, accédez à l'onglet "Mise en page" et ajustez la largeur du contenu selon vos besoins.

Ajuster la largeur de la mise en page: :

• Dans l'onglet Mise en page, vous pouvez sélectionner la largeur du contenu. Pour les arrière-plans vidéo, nous recommandons d'utiliser une mise en page encadrée ou pleine largeur afin de maximiser la visibilité de la vidéo.
• Choisissez une mise en page appropriée en fonction du style général du site web.

En choisissant la bonne largeur de mise en page, vous pouvez vous assurer que l'arrière-plan vidéo est cohérent avec la conception générale de votre site web et qu'il offre la meilleure expérience visuelle à vos utilisateurs.

étape 3 : Ajouter une vidéo à une partie de l'arrière-plan

Avant d'ajouter une vidéo à une page Elementor, veillez à la préparer correctement pour garantir des performances optimales :

Choisir le bon format vidéo: :

• Assurez-vous que votre vidéo est dans un format adapté au web. Les formats mp4 et WebM sont les plus couramment utilisés et se lisent sans problème dans la plupart des navigateurs.

Vidéo compressée: :

• Utilisez un outil de compression vidéo, tel que HandBrake ou Adobe Media Encoder, pour réduire la taille du fichier vidéo tout en conservant une qualité visuelle élevée. Cela permet d'améliorer la vitesse de chargement des pages et d'éviter les problèmes de lenteur causés par des fichiers vidéo volumineux.

Vidéo hébergée: :

• Téléchargez vos vidéos sur une plateforme d'hébergement fiable telle que YouTube ou Vimeo. La visibilité de vos vidéos peut être définie comme publique ou privée selon vos besoins.
• Vous pouvez également choisir d'auto-héberger la vidéo en la téléchargeant dans la médiathèque de WordPress, puis en utilisant le fichier .mp4 de la médiathèque comme vidéo d'arrière-plan.

Ajouter une vidéo à une page Elementor: :

• Passez à l'onglet Styles dans l'éditeur Elementor.
• Dans la section Arrière-plans, vous avez le choix entre Classique, Dégradé, Vidéo et "Diaporama". "Diaporama". Sélectionnez l'option Vidéo et ajoutez un fichier vidéo préparé ou un lien vidéo.

Avec ces étapes, il est facile d'intégrer des arrière-plans vidéo dans les pages Elementor et de s'assurer qu'ils se lisent sans problème sur une variété d'appareils et de navigateurs.

Après avoir sélectionné l'arrière-plan vidéo, plusieurs nouvelles options apparaissent. Ici, des effets dynamiques tels que des effets de survol et des effets de particules peuvent être ajoutés en activant l'option de particules. Lorsque vous cliquez sur l'ic?ne vidéo, la configuration suivante s'affiche :

étape 4 : Paramètres de l'arrière-plan vidéo personnalisé

Pour que les arrière-plans vidéo soient les plus beaux possibles sur votre site web, Elementor propose plusieurs options de personnalisation pour vous aider à optimiser l'affichage et les performances de vos arrière-plans vidéo.

Réglage de l'image de remplacement: :

• Ajoutez une autre image au cas où la vidéo ne serait pas lue ou que l'appareil ne prendrait pas en charge la lecture automatique. Choisissez une image de haute qualité en rapport avec le contenu de la vidéo pour garantir une expérience visuelle cohérente sur tous les appareils.

Réglage de la hauteur de la vidéo: :

• Si la vidéo ne s'affiche pas entièrement sur la page, vous pouvez ajuster le paramètre Hauteur minimale dans l'onglet Disposition. Il est recommandé de fixer la hauteur minimale à au moins 400 px pour que la vidéo s'affiche correctement sur tous les appareils.

Utilisation d'une incrustation d'arrière-plan: :

• La fonction d'incrustation d'arrière-plan permet d'appliquer une incrustation de couleur afin d'améliorer la lisibilité du texte et de donner à la vidéo un style visuel unique. Cette fonction est particulièrement importante pour les scénarios dans lesquels du texte ou des graphiques doivent être superposés à la vidéo.

Garantir la réactivité des mobiles: :

• Testez l'affichage des arrière-plans vidéo sur les appareils mobiles pour garantir une expérience de visualisation fluide sur toutes les tailles d'écran. Vous pouvez prévisualiser dans le mode d'affichage mobile d'Elementor et ajuster les paramètres si nécessaire.

Ces options de personnalisation vous permettent d'affiner l'affichage de vos arrière-plans vidéo afin de garantir la meilleure expérience visuelle à vos utilisateurs.

étape 5 : Tests et optimisation

Après avoir ajouté avec succès la vidéo d'arrière-plan, l'étape suivante consistait à tester son impact sur les performances du site et l'expérience de l'utilisateur, et à procéder aux optimisations nécessaires.

1. Test de vitesse de chargement des pages: :
   • Vérifiez que la vidéo n'affecte pas sérieusement la vitesse de chargement de la page. Utilisez la fonction Google PageSpeed Insights et d'autres outils pour évaluer les performances et réduire les temps de chargement si nécessaire.

2. Test de compatibilité des navigateurs: :
   • Testez votre site web dans différents navigateurs pour vous assurer que les arrière-plans vidéo s'affichent et fonctionnent correctement dans chaque navigateur.
3. évaluation de l'expérience utilisateur: :
   • évaluer l'impact du contexte vidéo sur l'expérience globale de l'utilisateur et confirmer que la vidéo ne distrait pas l'utilisateur et ne rend pas l'interaction difficile.

Grace à ces étapes de test et d'optimisation, vous pouvez vous assurer que vos arrière-plans vidéo fonctionnent de manière optimale sur votre site web et qu'ils offrent aux visiteurs une expérience de navigation fluide et agréable.

résumés

En ajoutant un arrière-plan vidéo à votre site web WordPress, vous pouvez améliorer de manière significative l'attrait visuel et l'engagement des utilisateurs de votre site web. Cela peut être facilement réalisé en utilisant les fonctionnalités intégrées d'Elementor Page Builder ou avec l'aide de plugins tiers. N'oubliez pas que la clé d'un arrière-plan vidéo réussi est de choisir un contenu qui correspond à votre marque et à votre message, d'optimiser la vidéo pour s'assurer qu'elle se charge rapidement, et de veiller à ce qu'elle offre une bonne expérience sur tous les appareils.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.