Divi'de HTML Video Oynatırken Belirli Zamanlarda Düğmeler (veya CTA'lar) Nasıl Gösterilir

Videolar, bir web sitesi için etkili pazarlama araçlarıdır. Bir video, ürünleri veya hizmetleri çevrimiçi olarak tanıtmayı ve satmayı amaçlıyorsa, potansiyel müşteriler için net bir harekete geçirici mesaj içermelidir. Harekete geçirici mesaj sağlamanın basit bir yolu, videonun yanına tıklayabilecekleri bir düğme eklemektir. Ancak, bazı düğmeler (veya CTA'lar), kullanıcı videoyu izlerken belirli bir zamanda görünmek için daha mantıklıdır. Örneğin, videonun belirli bir indirim veya promosyondan bahsedildiği bir bölüm (20 saniye gibi) olabilir. Belirli bir zamanda “Şimdi Alın” düğmesinin görünmesi daha etkili olabilir.

Bu öğreticide, Divi'de bir HTML videosu oynatırken belirli zamanlarda düğmelerin (veya CTA'ların) nasıl görüneceğini göstereceğiz. Bu teknik, Divi Builder ile tasarlanmış videoları ve düğmeleri kullanmanıza ve ardından video belirli bir zamana ulaştığında, kullanıcı videoyu duraklattığında veya video sona erdiğinde bu düğmelerin görünmesini sağlar. Tek gereken birkaç JQuery parçacığı. Bunun için eklentiye gerek yok.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Videonun geçerli süresi 5 saniyeye ulaştığında üst düğmenin nasıl göründüğüne ve video bittiğinde alt düğmenin nasıl göründüğüne dikkat edin.

Burada, videonun geçerli süresi 5 saniyeye ulaştığında aynı üst düğme görünür ve video duraklatıldığında alt düğme görünür.

Bu işlevin canlı bir demosu için bu kod kalemine de göz atabilirsiniz.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Divi'de Video Oynatırken Belirli Zamanlarda Bir Düğme Nasıl Gösterilir

Futbol Kulübü Açılış Sayfası Düzeni Yükle

Tasarıma hızlı bir başlangıç ​​yapmak için Soccer Club Layout Pack'ten Soccer Club Açılış Sayfası Düzenini kullanacağız.

Bunu yapmak için ayarlar menüsünü açın, düzenden ekle simgesine tıklayın ve Soccer Club Açılış Sayfası düzenini bulun ve kullanın.

Video Modülünü Güncelle

Sayfanın üst kısmında, sağ sütunda iki düğmeli bir video bulacaksınız. Bu öğeleri, video oynatırken bu düğmeleri gösterme işlevini göstermek için kullanacağız.

Video ayarlarını açın ve MP4 dosya formatında bir video yükleyin/ekleyin. Ayrıca bir WEBM dosyası da ekleyebilirsiniz.

Gelişmiş sekmesi altında videoya özel bir CSS kimliği verin:

• CSS kimliği: divi-video-container

Üst Düğmeyi Güncelle

Ardından, videonun üzerindeki düğme modülünün ayarlarını açın ve düğmeyi videonun arkasına hareket ettirecek şekilde dönüştürme seçeneğini güncelleyin:

• Dönüştür Y eksenini çevir: %100

Ardından düğmeye aşağıdaki CSS Sınıfını verin:

• CSS Sınıfı: bölme-gecikmeli-düğme-1

Alt Düğmeyi Güncelle

Ardından, videonun altındaki düğme modülünün ayarlarını açın ve düğmeyi aşağıdaki gibi yukarı hareket ettirecek şekilde dönüştürme seçeneğini güncelleyin:

• Dönüştür Y eksenini çevir: -%100

Ardından düğmeye aşağıdaki CSS kimliğini verin:

• CSS Kimliği: bölme gecikmeli düğme-2

Hazır düzende butonlara eklenen animasyonlara ihtiyacımız olmadığı için onları çıkarabiliyoruz. Her iki düğme modülünü de seçmek için çoklu seçimi kullanın (katman görünümü modunda). Ardından düğme modüllerinden birinin ayarlarını açın ve animasyon stilini yok olarak ayarlayın.

• Animasyon Stili: Yok

Kodu Ekle

Son adım için cust0m kodunu eklememiz gerekiyor. Bunu yapmak için alttaki düğmenin altına bir kod modülü ekleyin.

Kod ayarları kod kutusunun içine, aşağıdaki CSS'yi yapıştırın, kodu stil etiketlerine sardığınızdan emin olun.

.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;
}

Ardından, kodu komut dosyası etiketlerine sardığınızdan emin olarak aşağıdaki JQuery kodunu CSS'den sonra yapıştırın.

(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);

Kod Hakkında

CSS

İlk olarak butonları gizleyip buton animasyonunun geçiş süresini ayarlıyoruz.

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

Ardından, "show-button" sınıfı JQuery aracılığıyla değiştirildiğinde düğmeyi gösteririz ve düğmenin sayfadaki orijinal yerleşimine geri dönmesi için dönüşümü yok olarak ayarlarız.

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

JQuery

İlk olarak kullanacağımız değişkenleri tanımlıyoruz.

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

Ardından, oynatma sırasında videonun geçerli zamanını dinamik olarak belirleyebilmemiz için videoya timeupdate olayını bir işlevle ekliyoruz . Daha fazla bilgi için, buradaki timeupdate olayı hakkında bilgi edinin.

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

    });

İşlevin içinde, videonun currentTime özniteliği 5 saniyeye eşit veya daha büyük olduğunda düğme 1'i (üst düğme) göstermek için bir if ifadesi kullanırız.

    //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");
      }

    });

NOT: if ifadesinin koşulu e.target.currentTime >= 5'tir ancak bunu, videoyu oynatırken düğmeyi farklı bir zamanda gösterecek şekilde değiştirebilirsiniz. Örneğin, videonun currentTime'ı 20 saniyeye ulaştığında düğmeyi göstermek istiyorsanız, koşulu e.target.currentTime >= 20 ile değiştirebilirsiniz.

Ardından, video duraklatıldığında veya sona erdiğinde (duraklatılan ve sonlandırılan HTMLMediaElement özelliklerini kullanarak) düğme 2'yi (alt düğme) göstermek için başka bir if ifadesi kullanırız.

    //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");
      }
    });

Son sonuç

Videonun geçerli süresi 5 saniyeye ulaştığında üst düğmenin nasıl göründüğüne ve video bittiğinde alt düğmenin nasıl göründüğüne dikkat edin.

Burada, videonun geçerli süresi 5 saniyeye ulaştığında aynı üst düğme görünür ve video duraklatıldığında alt düğme görünür.

Bu işlevin canlı bir demosu için bu kod kalemine de göz atabilirsiniz.

Son düşünceler

Bir videonun o anki saatine göre bir düğme göstermek, ürün ve hizmetlerinizi pazarlamak için kullanışlı olabilir. Başarılı bir tanıtım videosu, yine de ikna edici bir harekete geçirici mesajı hak eder. Umarım, bu eğitim size bu güçlü CTA'ları istediğiniz zaman ve yerde sunmak için HTML videolarının işlevselliğinden nasıl yararlanacağınızı daha iyi anlamanızı sağlayacaktır.

Divi'de HTML videoları kullanmanın diğer yaratıcı yollarıyla ilgileniyorsanız, beğenebileceğiniz birkaç makale burada:

• Divi'de Özel HTML Video Kontrolleri Nasıl Oluşturulur
• Divi'de Benzersiz Ürün Animasyonlarını Görüntülemek için HTML5 Videolarına 3D Efektler Ekleme
• Divi'de Göster/Gizle Geçişiyle Yapışkan Tanıtım Videosu Nasıl Oluşturulur

Yorumlarda sizden haber bekliyorum.

Şerefe!