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

Vous voulez savoir comment ajouter une vidéo flottante collante sur le défilement de page de 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. Donc, si vous trouvez 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 collante, alors vous avez atterri sur le bon article. Parce que dans ce blog, vous apprendrez comment ajouter une vidéo collante dans 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ées sur une page Web et qui restent flottantes 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 WordPress Elementor ?

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 que vous pouvez exploiter en ajoutant une vidéo collante à votre site Web 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 d'achèvement de la vidéo : étant donné que les vidéos collantes ne bloquent pas toute la page, les clients sont susceptibles de 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 ne vous fiez qu'au contenu textuel, il est possible que vos clients passent à côté de choses importantes 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 pouvez utiliser du texte, de l'animation et de la voix en même temps 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 vous l'êtes, passez à la section suivante pour comprendre comment vous pouvez le faire.

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

C'est le processus le plus simple pour rendre la 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émentaire et
• ElementsKit (versions gratuites et pro).

Elementor est un constructeur de pages par glisser-déposer et ElementsKit est un module complémentaire pour Elementor. Donc, vous devez d'abord installer Elementor, puis télécharger ElementsKit et ensuite mettre à niveau votre plugin vers la version Pro.

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

Étape 2 : Activer le module Sticky Content 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 ⇒ Sticky Content , activez l'option et cliquez sur Enregistrer les modifications pour mettre à jour les modifications que vous venez d'apporter.

É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 que vous souhaitez en cliquant sur l'icône + . Après cela, recherchez le widget Vidéo , faites glisser le widget et déposez -le à l'endroit où vous souhaitez l'ajouter.

Note : Pour ce tutoriel, j'ai déjà importé la page prédéfinie que je suis en train d'éditer pour montrer l'ensemble du processus. Vous pouvez facilement créer des sites Web WordPress 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 Self Hosted.

Tout 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.

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

Vous pouvez également personnaliser le style de la vidéo. Pour ce faire, accédez à l'onglet Style. Ici, vous pouvez choisir le format d'image et le filtre CSS . Vous pouvez choisir parmi six types de rapport 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 dans l' onglet Avancé. Développez ensuite l'option collante ElementsKit . Ici, vous pouvez choisir le type collant en haut, en bas, en colonne et afficher le défilement vers le haut.

Une fois que vous avez choisi le type Sticky comme autre chose que none, 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é pour la colonne, puis le copier et le coller dans l'option Coller jusqu'à.

• Sticky Offset : 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.

Remarque : Coller 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 modifier la couleur d'arrière-plan collante et rendre la vidéo collante sur tous les appareils, sur les ordinateurs de bureau uniquement ou à la fois sur les ordinateurs de bureau et les 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 collants, cliquez sur mettre à jour pour enregistrer et cliquez sur le bouton de prévisualisation pour voir les résultats finaux.

Remarque : Si vous souhaitez qu'un bouton vidéo collant qui s'affiche pour afficher une vidéo en un clic , vous pouvez utiliser le widget ElementsKit Video 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 un aperçu de Sticky Video utilisant le 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 tous les paramètres du module collant ElementsKit et utilisez-le sur votre site pour un maximum de résultats. Si vous êtes impressionné par le module collant ElementsKit et par la facilité avec laquelle il est ajouté, comment ajouter une vidéo flottante collante sur le défilement de la page.

Ensuite, la collection complète de widgets et de modules d'ElementsKit vous surprendra encore plus. Assurez-vous donc de vérifier toutes les fonctionnalités que ElementsKit a à offrir.