Comment ajouter une vidéo flottante collante sur le défilement de la page dans WordPress

Vouloir apprendre comment ajouter une vidéo flottante collante sur le défilement de la page dans votre site WordPress ?

Les vidéos collantes sont un moyen puissant d’engager votre public sur votre site Web. De nos jours, les gens consomment plus de contenu vidéo que de contenu écrit. Ainsi, si vous constatez que les visiteurs de votre site Web ne s’engagent pas suffisamment avec votre site, l’ajout d’une vidéo peut résoudre ce problème.

Si vous cherchez un moyen simple de rendre la vidéo de votre site Web attrayante, alors vous êtes tombé sur le bon article. Parce que dans ce blog, vous apprendrez comment ajouter une vidéo collante sur un site WordPress basé sur Elementor en quelques étapes et quelques minutes.

Alors continuez à lire…

Qu'est-ce qu'une vidéo collante ?

Les vidéos collantes sont des vidéos qui sont épinglé sur une page Web et il reste flottant au même endroit sur une fenêtre de page Web même lorsqu'un utilisateur fait défiler vers le haut ou vers le bas. 

Pourquoi ajouter Sticky Video sur le site Web Elementor WordPress ?

Le concept d’une vidéo collante sur un site Web n’a pas seulement l’air cool, mais présente également de nombreux avantages. Voici quelques-uns des avantages dont vous pouvez tirer parti en ajoutant une vidéo collante à votre Site WordPress.

• Augmente l'engagement des utilisateurs : Avec la vidéo collante, les gens peuvent regarder et lire le contenu de la page Web en même temps. En conséquence, les gens ont tendance à interagir davantage avec les sites Web.
• Augmentez le taux de réalisation des vidéos : Étant donné que les vidéos collantes ne bloquent pas la page entière, les clients sont susceptibles de les regarder jusqu'à la fin plutôt que de la fermer à mi-chemin. Ainsi, rendre votre vidéo collante peut en fait augmenter le temps de réalisation de la vidéo.
• Attirez l'attention de l'utilisateur : Habituellement, les gens lésinent sur un site. Dans ce cas, si vous vous fiez uniquement au contenu textuel, il est possible que vos clients passent à côté d'éléments importants que vous voudriez qu'ils remarquent. Vous pouvez attirer plus efficacement l'attention de votre utilisateur sur des informations spécifiques grâce à la vidéo.
• Meilleure narration : Les vidéos vous offrent un canevas plus large pour raconter des histoires que le contenu en texte brut. Puisque vous utilisez simultanément du texte, de l’animation et de la voix dans une vidéo, vous êtes mieux équipé pour raconter une histoire plus efficacement.

Convaincu que vous devriez ajouter une vidéo collante à votre site WordPress ? Eh bien, si c’est le cas, passez à la section suivante pour savoir comment procéder.

Comment ajouter une vidéo collante au site Web Elementor en 6 étapes

Il s’agit du processus le plus simple pour rendre une vidéo collante et flottante sur votre site WordPress. Suivez toutes les étapes pour ajouter une vidéo collante à Elementor en quelques instants.

Étape 1 : Installer Elementor et ElementsKit

La première étape consiste à installer tous les plugins requis. Pour suivre ce tutoriel sur la façon d'ajouter une vidéo collante dans Elementor, vous aurez besoin

• Élémentor et
• ElementsKit (versions gratuite et pro). 

Elementor est un générateur de pages par glisser-déposer et ElementsKit est un module complémentaire pour Elementor. Vous devez donc d’abord installer Elementor, puis télécharger ElementsKit et ensuite mettre à niveau votre plugin vers la version Pro.

Vous pouvez consulter le Documentation si vous avez besoin d'aide concernant l'installation d'ElementsKit pro et le processus d'activation de la licence.

Étape 2 : Activez le module de contenu collant d'ElementsKit

Pour rendre la vidéo collante, je vais utiliser les fonctionnalités de contenu collant d'ElementsKit. Vous devez donc activer le module de contenu collant.

Naviguez maintenant vers ElementsKit ⇒ Modules ⇒ Contenu collant, allumer l'option, et cliquez sur Enregistrer les modifications pour mettre à jour les modifications que vous venez d'effectuer.

Étape 3 : Faites glisser et déposez le widget Elementor Video

Accédez à la page où vous souhaitez ajouter la vidéo collante, cliquez sur l'option Modifier avec Elementor.

Choisissez la mise en page de votre choix en cliquant sur l'icône +. Après cela, recherchez la vidéo widget, faites glisser le widget et baisse là où vous souhaitez l'ajouter.

Note: Pour ce tutoriel, j'ai déjà importé la page prédéfinie J'édite pour montrer l'ensemble du processus. Tu peux créer des sites WordPress facilement avec la section prédéfinie ElementsKit.

Étape 4 : Choisissez la source vidéo et ajoutez l'URL

Avec le widget vidéo Elementor, vous pouvez afficher des vidéos provenant de sources telles que Youtube, Vimeo, DailyMotion et auto-hébergé.

D'abord, choisissez votre type de source préféré, puis fournissez l'URL de la vidéo.  Je vais utiliser YouTube pour cet article.

Note: Dans le cas d'un hébergement auto-hébergé, vous pouvez télécharger une vidéo sur votre serveur ou fournir un URL externe.

Vous pouvez également personnaliser le style de la vidéo. Pour ce faire, accédez à l’onglet style. Ici tu peux choisissez le rapport hauteur/largeur et le filtre CSS. Vous pouvez choisir parmi six types de ratio tels que 1:1, 3:2, 4:3, 16:9, etc. Cliquez sur l'icône d'édition du filtre CSS pour personnaliser le flou, la luminosité, le contraste, la saturation et la teinte.

Étape 5 : Paramètres pour rendre la vidéo Elementor collante

Allez au Onglet Avancé. Développez ensuite le sticky ElementsKit option. Ici, vous pouvez choisir le type collant en haut, en bas, en colonne et affiché lors du défilement vers le haut.

Une fois que vous avez choisi le type Sticky comme autre chose que aucun, vous obtiendrez les options suivantes :

• Collant jusqu'à : Ici, vous devez définir l'ID CSS de la section jusqu'à laquelle vous souhaitez que votre vidéo reste collante. Vous pouvez définir un ID CSS personnalisé dans la colonne, puis copiez-le et collez-le dans l'option Sticky jusqu'à.

• Décalage collant : Dans cette option, définissez la valeur de décalage. La valeur de décalage indique la distance entre la vidéo et la position supérieure de votre page.

Note: Collant jusqu'à ce que l'option ne soit pas disponible avec la colonne d'option collante car elle ne sera visible que jusqu'à ce que la colonne parent soit visible à l'écran.

Vous pouvez changer le Couleur de fond collante et fais la vidéo est persistante sur tous les appareils, sur ordinateur uniquement ou à la fois sur ordinateur et tablettes.

Étape 6 : Mettre à jour pour ajouter une vidéo collante dans Elementor et voir l'aperçu

Après avoir choisi le type de vidéo et configuré tous les paramètres persistants, cliquez sur mettre à jour pour enregistrer et cliquez sur le bouton d'aperçu pour voir les résultats finaux.

Note: Si tu veux un bouton vidéo collant qui apparaît pour afficher une vidéo en cliquant sur Ensuite vous pouvez utiliser la vidéo ElementsKit widget au lieu du widget Elementor Video. Vous pouvez suivre le même processus décrit ci-dessus pour ajouter une vidéo collante dans Elementor à l'aide du widget vidéo ElementsKit.

Voici une aperçu de Sticky Video à l'aide du widget vidéo ElementsKit.

Derniers mots

Toutes nos félicitations! Vous savez maintenant comment ajouter une vidéo collante sur le site Elementor. C’est beaucoup plus facile à faire qu’il n’y paraît au départ, n’est-ce pas ?

Essayez toutes les options et paramètres du module collant ElementsKit et utilisez-le sur votre site pour des résultats optimaux. Si vous êtes impressionné par le module collant ElementsKit et par la facilité avec laquelle il est possible d'ajouter une vidéo flottante collante lors du défilement de la page.

Puis le collection saine de widgets et les modules d'ElementsKit vous surprendront encore plus. Assurez-vous donc de vérifier toutes les fonctionnalités qu’ElementsKit a à offrir.