Vous voulez que votre site web attire l'attention de vos visiteurs dès son ouverture ? Dans ce cas, vous pouvez essayerHistorique de la vidéo. Comparés aux images statiques ou aux arrière-plans de couleur unie, les arrière-plans vidéo sont beaucoup plus attrayants sur le plan visuel, car ils transmettent une atmosphère, une ambiance et même une image de marque. Il n'est pas compliqué d'obtenir ce type d'effets dans Elementor, en particulier si vous utilisez l'un de ces outils prêts à l'emploi, lesModèles gratuits.

Où les arrière-plans vidéo sont-ils appropriés ?

Avant de l'utiliser, examinez brièvement les scénarios pour lesquels les arrière-plans vidéo sont les mieux adaptés :

• Image d'en-tête de la page d'accueil (Section Hero)
  Utilisez la vidéo pour montrer des scénarios d'utilisation de produits, des dynamiques d'équipe et des histoires de marque.
• Flyer/page d'atterrissage
  Améliorez la présentation visuelle et augmentez le temps d'attente des utilisateurs.
• Page de l'événement ou de la publication
  Démontrer un rendu rythmique et émotionnel pour susciter l'émotion de l'utilisateur.
• Bannières ou blocs de section accentués par l'arrière-plan
  La vidéo ne vole pas la vedette et n'est utilisée que comme arrière-plan cinétique.

étape 1 : Choisir un modèle gratuit avec un arrière-plan vidéo

Dans la sectionbibliothèque de modèles(ou sur des plateformes tierces telles que Envato Elements, TemplateMonster, ElementorKit), il existe un grand nombre de modèles de pages gratuits qui intègrent déjà un module d'arrière-plan vidéo.

Méthode de recherche par mot-clé recommandée :

• Section du héros de la vidéo
• Page d'atterrissage avec vidéo
• Modèle de page d'accueil vidéo Elementor

Vous pouvez importer ces modèles directement sans avoir à construire la structure à partir de zéro. Si vous n'avez pas de modèle vidéo, vous pouvez commencer par choisir un modèle de page d'accueil propre dans la bibliothèque de modèles.

Allez dans l'éditeur Elementor et changez l'arrière-plan pour le type "Vidéo".

étape 2 : Remplacer le contenu de l'arrière-plan de la vidéo

Après avoir importé le modèle dans Elementor, il suffit de cliquer sur le bloc de la page avec l'arrière-plan vidéo et de suivre les étapes ci-dessous :

• Emballages sélectionnés ou modules de "segment intérieur(Section)
• Dans le panneau de gauche, cliquer sur Style onglet (d'une fenêtre) (informatique)
• Sélection du type d'arrière-plan Vidéo

• Collez l'adresse de votre vidéo dans le champ "Lien vidéo" (les vidéos MP4 ou YouTube sont recommandées). Si vous souhaitez utiliser une vidéo locale, vous pouvez également la télécharger dans votre bibliothèque de médias et copier le lien URL et le coller ici.

• Ajustez d'autres paramètres si nécessaire, par exemple :
  • Activer/désactiver la lecture automatique
  • Muet ou non
  • Boucle ou non
  • Activer ou non la superposition pour améliorer la lisibilité du texte

étape 3 : Optimiser la hiérarchie et la lisibilité du texte

Beaucoup de gens ignorent facilement un point lorsqu'ils utilisent des arrière-plans vidéo : la vidéo est sympa, mais trop de mouvement en arrière-plan affectera la lecture du texte. à ce stade, vous pouvez utiliser des techniques de masquage pour y remédier :

• Ajoutez une couleur semi-transparente et réglez la transparence sur 0,3 (c'est-à-dire 30%), laissez le type classique ou essayez les couleurs dégradées !

• Utiliser du texte blanc en gras et créer une ombre
• Veillez à ce que le contenu de premier plan soit toujours au-dessus de la vidéo et évitez d'utiliser des polices de petite taille et de couleur claire.

Elementor vous permet d'ajuster librement ces détails dans les sections Superposition d'arrière-plan ou Style de texte.

étape 4 : Adaptation aux performances mobiles

La prise en charge des arrière-plans vidéo à lecture automatique sur les téléphones mobiles n'est pas idéale et certains navigateurs peuvent désactiver la lecture automatique. Il est donc recommandé de :

• Dans "réactifMasquer l'arrière-plan de la vidéo mobile dans "Paramètres" et le remplacer par une image statique.

• Ou utilisez des fichiers vidéo plus petits pour réduire la pression de chargement.

Elementor vous permet de définir des arrière-plans distincts pour les différents appareils, ce qui est parfait pour répondre à ce besoin de changement.

étape 5 : Maintenir la vitesse de chargement des pages

L'arrière-plan vidéo est agréable à regarder, mais s'il n'est pas optimisé correctement, il peut ralentir la page d'accueil. Voici comment procéder :

• Vidéo compresséeDocumentation, dans la limite de 2-3MB
• Utilisation de vidéos spécialisées CDN ou des liens vers YouTube
• Limiter la zone de lecture de la vidéo, et non la page entière
• Ajouter un plugin de chargement paresseux pour retarder le temps de chargement des vidéos

résumés

Ajouter un arrière-plan vidéo avec un modèle Elementor gratuit est en fait plus facile que vous ne le pensez. En choisissant le bon modèle, en rempla?ant le lien vidéo, en ajustant le style du texte d'avant-plan et en optimisant un peu les performances, vous pouvez créer une page dynamique à la fois attrayante et utile.

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.