Divi'de Göster/Gizle Geçişiyle Yapışkan Tanıtım Videosu Nasıl Oluşturulur

Tanıtım videosu, bilgi almak için sayfanızı keşfetmek yerine sadece bir video izlemeyi tercih eden tüm ziyaretçilere ürünlerinizi ve hizmetlerinizi tanıtmak için harika bir pazarlama aracıdır. Ayrıca, videonuzun dönüşümleri artırmaya yardımcı olacağından eminseniz, videoyu mümkün olduğunca kullanıcılara sunmak iyi bir fikirdir. Bunu akılda tutarak, yapışkan bir tanıtım videosu (sayfanın en üstünde sabit kalan bir video) web siteniz için değerli bir varlık olabilir.

Bu eğitimde, Divi'de göster/gizle geçişi ile nasıl yapışkan bir tanıtım videosu oluşturacağınızı göstereceğiz. Buradaki fikir, videonun tam boyutlu sürümünü başlangıçta ekranın üst kısmında göstermektir. Ardından, kullanıcı sayfayı aşağı kaydırırken, kullanıcı sayfadaki içeriğin geri kalanını keşfederken, kolay erişim ve/veya görüntüleme için video sayfanın en üstüne yapışır. Tabii ki, bu bazı ziyaretçiler için biraz müdahaleci olabilir. Bu nedenle, kullanıcılara videoyu istedikleri zaman gösterme veya gizleme olanağı sağlamak için bir geçiş düğmesinin nasıl ekleneceğini de göstereceğiz.

Başlayalım!

Gizlice Bakış

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

Bu, geçişsiz yapışkan video.

İşte geçiş butonlu aynı yapışkan video.

İşte geçiş işlevine daha yakından bir bakış.

Ve işte mobilde nasıl göründüğü.

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. “Hazır Düzen Seçin” seçeneğini seçin.
   
4. Dijital Pazarlama Hizmetleri Sayfa Düzenini yükleyin.
   

Satış Sayfanız için Göster/Gizle Geçişli Yapışkan Tanıtım Videosu Nasıl Oluşturulur

Yapışkan Video için Satır Ekleme

Başlamak için, mizanpajın ilk/üst bölümünün satırındaki ikinci metin modülünü sileceğiz.

Üst bölümün mevcut satırının altına yeni bir tek sütunlu satır ekleyin.

Yeni satır için satır ayarlarını açın ve Gelişmiş sekmesi altında Z Dizini'ni aşağıdaki gibi güncelleyin:

• Z İndeksi: 14

Bu, sayfa kaydırma sırasında takıldığında satıra eklediğimiz videonun sayfadaki diğer içeriklerin üzerinde kalmasını sağlayacaktır.

Videonun Eklenmesi

Satırın sütununun içine yeni bir video modülü ekleyin.

Video ayarlarını açın ve seçtiğiniz video için mp4 ve webm formatlarını yükleyin.

İsterseniz videoya bir bindirme görüntüsü ekleyin.

Tasarım sekmesi altında aşağıdaki boyutlandırma seçeneklerini güncelleyin:

• Maksimum Genişlik: 900 piksel
• Modül Hizalaması: merkez

• Yuvarlatılmış Köşeler: 8px
• Kutu Gölgesi: ekran görüntüsüne bakın

Sütunu Yapışkan Yapmak

Videoyu içeren sütunun ayarlarını açın ve Gelişmiş sekmesinin altına aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: et-yapışkan-video

Ardından çubuk konumunu aşağıdaki gibi güncelleyin:

• Yapışkan Konum: En Üstte Yapış
• Geçiş Varsayılanı ve Yapışkan Stiller: HAYIR

Yapışkan konum geçerli olduğuna göre, Yapışkan Durum için Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

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

Yapışkan Durumda Video Oynatma Simgesi Boyutunu Güncelle

Ardından, video ayarlarını tekrar açın ve yapışkan durumda oynat simgesi yazı tipi boyutunu aşağıdaki gibi güncelleyin:

• Özel Simge Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutunu Oynat (yapışkan): 50 piksel

Şimdiye kadar sonuç

Yapışkan Video Geçiş Düğmesini Oluşturma

Yapışkan video geçiş düğmesini oluşturmak için video modülünün altında yeni bir düğme modülü oluşturun.

Ardından, video modülünün üzerindeki düğmeyi hareket ettirin.

Düğme ayarlarını açın ve düğme metnini aşağıdaki gibi güncelleyin:

• Düğme Metni: Gizle

(NOT: Daha sonra kodumuzu eklediğimizde butona tıklandığında bu metin “Göster” kelimesi ile değiştirilecektir.)

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Düğme için özel stiller kullanın: EVET
• Düğme Metin Stilleri: 14px
• Düğme Metin Rengi: #fa50a9
• Düğme Yazı Ağırlığı: Yarı Kalın
• Düğme Yazı Tipi Stili: TT
• Düğme Simgesi: sağ ok
• Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: HAYIR

(NOT: Daha sezgisel, daha iyi bir kullanıcı deneyimi için kod düzenini eklediğimizde, seçtiğiniz düğme simgesi, düğmeye tıklandığında 180 derece döndürülecektir.

Düğmenin aralığını da güncelleyin:

• Dolgu: 0,5em üst, 0,5em alt, 1em sol, 1,7em sağ

Gelişmiş sekmesi altında, düğmeye aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: et-yapışkan-video geçişi

Gelişmiş sekmesi altında konum seçeneğini güncelleyin:

• Pozisyon: Mutlak
• Konum: sol alt

Şimdi, yapışkan durumda dönüştürme çevirme seçeneğini aşağıdaki gibi güncelleyerek düğmeyi sütunun/videonun dışında sola hareket ettirin:

• Dönüştür X Eksenini Çevir (yapışkan): -%100

Düğme geçişinin tasarımını bitirmek için, yapışkan duruma ulaşana kadar düğmeyi gizlememiz gerekiyor. Bunu yapmak için, özel CSS'yi masaüstü ve yapışkan durum için ana öğeye aşağıdaki gibi güncelleyin:

Masaüstündeki Ana Öğe için…

display:none !important;

Yapışkanlıktaki Ana Eleman için…

display:block !important;

Geçiş İşlevi için Özel Kodu Ekleme

Geçişin ihtiyaç duyduğumuz şekilde çalışmasını sağlamak için video modülünün altına bir kod modülü eklememiz gerekecek.

Özel CSS

İçerik sekmesinde, stil etiketlerine sardığınızdan emin olarak aşağıdaki özel CSS'yi geçin.

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

Özel JQuery

Ardından, stil etiketleriyle birlikte CSS'nin altına, komut dosyası etiketlerine sarılmış aşağıdaki JQuery'yi ekleyin.

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

Bu kadar!

Son sonuç

Şimdi sonuçları kendiniz görmek için sayfanın canlı sürümünü görüntüleyin.

Bu, geçişsiz yapışkan video.

İşte geçiş butonlu aynı yapışkan video.

İşte geçiş işlevine daha yakından bir bakış.

Ve işte mobilde nasıl göründüğü.

Videoyu Tamamlamak için Yapışkan Sütuna Kolayca Ek Modüller Ekleyin

Yapışkan konum sütuna eklendiğinden (videoya değil), videoyu tamamlamak için ek modüller/içerik eklemekten çekinmeyin.

Örneğin, aynı yapışkan sütuna videonun altına bir düğme ekleyebilirsiniz.

Ardından, sütunun yapışkan durumunda videonun altında kalacaktır.

Bu Yapışkan Video Düzeni ile Kendi Özel Video Seçeneklerinizi Kolayca Ekleyin

Sütuna (videoya değil) yapışkan konumun uygulanması, sütunun içine özel video yerleştirmeleri veya HTML (bir metin veya kod modülü kullanarak) eklemek için de kullanışlıdır. Yapışkan video işlevi çalışmaya devam edecektir.

Örneğin, aynı sütundaki bir kod modülüne bir HTML5 videosu ekleyebilirsiniz.

Kolon Yapılarını da Kolayca Değiştirin!

Ayrıca, videonuzu bitişik içerikle görüntülemek istediğiniz herhangi bir sütun yapısına satırı kolayca değiştirebilirsiniz. Örneğin, yapışkan video başlangıçta sağ veya sol sütunda olacak şekilde iki sütunlu bir düzen oluşturabilirsiniz. Video içeriğini içeren sütunun, bu öğreticide açıklandığı gibi aynı CSS Sınıfına ve yapışkan stile sahip olduğundan emin olun. Yapışkan işlevsellik aynı şekilde çalışacaktır.

Örneğin, mevcut tasarımımızı kullanarak, katmanlar görünümünü kullanarak yeni bir sütun ekleyebilir ve bu yeni sütunu ana başlık metni ile doldurabiliriz.

Bitişik sütun/içerik belgenin normal akışında kalırken yapışkan sütun sorunsuz bir şekilde çalışmaya devam eder.

Divi Yer Paylaşımlı Görüntü Seçeneğini Kullanarak YouTube videoları/yerleştirmeleri ile ilgili sorun

Bu tasarımdaki gibi Video Modülü ile bir videoyu gömmek için bir YouTube URL'si kullanıyorsanız, Divi'nin yerleşik bindirme görüntüsü (oynatma simgesiyle) seçeneğini kullanmamak en iyisidir. Bu, video sesinin yapışkan durumda baştan otomatik olarak oynatılmasına ve farklı aralıklarla yinelenen sesin oynatılmasına neden olur. Dolayısıyla Divi'nin bindirme görüntüsünü kullanmak ve Divi Video Modülü ile oynatma simgesini kullanmak istiyorsanız, bunun yerine mp4 ve WebM video dosyalarını/URL'lerini eklemelisiniz.

Son düşünceler

Sayfanız için göster/gizle geçişli yapışkan bir tanıtım videosu oluşturmak, ürün ve hizmetlerinizi tanıtmanın yeni yollarını açar. Sadece bu yüksek dönüşümlü videoları ön planda tutmakla kalmaz, aynı zamanda Divi'de aynı sütuna ekleyerek videonun üstüne veya altına ücretsiz bilgileri veya CTA'ları kolayca ekleyebilirsiniz.

Aslında, bir video eklemeniz bile gerekmez, kaydırmada sayfanın en üstüne yapıştırmak istediğiniz herhangi bir bilgiyle yapışkan sütunu doldurmanız yeterlidir!

Yorumlarda sizden haber bekliyorum.

Şerefe!