Divi’deki Lightbox’ta videolar nasıl açılır (iki seçenek)
Divi, Visual tarafından güzel bir sayfa oluşturmanıza izin vermek için varsayılan bir sayfa üreticisi olan Divi Builder ile donatılmış en popüler premium WordPress temalarından biridir. Tıpkı diğer sayfa yapımcıları gibi, Divi Builder da video eklemek için öğeler (modüller olarak adlandırılır) ile donatılmıştır. Ne yazık ki, Divi Builder’ın video modülü, LightBox’ta videoları açmak için varsayılan seçenekler sunmuyor. Divi’deki Lightbox’ta bir video açmak istiyorsanız, bu makale size nasıl olduğunu gösterecektir. Divi’deki Lightbox’ta video açmak için iki seçenek vardır. İlk olarak, Divi eklentisini yükleyebilirsiniz. İkincisi, özel JavaScript ve CSS kodu ekleyebilirsiniz. Burada her şeyi tartışacağız.
Divi’deki Lightbox’ta bir eklenti olmadan bir video açmadan önce, Divi Builder’ın iki versiyonda mevcut olduğunu tekrar hatırlatmak istiyoruz: Mandiri eklentisi ve Divi temasının ayrılmaz kısmı. Bu yöntem yalnızca Divi temasında Divi Builder kullanıyorsanız çalışır. İlk olarak, Divi -> WordPress kontrol panelinizdeki tema seçeneğini açın. Entegrasyon sekmesini açın ve aşağıdaki kodu başın başına yapıştırın. Kodu eklemeden önce, seçeneğin etkinleştirilen gölgelik kodunu etkinleştirdiğinden emin olun.
(işlev ($) {
$ (belge). Rapor edilen (function () {
$ (‘a.video_popup, .video_popup a’). magnificpopup ({
Tür: ‘Iframe’,
Ana sınıf: ‘MFP-Fade’,
Kentsel Gelişim: 160,
Hazırlık: Yanlış,
SADECE ContentPos: Yanlış
});
});
}) (jQuery);
Hala Tema Seçenekleri sayfasında, Genel sekmesini açın ve aşağıdaki kodu özel CSS sütununa yapıştırın. Değişiklikleri uygulamak için Değiştir düğmesini tıklayın. Kod: * Özel Video Popup */
/ * Pop -up kapat ikiak simgesini kapat */
.mfp-wrap.mfp-cose-btn-in.mfp-auto-cursor.mfp-fade.mfp-ready {üstü: 0px! Önemli;
Pozisyon: Kalın! Önemli;
}
.Mfp -frame-holder .mfp-content {
Maksimum genişlik:%70;
}
.mfp-iPrame-Scaler düğmesi.mfp-close {
Yukarıda: -50px;
}
.Mfp-frame-holder .mfp-close,
.mfp-image-holder .mfp-Klose,
.Mfp-wrap .mfp-close: aktif {
Yukarıda: -50px! Önemli;
}
.Video_popup_lightbox .mfp-frame holder .mfp-close {
Yukarıda: -50px;
}
.video_popup {
Pozisyon: göreceli;
-Webkit-Transition: Tüm 0,3’lerin çıkışında kolay;
-Moz-Transition: 0,3 saniyenin hepsine girmek kolaydır;
Geçiş: Tüm 0.3s kolay çıkış;
-Webkit-Transform: Ölçek (1);
-MS-Transform: Ölçek (1);
Değişim: ölçek (1);
}
.Video_popup A: Önce {
İçerik: ‘Oynat’;
İmleç: işaretçi;
Pozisyon: Mutlak;
Yukarıda: Calc (% 50 – 55px);
Sol: Calc (% 50 – 54.5px);
İndex-z: 20;
Arka plan rengi: #fff;
Rulman: 55px 27px;
Sınırlar:%50;
Yazı tipi boyutu: 20px;
Mektup alanı: 2px;
Metin dönüşümü: büyük harf;
Renk: #0A2A3B;
-Webkit-Transition: 0,2 saniye girme kolaylığı;
-Moz-Transition: 0,2 saniye girme kolaylığı;
Geçiş: 0,2 saniye girme kolaylığı;
}
.Video_popup A: sonra {
İçindekiler: ‘E’;
İmleç: işaretçi;
yazı tipi ailesi: ‘etmodüller’;
Pozisyon: Mutlak;
Yukarıda: Calc (% 50 – 55px);
Sol: Calc (% 50 – 47px);
İndex-z: 20;
Arka plan rengi: #fff;
Rulman: 55px 27px;
Sınırlar:%50;
Yazı tipi boyutu: 40px;
Metin dönüşümü: büyük harf;
Renk: #0A2A3B;
Opaklık: 0;
-Webkit-Transition: Tüm 0,3’lerin çıkışında kolay;
-Moz-Transition: 0,3 saniyenin hepsine girmek kolaydır;
Geçiş: Tüm 0.3s kolay çıkış;
}
.video_popup.no_icon: Önceki,
.video_popup.no_icon: sonra {
Ekran: Hiçbir şey! Önemli;
}
.Video_popup: değil (.No_icon): imleci {-webkit-transform: ölçek (0.95);
-m-transform: ölçek (0.95);
Değişim: ölçek (0.95);
}
.Video_popup: İmleci şuraya yönlendirin: {
Opaklık: 0;
Rulman: 65px 37px;
Sol: Calc (% 50 – 64.5px);
Yukarıda: Calc (% 50 – 65px);
}
.Video_popup: A Point: Sonra {
Opaklık: 1;
Rulman: 65px 37px;
Sol: Calc (% 50 – 64.5px);
Yukarıda: Calc (% 50 – 65px);
Yazı tipi boyutu: 56.5px;
}
@Media All ve (maksimum genişlik: 980px) {
.Video_popup A: Önce {
Yukarıda: Calc (% 50 – 32.5px);
Sol: Calc (% 50 – 33px);
Rulman: 33px 17px;
Yazı tipi boyutu: 10px;
}
.Video_popup A: sonra {
Yukarıda: Calc (% 50 – 32.5px);
Sol: Calc (% 50 – 33px);
Rulman: 33px 17px;
Yazı tipi boyutu: 32px;
}
.Video_popup: İmleci şuraya yönlendirin: {
Opaklık: 0;
Rulman: 40px 22px;
Sol: Calc (% 50 – 43px);
Yukarıda: Calc (% 50 – 42.5px);
}
.Video_popup: A Point: Sonra {
Opaklık: 1;
Rulman: 40px 22px;
Sol: Calc (% 50 – 43px);
Yukarıda: Calc (% 50 – 42.5px);
Yazı tipi boyutu: 42px;
}
} Ardından, Divi Builder düzenleyicisini açın ve görüntü modülünü ekleyin. Görüntü Modülü Ayarları panelinde devam eden sekmeyi açın. CSS Block ve Class CSS’yi açın ve Video_Popup sınıfını CSS sınıf alanına ekleyin.
İçerik sekmesini açın ve resim bloğuna resim ekleyin (görüntü bir video küçük resim olarak işlev görür).
Görüntü eklendikten sonra bağlantı bloğunu açın ve görüntü bağlantıları alanına eklemek istediğiniz video URL’sini yapıştırın. Lightbox’taki açık seçeneği etkinleştirmeye gerek yok. Küçük bir not, Divi Builder düzenleyicisindeki görüntüyü tıkladığınızda LightBox açılmayabilir, ancak sayfa yayınlandıktan sonra açılır. Divi Supreme Divi Supreme’yi kullanırken LightBox’ta videolar açmak en popüler Divi eklentilerinden biridir. Bu, en yüksek düğme dahil olmak üzere Divi oluşturucunuza ek bir modül ekler. En yüksek düğme modülü, video bağlantıları eklemenize ve bunları LightBox’a açmanıza olanak tanır. Divi Supreme bir freemium eklentisidir. En yüksek düğme modülü ücretsiz sürümde mevcuttur, bu nedenle ekstra para harcamanıza gerek yoktur. İlk olarak, Divi Supreme eklentisini yükleyin. WordPress eklentisi dizininde Divi Supreme’nin ücretsiz bir sürümünü alabilirsiniz. Divi Supreme eklentisi yüklendikten sonra Divi Builder düzenleyicisini açın ve Yüce Düğme Modülünü ekleyin. Düğme metnini Ayarlar panelindeki İçerik sekmesinin altındaki metin bloğuna ekleyin. Ardından, bağlantıları açın ve URL düğmesi sütununa eklemek istediğiniz video URL’sini yapıştırın ve Video LightBox seçeneğini açın.
İşte burada. Düğme stilini ayarlamak için Ayarlar panelindeki Tasarım sekmesini açabilirsiniz. Bu öğreticide kullandığımız kod için kredi Divi Pixel’e verilmiştir.
