Divi'de Lightbox'ta Video Nasıl Açılır (İki Seçenek)

Divi, görsel bir şekilde güzel bir sayfa oluşturmanıza olanak tanıyan yerleşik bir sayfa oluşturucu — Divi Builder — ile birlikte gelen en popüler premium WordPress temalarından biridir. Diğer sayfa oluşturucular gibi Divi Builder da video eklemek için bir öğe (modül adı verilen) ile birlikte gelir. Ne yazık ki Divi Builder'ın Video modülü, videoyu bir ışık kutusunda açmak için varsayılan bir seçenek sunmuyor. Divi'de bir lightbox'ta bir video açmak istiyorsanız, bu makale size nasıl olduğunu gösterecektir.

Divi'de bir lightbox'ta video açmak için iki seçenek vardır. İlk olarak, bir Divi eklentisi yükleyebilirsiniz. İkinci olarak, özel JavaScript ve CSS kodu ekleyebilirsiniz. Hepsini burada ele alacağız.

Eklentisiz Divi'de Lightbox'ta Video Açma

Başlamadan önce, Divi Builder'ın iki versiyonda mevcut olduğunu bir kez daha hatırlatmak istiyoruz: bağımsız bir eklenti ve Divi temasının ayrılmaz bir parçası. Bu yöntem yalnızca Divi temasında Divi Builder kullanıyorsanız çalışır.

İlk olarak, WordPress kontrol panelinizde Divi -> Tema Seçenekleri'ne gidin. Entegrasyon sekmesini açın ve aşağıdaki kodu head alanına yapıştırın. Kodu yapıştırmadan önce Başlık kodunu etkinleştir seçeneğinin etkinleştirildiğinden emin olun.

kod:

 <script type="metin/javascript">
(işlev($) {
	$(belge).hazır(işlev() {
		$('a.video_popup, .video_popup a').magnificPopup({
			tür: 'iframe',
			mainClass: 'mfp-fade',
			kaldırmaGecikme: 160,
			ön yükleyici: yanlış,
			fixContentPos: yanlış
		});
	});
})(jQuery);
</script>

Yine tema seçenekleri sayfasında Genel sekmesini açın ve aşağıdaki kodu Özel CSS alanına yapıştırın. Değişiklikleri uygulamak için Değişiklikleri Kaydet düğmesini tıklayın.

kod:

 * Özel Video Açılır Penceresi */
/* Açılır Pencereyi Kapat Simge Ayarı */
.mfp-wrap.mfp-close-btn-in.mfp-auto-cursor.mfp-fade.mfp-ready {
	üst: 0 piksel !önemli;
	pozisyon: sabit !önemli;
}
.mfp-iframe-tutucu .mfp-içeriği {
    maksimum genişlik: %70;
}
.mfp-iframe-scaler button.mfp-close {
    üst: -50 piksel ;
}
.mfp-iframe-tutucu .mfp-kapat,
.mfp-image-tutucu .mfp-kapat,
.mfp-wrap .mfp-close:etkin {
    üst: -50 piksel !önemli;
}
.video_popup_lightbox .mfp-iframe-tutucu .mfp-close {
    üst: -50 piksel;
}
.video_popup {
    pozisyon: göreceli;
    -webkit-geçişi: tüm 0.3'ler giriş-çıkış kolaylığı;
    -moz geçişi: tüm 0.3 saniyelik kolay giriş;
    geçiş: tüm 0,3 saniyelik kolay giriş-çıkış;
    -webkit-dönüşüm: ölçek(1);
    -ms-dönüşüm: ölçek(1);
    dönüştürme: ölçek(1);
}
.video_popup a:önce {
    içerik: 'oynat';
    imleç: işaretçi;
    konum: mutlak;
    üst: hesap (%50 - 55 piksel);
    sol: hesap (%50 - 54.5 piksel);
    z-endeksi: 20;
    arka plan rengi: #fff;
    dolgu: 55 piksel 27 piksel;
    sınır yarıçapı: %50;
    yazı tipi boyutu: 20 piksel;
    harf aralığı: 2 piksel;
    metin dönüştürme: büyük harf;
    renk: #0a2a3b;
    -webkit-geçişi: tüm 0.2'ler giriş-çıkış kolaylığı;
    -moz geçişi: tüm 0,2'lik giriş çıkış kolaylığı;
    geçiş: tüm 0.2'ler giriş-çıkış kolaylığı;
}
.video_popup a:sonra {
    içerik: 'E';
    imleç: işaretçi;
    yazı tipi ailesi: 'ETmodules';
    konum: mutlak;
    üst: hesap (%50 - 55 piksel);
    sol: hesap (%50 - 47 piksel);
    z-endeksi: 20;
    arka plan rengi: #fff;
    dolgu: 55 piksel 27 piksel;
    sınır yarıçapı: %50;
    yazı tipi boyutu: 40 piksel;
    metin dönüştürme: büyük harf;
    renk: #0a2a3b;
    opaklık: 0;
    -webkit-geçişi: tüm 0.3'ler giriş-çıkış kolaylığı;
    -moz geçişi: tüm 0.3 saniyelik kolay giriş;
    geçiş: tüm 0,3 saniyelik kolay giriş-çıkış;
}
.video_popup.no_icon:önce,
.video_popup.no_icon:sonra {
    ekran: yok!önemli;
}
.video_popup:not(.no_icon):hover {
    -webkit-dönüşüm: ölçek(0.95);
    -ms-dönüşüm: ölçek(0.95);
    dönüştürme: ölçek(0.95);
}
.video_popup:hover a:önce {
    opaklık: 0;
    dolgu: 65px 37px;
    sol: hesap (%50 - 64.5 piksel);
    üst: hesap (%50 - 65 piksel);
}
.video_popup:hover a:sonra {
    opaklık: 1;
    dolgu: 65px 37px;
    sol: hesap (%50 - 64.5 piksel);
    üst: hesap (%50 - 65 piksel);
    yazı tipi boyutu: 56.5 piksel;
}
@media all ve (maksimum genişlik: 980 piksel) {
    .video_popup a:önce {
        üst: hesap (%50 - 32,5 piksel);
        sol: hesap (%50 - 33 piksel);
        dolgu: 33 piksel 17 piksel;
        yazı tipi boyutu: 10 piksel;
    }
    .video_popup a:sonra {
        üst: hesap (%50 - 32,5 piksel);
        sol: hesap (%50 - 33 piksel);
        dolgu: 33 piksel 17 piksel;
        yazı tipi boyutu: 32 piksel;
    }
    .video_popup:hover a:önce {
        opaklık: 0;
        dolgu: 40 piksel 22 piksel;
        sol: hesap (%50 - 43 piksel);
        üst: hesap (%50 - 42,5 piksel);
    }
    .video_popup:hover a:sonra {
        opaklık: 1;
        dolgu: 40 piksel 22 piksel;
        sol: hesap (%50 - 43 piksel);
        üst: hesap (%50 - 42,5 piksel);
        yazı tipi boyutu: 42 piksel;
    }
}

Ardından Divi Builder düzenleyicisini açın ve Görüntü modülünü ekleyin. Görüntü modülünün ayarlar panelindeki Gelişmiş sekmesine gidin. CSS ID & Classes bloğunu açın ve video_popup sınıfını CSS Class alanına ekleyin.

İçerik sekmesine gidin ve Görüntü bloğuna bir görüntü ekleyin (görüntü, video küçük resmi olarak rol oynayacaktır).

Resim eklendikten sonra Bağlantı bloğunu açın ve eklemek istediğiniz videonun URL'sini Resim Bağlantısı URL'si alanına yapıştırın. Lightbox'ta Aç seçeneğini etkinleştirmeye gerek yoktur.

Küçük bir not, Divi Builder düzenleyicisindeki resme tıkladığınızda ışık kutusu açılmayabilir, ancak sayfa yayına girdiğinde açılır.

Divi Supreme Kullanırken Lightbox'ta Video Açma

Divi Supreme, en popüler Divi eklentilerinden biridir. Divi Builder'ınıza Supreme Düğme de dahil olmak üzere ekstra modüller ekler. Supreme Button modülü, bir video bağlantısı eklemenize ve bunu bir Lightbox'ta açmanıza olanak tanır. Divi Supreme'in kendisi bir freemium eklentisidir. Supreme Button modülü ücretsiz sürümde mevcuttur, bu nedenle ekstra para harcamanıza gerek yoktur.

İlk olarak Divi Supreme eklentisini kurun. Divi Supreme'in ücretsiz sürümünü WordPress'in eklenti dizininden edinebilirsiniz. Divi Supreme eklentisi yüklendikten sonra Divi Builder düzenleyicisini açın ve Supreme Button modülünü ekleyin.

Düğme metnini ayarlar panelindeki İçerik sekmesinin altındaki Metin bloğuna ekleyin.

Ardından, Bağlantılar bloğunu açın ve eklemek istediğiniz videonun URL'sini Düğme URL alanına yapıştırın ve Video Işık Kutusu Olarak Aç seçeneğini etkinleştirin.

Bu kadar. Düğmeye stil vermek için ayarlar panelindeki Tasarım sekmesine gidebilirsiniz.

Bu eğitimde kullandığımız kodların kredisi Divi Pixel'e gider.