Comment afficher/masquer un curseur vidéo en fonction du statut de connexion avec Divi

Les curseurs vidéo sont parfaits pour présenter une collection de vidéos pour un cours, une page de recettes ou des didacticiels. Ils sont également un bon candidat pour présenter du contenu premium aux membres ou abonnés de votre site. Par exemple, un visiteur pourrait atterrir sur une page de recette et ne voir que les instructions au format texte uniquement. Cependant, une fois qu'ils deviendront un utilisateur enregistré, ils verront un curseur vidéo sur cette même page en tant que contenu premium. Dans ce didacticiel, nous allons vous montrer à quel point il est facile de masquer/afficher un curseur vidéo en fonction du statut de connexion avec Divi. Cela vous permet de donner du contenu vidéo aux utilisateurs connectés en tant que fonctionnalité premium.

Plongeons-nous !

Aperçu

Voici un bref aperçu de la conception que nous allons créer dans ce didacticiel. Remarquez comment le curseur vidéo est caché aux utilisateurs jusqu'à ce qu'ils se connectent à l'aide du formulaire de connexion.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bienfaits Divi et un pack Divi Layout gratuit tous les lundis ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger. Vous ne serez pas "réabonné" ou ne recevrez pas d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack de mise en page ultime Divi Landing Page, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-nous et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la disposition de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton d'importation.

Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.

Passons au tutoriel, d'accord ?

Afficher/masquer un curseur vidéo en fonction du statut de connexion avec Divi

Créer une nouvelle page avec une mise en page prédéfinie

Commençons par notre tutoriel en mettant en place une nouvelle page avec l'une de nos mises en page prédéfinies.

Voici comment procéder :

1. Créer une nouvelle page et lui donner un titre
2. Cliquez pour utiliser le Divi Builder (sur le front-end)
3. Sélectionnez pour utiliser une mise en page prédéfinie
4. Recherchez et sélectionnez la mise en page de la recette de la diététiste.
5. Pour charger la mise en page sur la page, cliquez simplement sur le bouton "Utiliser cette mise en page".

Une fois la mise en page chargée sur la page, vous êtes prêt à ajouter le curseur vidéo collant à la page.

Ajout du curseur vidéo à la page

Sur la page de recette, vous verrez une vidéo pleine largeur dans une rangée juste sous la rangée avec les ingrédients et les instructions. Nous allons remplacer la vidéo par un module slider vidéo. Pour ce faire, supprimez le module vidéo.

Ajoutez ensuite un nouveau module de curseur vidéo à sa place.

Ajouter des vidéos au slider

Pour ajouter des vidéos au curseur, ouvrez les paramètres du curseur vidéo. Sous l'onglet contenu, vous verrez une vidéo fictive déjà en place. Ouvrez les paramètres de la vidéo existante.

Ensuite, supprimez la vidéo par défaut et cliquez sur l'icône Ajouter une vidéo pour ajouter une nouvelle vidéo au curseur.

Pour cet exemple, j'ajoute une vidéo auto-hébergée. C'est toujours une bonne idée de télécharger une version MP4 et une version Webm du fichier vidéo.

Ensuite, nous pouvons ajouter une superposition d'image à la vidéo.

Une fois terminé, enregistrez les modifications.

Pour créer des vidéos supplémentaires, revenez aux paramètres du curseur vidéo et dupliquez la vidéo existante 3 fois pour obtenir un total de 4 vidéos. Ensuite, sous l'option de superposition, basculez sur OUI pour afficher les superpositions d'images sur la vidéo principale.

Ajout de l'option d'affichage conditionnel

Pour ce didacticiel, nous allons montrer ce curseur vidéo uniquement aux utilisateurs connectés. Pour ce faire, accédez à l'onglet avancé et cliquez pour ajouter une nouvelle condition dans le groupe d'options de conditions.

Dans le menu déroulant des conditions d'affichage, sélectionnez Statut de connexion dans la liste. Assurez-vous de choisir de n'afficher que si l'utilisateur est connecté . Enregistrez ensuite les modifications.

Astuce bonus : créez un CTA ou un formulaire de connexion pour les utilisateurs qui ne sont pas connectés

Pour les nouveaux visiteurs, vous souhaiterez probablement créer une sorte de CTA pour vous inscrire ou un formulaire de connexion pour permettre aux membres de se connecter facilement et de voir les vidéos. Pour ce faire, vous pouvez créer une nouvelle ligne à deux colonnes avec une image qui ressemble à une vidéo dans la colonne de gauche et un formulaire de connexion dans la colonne de droite comme dans la capture d'écran ci-dessous.

Ouvrez ensuite les paramètres de ligne et ajoutez une condition d'affichage basée sur le statut de connexion. Seulement cette fois, sélectionnez pour afficher uniquement si l'utilisateur est déconnecté . Cela montrera le contenu aux utilisateurs uniquement s'ils sont déconnectés.

Lors de l'ajout du formulaire de connexion, assurez-vous de mettre à jour l'option de redirection pour rediriger vers la page actuelle . Cela améliorera l'expérience utilisateur pour les utilisateurs qui souhaitent se connecter et visionner les vidéos sur la même page.

Pour savoir comment créer une section CTA pour les utilisateurs déconnectés à partir de zéro, consultez notre article sur la façon de créer des articles de blog exclusifs aux membres avec les options de condition de Divi.

Résultats finaux

Voici un aperçu de nos derniers sliders vidéo. Remarquez comment ils sont cachés aux utilisateurs jusqu'à ce qu'ils se connectent à l'aide du formulaire de connexion.

Le problème avec les vidéos/intégrations YouTube à l'aide des superpositions d'images sur la vidéo principale

Si vous utilisez une URL YouTube pour intégrer plusieurs vidéos dans le curseur vidéo, il est préférable de ne pas utiliser l'option intégrée de Divi pour "Afficher les superpositions d'images sur la vidéo principale". Cela entraînera la lecture automatique de l'audio vidéo depuis le début dans l'état collant, ce qui provoquera une lecture audio en double à différents intervalles.

Ce n'est pas le cas pour les vidéos auto-hébergées au format mp4 ou webm. Vous pouvez afficher des superpositions d'images sur la vidéo principale pour les vidéos auto-hébergées. Donc, si vous souhaitez utiliser l'image de superposition de Divi et l'icône de lecture avec le module vidéo Divi, vous devez plutôt ajouter des fichiers/URL vidéo MP4 et Webm.

Cela dit, vous pouvez toujours ajouter des superpositions d'images personnalisées à vos vidéos Youtube dans le curseur vidéo. Ils apparaîtront toujours sur les contrôles des vignettes sous la vidéo principale.

Dernières pensées

Avoir la possibilité d'afficher/masquer les curseurs vidéo en fonction du statut de connexion peut s'avérer utile lorsque vous souhaitez proposer du contenu premium aux membres ou aux abonnés.

Pour en savoir plus, consultez un article similaire sur la façon de créer des articles de blog exclusifs aux membres avec les options de condition de Divi.

J'ai hâte de vous entendre dans les commentaires.

Acclamations!