Comment créer une vidéo promotionnelle collante avec une bascule Afficher/Masquer dans Divi

Une vidéo promotionnelle est un formidable outil de marketing pour promouvoir vos produits et services auprès de tous les visiteurs qui préfèrent simplement regarder une vidéo plutôt que d'explorer votre page pour obtenir des informations. Et, si vous êtes sûr que votre vidéo contribuera à augmenter les conversions, c'est une bonne idée de garder la vidéo accessible aux utilisateurs autant que possible. Dans cet esprit, une vidéo promotionnelle collante (une vidéo qui reste fixe en haut de la page) pourrait être un atout précieux pour votre site Web.

Dans ce tutoriel, nous allons vous montrer comment créer une vidéo promo collante avec une bascule afficher/masquer dans Divi. L'idée est de montrer la version en taille réelle de la vidéo initialement au-dessus du pli. Ensuite, lorsque l'utilisateur fait défiler la page, la vidéo reste en haut de la page pour un accès et/ou une visualisation facile pendant que l'utilisateur explore le reste du contenu de la page. Bien sûr, cela peut être un peu intrusif pour certains visiteurs. Nous allons donc également vous montrer comment ajouter un bouton bascule pour donner aux utilisateurs la possibilité d'afficher ou de masquer la vidéo quand ils le souhaitent.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

C'est la vidéo collante sans la bascule.

Voici la même vidéo collante avec le bouton bascule.

Voici un examen plus approfondi de la fonctionnalité de basculement.

Et voici à quoi cela ressemble sur mobile.

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 chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! 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éinscrit » ni ne recevrez 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 ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le 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 mise en page 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 importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Sélectionnez l'option « Choisir une mise en page prédéfinie ».
   
4. Téléchargez la mise en page des services de marketing numérique.
   

Comment créer une vidéo promotionnelle collante avec une bascule Afficher/Masquer pour votre page de vente

Ajout de la ligne pour la vidéo collante

Pour commencer, nous allons supprimer le deuxième module de texte dans la rangée de la première/haute section de la mise en page.

Sous la ligne existante de la section supérieure, ajoutez une nouvelle ligne à une colonne.

Ouvrez les paramètres de ligne pour la nouvelle ligne et, sous l'onglet Avancé, mettez à jour l'index Z comme suit :

• Indice Z : 14

Cela garantira que la vidéo que nous ajoutons à la ligne restera au-dessus de l'autre contenu de la page lorsqu'elle sera bloquée pendant le défilement de la page.

Ajout de la vidéo

Dans la colonne de la ligne, ajoutez un nouveau module vidéo.

Ouvrez les paramètres vidéo et téléchargez les formats mp4 et webm pour la vidéo de votre choix.

Si vous le souhaitez, ajoutez une image de superposition à la vidéo.

Sous l'onglet Conception, mettez à jour les options de dimensionnement suivantes :

• Largeur maximale : 900 pixels
• Alignement du module : centre

• Coins arrondis : 8px
• Box Shadow : voir capture d'écran

Rendre la colonne collante

Ouvrez les paramètres de la colonne contenant la vidéo et ajoutez la classe CSS suivante sous l'onglet Avancé :

• Classe CSS : et-sticky-video

Mettez ensuite à jour la position du manche comme suit :

• Position collante : coller au sommet
• Transition par défaut et styles collants : NO

Maintenant que la position collante est en vigueur, ajoutez le CSS personnalisé suivant à l'élément principal pour l'état collant :

width: 300px !important;
right: 0px !important;
left: auto !important;
top: 0px;

Mettre à jour la taille de l'icône de lecture vidéo dans l'état collant

Ensuite, ouvrez à nouveau les paramètres vidéo et mettez à jour la taille de la police de l'icône de lecture dans l'état persistant comme suit :

• Utiliser la taille de l'icône personnalisée : OUI
• Taille de la police de l'icône de lecture (collante): 50px

Résultat à ce jour

Création du bouton bascule vidéo collante

Pour créer le bouton bascule vidéo collant, créez un nouveau module de boutons sous le module vidéo.

Déplacez ensuite le bouton au-dessus du module vidéo.

Ouvrez les paramètres du bouton et mettez à jour le texte du bouton comme suit :

• Texte du bouton : Masquer

(REMARQUE : ce texte sera remplacé/basculé par le mot « Afficher » lorsque vous cliquez sur le bouton lorsque nous ajouterons notre code ultérieurement.)

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Utiliser des styles personnalisés pour le bouton : OUI
• Styles de texte des boutons : 14 pixels
• Couleur du texte du bouton : #fa50a9
• Poids de la police du bouton : semi-gras
• Style de police des boutons : TT
• Icône du bouton : flèche vers la droite
• Afficher uniquement l'icône au survol pour le bouton : NON

(REMARQUE : l'icône du bouton que vous choisissez sera pivotée de 180 degrés lorsque vous cliquez sur le bouton lorsque nous ajoutons la disposition du code pour une meilleure expérience utilisateur plus intuitive.

Mettez également à jour l'espacement du bouton :

• Rembourrage : 0,5 em en haut, 0,5 em en bas, 1 em à gauche, 1,7 em à droite

Sous l'onglet Avancé, ajoutez la classe CSS suivante au bouton :

• Classe CSS : et-sticky-video-toggle

Sous l'onglet Avancé, mettez à jour l'option de position :

• Position : Absolu
• Emplacement : en bas à gauche

Déplacez maintenant le bouton en dehors de la colonne/vidéo vers la gauche en mettant à jour l'option de traduction de transformation dans l'état persistant comme suit :

• Transformer Traduire l'axe X (collant) : -100 %

Pour terminer la conception du bouton bascule, nous devons masquer le bouton jusqu'à ce qu'il atteigne l'état collant. Pour ce faire, mettez à jour le CSS personnalisé vers l'élément principal pour le bureau et l'état persistant comme suit :

Pour l'élément principal sur le bureau…

display:none !important;

Pour l'élément principal sur Sticky…

display:block !important;

Ajout du code personnalisé pour la fonctionnalité de basculement

Pour que la bascule fonctionne comme nous en avons besoin, nous devrons ajouter un module de code sous le module vidéo.

CSS personnalisé

Dans l'onglet contenu, passez le CSS personnalisé suivant en vous assurant de l'envelopper dans les balises de style .

.et-sticky-video-toggle.et_pb_button:after, .et_pb_sticky.et-sticky-video {
transition: all 200ms;
}
.et_pb_sticky.et-sticky-video-active {
transform: translate(100%, 0%);
}
.et-sticky-video-toggle:hover {
cursor: pointer;
}
.et-sticky-video-hidden:after {
transform: rotate(180deg) !important;
}

JQuery personnalisé

Ensuite, sous le CSS avec les balises de style, ajoutez le JQuery suivant enveloppé dans les balises de script .

(function($) {
$(document).ready(function(){
var $stickyVideoToggle = $('.et-sticky-video-toggle');

$stickyVideoToggle.on('click',function(e) {
e.preventDefault();

$(e.target).closest('.et-sticky-video').toggleClass('et-sticky-video-active');

$(this).toggleClass('et-sticky-video-hidden');
if ($(this).hasClass('et-sticky-video-hidden')) {
$stickyVideoToggle.text('show');
} else {
$stickyVideoToggle.text('hide');
}
});
});
})(jQuery);

C'est ça!

Résultat final

Affichez maintenant la version en direct de la page pour voir les résultats par vous-même.

C'est la vidéo collante sans la bascule.

Voici la même vidéo collante avec le bouton bascule.

Voici un examen plus approfondi de la fonctionnalité de basculement.

Et voici à quoi cela ressemble sur mobile.

Ajoutez facilement des modules supplémentaires à la colonne collante pour compléter la vidéo

Étant donné que la position collante est ajoutée à la colonne (pas à la vidéo), n'hésitez pas à ajouter des modules/contenus supplémentaires pour compléter la vidéo.

Par exemple, vous pouvez inclure un bouton au bas de la vidéo dans la même colonne collante.

Ensuite, il restera sous la vidéo dans l'état collant de la colonne.

Ajoutez facilement vos propres options vidéo personnalisées avec cette mise en page vidéo collante

L'application de la position collante à la colonne (pas à la vidéo) est également pratique pour ajouter des intégrations vidéo personnalisées ou du HTML (à l'aide d'un module de texte ou de code) à l'intérieur de la colonne. La fonctionnalité de vidéo collante fonctionnera toujours.

Par exemple, vous pouvez ajouter une vidéo HTML5 à un module de code dans la même colonne.

Modifiez également facilement les structures de colonnes !

En outre, vous pouvez facilement changer la ligne en n'importe quelle structure de colonne pour afficher votre vidéo avec le contenu adjacent. Par exemple, vous pouvez créer une mise en page à deux colonnes avec la vidéo collante initialement dans la colonne de droite ou de gauche. Assurez-vous simplement que la colonne contenant le contenu vidéo aura la même classe CSS et le même style collant que ceux expliqués dans ce didacticiel. La fonctionnalité collante fonctionnera de la même manière.

Par exemple, en utilisant notre conception existante, nous pouvons ajouter une nouvelle colonne en utilisant la vue des couches et remplir cette nouvelle colonne avec le texte de l'en-tête principal.

La colonne rémanente fonctionnera toujours de manière transparente tandis que la colonne/le contenu adjacents resteront dans le flux normal du document.

Problème avec les vidéos/intégrations YouTube à l'aide de l'option Divi Overlay Image

Si vous utilisez une URL YouTube pour intégrer une vidéo avec le module vidéo comme dans cette conception, il est préférable de ne pas utiliser l'option d'image de superposition intégrée de Divi (avec icône de lecture). Cela entraînera la lecture automatique de l'audio vidéo depuis le début dans l'état persistant, ce qui entraînera une lecture audio en double à différents intervalles. 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 les fichiers / URL vidéo mp4 et WebM.

Dernières pensées

Construire une vidéo promotionnelle collante avec une bascule afficher/masquer pour votre page ouvre la porte à de nouvelles façons de promouvoir vos produits et services. Non seulement vous pouvez garder ces vidéos à fort taux de conversion au premier plan, mais vous pouvez également facilement inclure des informations complémentaires ou des CTA au-dessus ou en dessous de la vidéo simplement en l'ajoutant à la même colonne dans Divi.

En fait, vous n'avez même pas besoin d'inclure une vidéo du tout, remplissez simplement la colonne collante avec toutes les informations que vous souhaitez conserver en haut de la page lors du défilement !

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

À votre santé!