Divi ile ET'nin Tıklama Videosu Nasıl Yeniden Oluşturulur

Web sitenizde video önizlemelerini paylaşmak, etkileşimi artırabilir ve ziyaretçilerin ürünlerinizi ve/veya hizmetlerinizi daha iyi ve daha hızlı anlamasına yardımcı olabilir. Şimdi, Elegant Themes web sitesinde, kendimiz için bu yaklaşımı benimsedik ve insanların en popüler özelliklerimizden bazılarında gezinmesine olanak tanıyan, doğrudan tıklamalı bir video izleme tasarımı oluşturduk. Bu tasarımı Divi'de yeniden yarattık ve bugün size onu nasıl sıfırdan yeniden oluşturacağınızı göstereceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Tıklama Videosu İlerleme Düzenini ÜCRETSİZ olarak indirin

Ellerinizi ücretsiz tıklamalı video izleme düzenine koymak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Youtube Kanalımıza Abone Olun

Yeniden Yaratmaya Başlayalım!

Yeni Normal Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir normal bölüm ekleyerek başlayın.

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Henüz herhangi bir modül eklemeden satır ayarlarını açın ve aşağıdaki boyutlandırma ayarlarını uygulayın:

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2
• Genişlik: 85vw (Masaüstü), %90 (Tablet ve Telefon)
• Maksimum Genişlik: %100

Sütun 1 Ayarları

Sonraki sütun 1 ayarlarını açın.

aralık

Boşluk ayarlarına gidin ve masaüstüne biraz üst dolgu ekleyin.

• Üst Dolgu: 5vw (Masaüstü), 0vw (Tablet ve Telefon)

CSS Sınıfı

Gelişmiş sekmeye geçin ve bir CSS sınıfı ekleyin. Yazının ilerleyen bölümlerinde, tablet ve mobil cihazlarda ızgara efekti oluşturmak için bu CSS sınıfını kullanacağız.

• CSS Sınıfı: öğeye duyarlı ızgara

Sütun 1'e Blurb Modülü Ekle

Başlık ekle

Modülleri eklemeye başlayalım! Tıklanabilir her öğe için bir Blurb Module kullanacağız. İlkiyle başlayacağız ve kalan tıklama öğeleri için yeniden kullanacağız. 1. sütuna yeni bir Blurb Modülü ekleyin ve istediğiniz bir başlığı girin.

Simge Seç

Sonraki bir simge seçin.

Varsayılan Simge Ayarları

Tasarıma geçin ve simge ayarlarını buna göre değiştirin:

• Simge Rengi: #e8e9ea
• Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 2vw (Masaüstü), 4.5vw (Tablet), 7vw (Telefon)

Fareyle Üzerine Gelme Simgesi Ayarları

Fareyle üzerine gelindiğinde simge rengini değiştirin.

• Simge Rengi: #b0c8ff

Başlık Metni Ayarları

Başlık metni ayarlarına gidin ve orada da bazı değişiklikler yapın.

• Başlık Yazı Tipi: Lato
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Stili: Büyük Harf
• Başlık Metin Boyutu: 0.8vw (Masaüstü), 1.7vw (Tablet), 2.5vw (Telefon)
• Başlık Satırı Yüksekliği: 2vw (Masaüstü), 4.5vw (Tablet), 7vw (Telefon)

Varsayılan Aralık

Farklı ekran boyutlarında bazı özel dolgu değerleri kullanarak Blurb Modülünü şekillendireceğiz.

• Üst Dolgu: 1vw (Masaüstü), 2vw (Tablet), 3vw (Telefon)
• Alt Dolgu: 0,5vw (Masaüstü), 1,5vw (Tablet ve Telefon)
• Sol Dolgu: 1.2vw (Masaüstü ve Tablet), 5vw (Telefon)
• Sağ Doldurma: 1.2vw (Masaüstü ve Tablet), 5vw (Telefon)

Vurgu Aralığı

Vurgulu kenar boşluğu değerlerini değiştirerek vurgu vurgulama efekti oluşturun.

• Sol Kenar Boşluğu: -0.5vw
• Sağ Kenar Boşluğu: -0.5vw

Sınır

Bazı yuvarlak köşeler de ekleyin.

Varsayılan Kutu Gölgesi

İnce bir kutu gölgesi ile birlikte.

• Kutu Gölge Dikey Konumu: 10px
• Kutu Gölge Bulanıklığı Gücü: 70px
• Gölge Rengi: rgba(0,0,0,0.11)

Vurgulu Kutu Gölgesi

Fareyle üzerine gelindiğinde kutu gölge rengini değiştirin.

• Gölge Rengi: rgba(103,151,255,0.22)

CSS Kimliği ve Sınıfı

Son olarak, Blurb Module'ün gelişmiş sekmesine gidin ve bir CSS kimliği ve sınıfı ekleyin.

• CSS Kimliği: video adım adım-öğe-1
• CSS Sınıfı: video-öğe-imleç

Blurb Modülünü Üç Kez Klonla

İlk Bulanıklık Modülünü tamamladığınızda, onu üç kez klonlayabilirsiniz.

İçeriği Değiştir

Her yinelenen Blurb Modülünün içeriğini değiştirin.

Tüm Yinelenen Bulanıklık Modülü CSS Kimliklerini Değiştir

CSS kimlikleri ile birlikte.

• 1) Görsel Olarak Oluşturun: video izlenecek yol öğesi-1
• 2) Efektler: video adım adım-öğe-2
• 3) Şekil Bölücüler: video adım adım-öğe-3
• 4) Toplu Düzenleme: video adım adım-öğe-4

Sütun 1'i Yeniden Kullan

Sütun 3'ü Kaldır

İlk sütunu tamamladıktan sonra, satır ayarlarını açabilir ve üçüncü sütunu kaldırabilirsiniz.

Sütun 1'i Klonla ve Altta Yerleştir

İlk sütunu (Bulanıklık Modüllerini içeren) klonlayın ve kopya sütunu en alta yerleştirin.

Geri Sütun Yapısını Değiştir

Sütun yapısını bu öğreticinin başında seçilen yapıyla değiştirin.

Tüm Sütun 3 Blurb Modül İçeriğini Değiştir

Sütun 3'teki her bir kopyanın Bulanıklık Modülü başlığını değiştirin.

Tüm Sütun 3 Bulanıklık Modülü CSS Kimliklerini Değiştir

CSS kimlikleri ile birlikte.

• 5) Düzen Kitaplığı: video adım adım-öğe-5
• 6) Dönüşümler: video adım adım-öğe-6
• 7) Vurgulu Durumlar: video adım adım-öğe-7
• 8) Bul ve Değiştir: video izlenecek yol öğesi-8

Sütun 2'ye Metin Modülü Ekle

İçerik Kutusunu Boş Bırak

Farklı video önizlemelerini eklemeye başlama zamanı! Yaklaşmanın iki yolu vardır; Video Modülü veya Metin Modülü kullanarak. Video Modülü, ziyaretçilerin oynat tuşuna basmasını gerektirir. Video arka planı olan bir Metin Modülü kullanmak ise videoyu otomatik olarak ancak sessiz olarak oynatır. Bu eğitim için bir Metin Modülü kullanacağız, ancak bunun yerine bir Video Modülü kullanmaktan çekinmeyin. Metin Modülü içerik kutusunun boş kaldığından emin olun.

Video Arka Planı

Arka plan ayarlarına gidin ve istediğiniz bir videoyu yükleyin.

• Görüntüde Değilken Videoyu Duraklat: Evet

boyutlandırma

Tasarım sekmesine gidin ve genişliğe '%100' ekleyin.

• Genişlik: %100

aralık

Ardından, farklı ekran boyutlarına bazı özel üst ve alt dolgu değerleri ekleyerek video arka planının görünmesini sağlayacağız. Not: Eklediğiniz değerlerin videonuzun boyut kümesine ayarlanması gerekir.

• Üst Dolgu: 15vw (Masaüstü), 24vw (Tablet), 26vw (Telefon)
• Alt Dolgu: 15vw (Masaüstü), 24vw (Tablet), 26vw (Telefon)

Sınır

Köşelerin her birine '10px' ekleyerek devam edin.

Kutu Gölge

İnce bir kutu gölgesi ile birlikte.

• Kutu Gölge Bulanıklığı Gücü: 30 piksel
• Kutu Gölge Yayılma Gücü: -5px
• Gölge Rengi: rgba(0,0,0,0.11)

CSS kimliği

Son olarak, bir CSS kimliği ekleyin.

• CSS Kimliği: video adım adım-1

Metin Modülünü 7 Kez Klonla

Metin Modülünü bitirdikten sonra yedi kez kopyalayabilirsiniz (her Blurb Modülü için bir tane).

Tüm Yinelenen Metin Modülü Video Arka Planlarını Değiştir

Yinelenenlerin her biri için farklı bir video arka planı yükleyin.

Tüm Yinelenen Metin Modülü CSS Kimliklerini Değiştirin ve Tüm Yinelenen Metin Modüllerine CSS Sınıfı Ekleyin

CSS kimliklerini de değiştirin. CSS kimliğinin sonundaki aynı numarayı kullanarak her Metin Modülünü doğru Blurb Modülüne bağladığınızdan emin olun. Ayrıca orijinal Metin Modülünün yanı sıra her Metin Modülünü bir CSS sınıfı kullanarak gizliyoruz.

• Metin Modülü 1: video izlenecek yol-1
• Metin Modülü 2: video izlenecek yol-2
• Metin Modülü 3: video izlenecek yol-3
• Metin Modülü 4: video izlenecek yol-4
• Metin Modülü 5: video izlenecek yol-5
• Metin Modülü 6: video izlenecek yol-6
• Metin Modülü 7: video izlenecek yol-7
• Metin Modülü 8: video izlenecek yol-8
• CSS Sınıfı: video ilk değil

Kod Modülü #1'i Sütun 1'e ekleyin

İkinci satırı tamamladığınızda, kodu eklemeye başlamanın zamanı geldi. Tıklama işlevinin çalışması için biraz CSS ve JQuery kodu kullanacağız. Kodu iki ayrı Kod Modülüne yerleştireceğiz. İlk Kod Modülünü sütun 1'e ekleyerek başlayın.

Sayfa CSS Kodu Ekle

Aşağıdaki CSS kod satırlarını ekleyin:

<style>
.video-not-first {
display: none;
}
.video-item-cursor {
cursor: pointer;
}

@media all and (max-width: 980px) {
.item-responsive-grid {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 2vw;
}
}
.video-walkthrough-active {
background-color:#fff;
margin-right:-0.5vw;
margin-left:-0.5vw;
box-shadow:0 10px 70px 0 rgba(103,151,255,.22),0 15px 105px 0 rgba(103,151,255,.22) !important;
}

.video-walkthrough-active .et-pb-icon{
color: #b0c8ff !important;
}
</style>

Kod Modülü #2'yi Sütun 3'e ekleyin

Üçüncü sütuna başka bir Kod Modülü ekleyerek devam edin.

Tıklama İşlevi JQuery Kodu Ekle

Aşağıdaki JQuery kod satırlarını girin:

<script>
jQuery(function($){

$('[id*="video-walkthrough-item"]').click(function() {
	var selector1 = $(this).attr('id').replace('-item', '');
  var $video   = $('#' + selector1);
  
  $video.show().siblings().hide();
  $video.addClass('play-video');
  $(".play-video .et_pb_section_video_bg video").trigger('play');
  $video.removeClass('play-video');

  $('[id*="video-walkthrough-item"]').removeClass("video-walkthrough-active");
  $(this).addClass('video-walkthrough-active');

});
});
</script>

Bu adımı tamamladıktan sonra sayfanızı kaydedebilir ve Visual Builder'dan çıkabilirsiniz!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi ile Elegant Themes tıklama videosunun nasıl yeniden oluşturulacağını gösterdik. Size JSON indirmesini de ücretsiz olarak sağladık! Oluşturduğunuz her türlü web sitesi için bu tasarımı kullanmaktan çekinmeyin. Videoları sergilemek ve ziyaretçilerinizin dikkatini çekmek için harika bir yoldur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.