Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Les vidéos sont des outils de marketing efficaces pour un site Web. Et si une vidéo doit promouvoir et vendre des produits ou des services en ligne, elle doit contenir un appel à l’action clair pour les clients potentiels. Un moyen simple de fournir un appel à l’action consiste à inclure un bouton près de la vidéo sur lequel ils peuvent cliquer. Cependant, certains boutons (ou CTA) ont plus de sens s’ils apparaissent à un moment précis lorsque l’utilisateur regarde la vidéo. Par exemple, il peut y avoir une section de la vidéo (par exemple, 20 secondes) qui mentionne une remise ou une promotion spécifique. Il peut être plus efficace d’afficher un bouton «Télécharger maintenant» à ce moment précis.

Dans ce tutoriel, nous allons vous montrer comment afficher des boutons (ou CTA) à des moments précis lors de la lecture d’une vidéo HTML dans Divi. Cette technique vous permet d’utiliser des vidéos et des boutons réalisés avec Divi Builder. Ces boutons apparaissent lorsque la vidéo atteint un certain temps, lorsque l’utilisateur met la vidéo en pause ou lorsque la vidéo se termine. Il suffit de quelques extraits de JQuery. Aucun plug-in n’est requis pour cela.

Commençons!

Avant goût

Voici un aperçu de la conception que nous allons créer dans ce didacticiel.

Remarquez comment le bouton du haut apparaît lorsque l’heure actuelle de la vidéo atteint 5 secondes et le bouton du bas apparaît lorsque la vidéo se termine.

Ici, le même bouton du haut apparaîtra lorsque l’heure actuelle de la vidéo atteint 5 secondes et le bouton du bas apparaîtra lorsque la vidéo est en pause.

Vous pouvez également vérifier ceci Codepen pour une démonstration en direct de cette fonctionnalité.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devez d’abord les télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi 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 plus abonné et ne recevrez aucun e-mail supplémentaire.

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 Portabilité, sélectionnez l’onglet Importer et téléchargez le fichier depuis votre ordinateur.

Cliquez ensuite sur le bouton Importer.

Panneau de notification Divi

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

Passons au didacticiel.

Ce dont vous avez besoin pour commencer

Extension des onglets d'angle

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

  1. Si vous ne l’avez pas déjà Installez et activez le thème Divi.
  2. Créez une nouvelle page dans WordPress et éditez la page dans le frontend avec le Divi Builder (Visual Builder).
  3. Sélectionnez l’option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Voici comment afficher un bouton à des moments précis lors de la lecture d’une vidéo dans Divi

Télécharger la mise en page de la page de destination du club de football

Pour essayer le design, nous allons l’utiliser Disposition de la page de destination du club de football du pack de mise en page du club de football.

Pour ce faire, ouvrez le menu Paramètres, cliquez sur l’icône Ajouter à partir de la mise en page et recherchez et utilisez la mise en page de la page de destination du club de football.

Afficher les boutons lors de la lecture de vidéos HTML dans Divi

Mettre à jour le module vidéo

En haut de la page, vous trouverez une vidéo avec deux boutons dans la colonne de droite. Nous utiliserons ces éléments pour démontrer la fonctionnalité d’affichage de ces boutons lors de la lecture d’une vidéo.

Ouvrez les paramètres vidéo et téléchargez / ajoutez une vidéo au format de fichier MP4. Vous pouvez également insérer un fichier WEBM.

Afficher les boutons lors de la lecture de vidéos HTML dans Divi

Dans l’onglet Avancé, attribuez à la vidéo un ID CSS personnalisé:

  • Identifiant CSS: Divi-Video-Container

Afficher les boutons lors de la lecture de vidéos HTML dans Divi

Mettre à jour le bouton supérieur

Ensuite, ouvrez les paramètres du module de boutons au-dessus de la vidéo et mettez à jour l’option de transformation pour déplacer le bouton derrière la vidéo comme suit:

  • Transformer l’axe Y de translation: 100%

Afficher les boutons lors de la lecture de vidéos HTML dans Divi

Donnez ensuite au bouton la classe CSS suivante:

  • Classe CSS: Divi-Delayed-Button-1

Afficher les boutons lors de la lecture de vidéos HTML dans Divi

Mettez à jour le bouton ci-dessous

Ensuite, ouvrez les paramètres du module de boutons sous la vidéo et mettez à jour l’option de transformation afin que le bouton se déplace vers le haut comme ceci:

  • Transformer Déplacer l’axe Y: -100%

Afficher les boutons lors de la lecture de vidéos HTML dans Divi

Donnez ensuite au bouton l’ID CSS suivant:

  • Identifiant CSS: Divi-Delayed-Button-2

Afficher les boutons lors de la lecture de vidéos HTML dans Divi

Comme nous n’avons pas besoin des animations qui ont été ajoutées aux boutons dans la mise en page prédéfinie, nous pouvons les supprimer. Utilisez Multiselect pour sélectionner les deux modules de boutons (modal dans la vue des couches). Ensuite, ouvrez les paramètres des deux modules de boutons et définissez le style d’animation sur « Aucun ».

Afficher les boutons lors de la lecture de vidéos HTML dans Divi

Ajouter le code

Pour la dernière étape, nous devons ajouter le code cust0m. Pour ce faire, ajoutez un module de code sous le bouton ci-dessous.

Afficher les boutons lors de la lecture de vidéos HTML dans Divi

Dans le champ de code pour les paramètres de code, collez le CSS suivant et assurez-vous de placer le code dans le champ de code style Mots clés.

.divi-delayed-button-1,
.divi-delayed-button-2 {
  visibility: hidden;
  transition: all 400ms ease !important;
}
.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
  visibility: visible;
  transform: none;
}

Afficher les boutons lors de la lecture de vidéos HTML dans Divi

Collez ensuite le code JQuery suivant après le CSS et assurez-vous d’inclure le code dans le code scénario Mots clés.

(function ($) {
  $(document).ready(function () {
    //items
    $diviVideo = $("#divi-video-container video");
    videoElement = $("#divi-video-container video")[0];
    $delayedButton1 = $(".divi-delayed-button-1");
    $delayedButton2 = $(".divi-delayed-button-2");

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {
      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }

      //add class to show button2 when video is paused or has ended
      if (videoElement.paused || videoElement.ended) {
        $delayedButton2.addClass("show-button");
      }
    });
  });
})(jQuery);

Afficher les boutons lors de la lecture de vidéos HTML dans Divi

À propos du code

Le CSS

Tout d’abord, nous masquons les boutons et définissons la durée de transition de l’animation du bouton.

.divi-delayed-button-1,
.divi-delayed-button-2 {
  visibility: hidden;
  transition: all 400ms ease !important;
}

Ensuite, nous montrons le bouton lorsque la classe « show-button » est basculée via JQuery et définissons la transformation sur « none » afin que le bouton revienne à sa position d’origine sur la page.

.divi-delayed-button-1.show-button,
.divi-delayed-button-2.show-button {
  visibility: visible;
  transform: none;
}

Le JQuery

Nous définissons d’abord les variables que nous allons utiliser.

    //items
    $diviVideo = $("#divi-video-container video");
    videoElement = $("#divi-video-container video")[0];
    $delayedButton1 = $(".divi-delayed-button-1");
    $delayedButton2 = $(".divi-delayed-button-2");

Ensuite, nous ajoutons le Mise à jour de l’heure Événement sur la vidéo avec une fonction qui nous permet de déterminer dynamiquement l’heure actuelle de la vidéo pendant la lecture. En savoir plus sur le Événement de mise à jour de l’heure ici.

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {

    });

Dans la fonction, nous utilisons un si Instruction pour afficher le bouton 1 (le bouton supérieur) à chaque fois heure actuelle L’attribut de la vidéo est égal ou supérieur à 5 secondes.

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {

      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }

    });

REMARQUE: l’état du si La déclaration est e.target.currentTime> = 5 Cependant, vous pouvez modifier cela pour afficher le bouton à un moment différent pendant la lecture de la vidéo. Par exemple, si vous souhaitez afficher le bouton sur la vidéo heure actuelle atteint 20 secondes, vous pouvez remplacer la condition par e.target.currentTime> = 20.

Ensuite, nous utilisons un autre si Instruction pour afficher le bouton 2 (le bouton du bas) lorsque la vidéo est en pause ou terminée (en utilisant pause et fin) Propriétés HTMLMediaElement.

    //add timeupdate event on video with a function.
    $diviVideo.on("timeupdate", function (e) {
      //add class to show button1 when specified currentTime is reached.
      if (e.target.currentTime >= 5) {
        $delayedButton1.addClass("show-button");
      }

      //add class to show button2 when video is paused or has ended
      if (videoElement.paused || videoElement.ended) {
        $delayedButton2.addClass("show-button");
      }
    });

En bout de ligne

Remarquez comment le bouton du haut apparaît lorsque l’heure actuelle de la vidéo atteint 5 secondes et le bouton du bas apparaît lorsque la vidéo se termine.

Ici, le même bouton du haut apparaîtra lorsque l’heure actuelle de la vidéo atteint 5 secondes et le bouton du bas apparaîtra lorsque la vidéo est en pause.

Vous pouvez vérifier cela aussi Codepen pour une démonstration en direct de cette fonctionnalité.

Dernières pensées

L’affichage d’un bouton en fonction de l’heure actuelle d’une vidéo peut être utile pour promouvoir vos produits et services. Quelconque vidéo promotionnelle réussie mérite un appel à l’action convaincant peu importe. Espérons que ce didacticiel vous permettra de mieux comprendre comment tirer parti des fonctionnalités de la vidéo HTML pour diffuser ces puissants CTA quand et où vous le souhaitez.

Si vous êtes intéressé par d’autres façons créatives d’utiliser la vidéo HTML dans Divi, voici quelques articles qui pourraient vous plaire:

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

De bas en haut!





Source link

Recent Posts