Divi ve Divi Builder 'ı kullanarak güzel WordPress web siteleri oluşturun.

Divi'de Video Oynatırken Harekete Geçirici Mesaj Düğmeleri Nasıl Görüntülenir

Rifat Divi Eğitimleri Jun 8, 2021

Video güçlü bir araçtır ve potansiyel izleyicilere gerekli bilgileri sağlar. Bir ankete göre, pazarlamacıların %94'ü video pazarlamanın işlerinde başarının anahtarlarından biri olduğunu söylüyor. Video izlerken bir "Harekete Geçirici Mesaj" sistemi korunabilirse, hem ulaşma hem de satış şansı katlanabilir. Bugünün Divi eğitiminde, bir HTML videosunda belirli bir zamanda bir CTA düğmesinin nasıl ayarlanacağını göreceğiz. Gerçekten, videodaki CTA düğmesi, her içerik parçasını anlamlı hale getirmeyi amaçlayan harika bir pazarlama aracıdır.

Başlayalım.

Ön izleme

Bugünkü tasarımımızın nasıl görüneceğini görmek için birkaç saniye harcayalım.

Video Oynatırken Açılır Düğme Yapın

Hazır Açılış Sayfası Yükle

Bugünkü eğitimimize "Futbol Kulübü Açılış Sayfası" adlı önceden hazırlanmış bir açılış sayfası düzeni kullanarak başlayacağız. "Futbol Kulübü" düzen paketinden bir öğedir"

Divi'yi İndirin En İyi WordPress Temasını

Dünyadaki en popüler WordPress teması ve nihai WordPress sayfası oluşturucu

Divi'yi indirin

"Önceden hazırlanmış düzeni seçin" ile başlayın ve düzeni etkinleştirin.

Video Güncelleniyor

İstediğiniz videoyu ekleyin. Videoyu Mp4/Mkv/Webm formatında yükleyebilirsiniz.

Şimdi, Gelişmiş sekmesinden videoya bir CSS kimliği verin.

  • CSS kimliği: divi-video-container

Üst Düğme Ayarları

Üst düğme için ayarları açın ve dönüştürme bölümünde değeri değiştirin.

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

Ayrıca, bu düğmeye bir CSS sınıfı ekleyin.

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

Alt Düğme Ayarları

Alt düğme için dönüştürme ayarlarını değiştirme zamanı

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

Ayrıca, bu alt düğmeye bir CSS sınıfı ekleyin.

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

Şimdi, bu düğmelerin içe aktarılan şablondan animasyonu var. Animasyona ihtiyacımız yok. Bu yüzden animasyon stilini yok olarak ayarlayacağız.

  • Animasyon Stili: Yok

Tasarıma Kod Ekle

Kod Modülü Ekleme

Bugünkü eğitimimizin son bölümünde mizanpajımıza kodlama ekleyeceğiz. Bunun için alttaki butonun altına bir kod modülü ekleyin.

CSS Kodu Ekle

Aşağıdaki CSS kodunu kodlama modülüne ekleyin. Bunları Stil etiketinin içinde tuttuğunuzdan 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;
}

JQuery Kodu Ekle

Şimdi aşağıdaki JQuery kodunu CSS kodunun altına ekleyin. Script etiketlerinin içine koyduğunuzdan emin olun.

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

Ve tasarımımız bitti.

Son Görünüm

İşte son tasarımımız.

Sonuç

Divi, tasarım yoluyla, günümüzün tasarımı gibi yeni pazarlama stratejileri oluşturma konusunda da bazı yönlerden yardımcı olur. CTA (Açılır eylem düğmesi) herhangi bir hizmet için çok kullanışlıdır ve bunun gibi basit bir yöntemle kovaya daha fazla kâr ekleyeceğinizi umuyoruz. Bugünkü öğreticiyi beğendiyseniz, bir paylaşım olağanüstü olacak!