Ana İçeriğe Geç

Divi bir kaydırıcı tam ekran oluşturmak için nasıl

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Tam genişlikli kaydırıcı, video arka planlı kaydırıcı ekleme yeteneği de dahil olmak üzere bazı harika özelliklerle birlikte gelir. Ancak, onu daha da güçlü kılan özelliklerden biri, kaydırıcıyı tam ekran modunda görüntüleyecek şekilde genişletme yeteneğidir. Bu yüzden size bir kaydırıcıya tam ekran işlevselliğini nasıl ekleyeceğinizi göstereceğiz.

Sürgü modülüne tam ekran özelliğinin eklenmesi Divi birkaç satır CSS ve JavaScript ile uygulanması son derece kolaydır. Yalnızca 5 dakika içinde, tam genişlikli kaydırıcınızı tam ekran başlıkları gibi tüm ekranı dolduracak şekilde genişleyen tam ekran kaydırıcıya dönüştürebilirsiniz.

Divi'de tam ekran kaydırıcı işlevinin uygulanması

Eğer okumadıysanız Divi arayüzünün sunumu hakkında eğitim, Seni yapmaya davet ediyorum.

1. Adım: Tam genişlik modunda slayt içeren bir kaydırıcı ekleyin

"Kullanın Divi Oluşturucu »Bir bölüm ekle« tam genişlik »Ve tıklayın«  Modül ekle '.

Divi oluşturucuda modül nasıl eklenir

Bir tam genişlikli modül ekleyin.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Bir modül kaydırıcı Divi # eklemek

Tam Ekran Kaydırıcı Ayarlarında, "Özel CSS" sekmesinin altında "adlı bir CSS sınıfı ekleyin" et_fullscreen_slider '.

Divi kaydırıcısının gelişmiş css değişikliği

"Genel ayarlar" bölümünde yeni bir slayt ekleyin.

Divi'ye bir diaspozitif ekleyin

Slayt ayarlarında, Genel Ayarlar altında aşağıdaki öğeleri güncelleyin:

  • Bölüm: [konuyu girin]
  • Düğme Metin: [Düğme metni girin]
  • URL Düğme: [URL butonuna girin]
  • Arka plan resmi: [arka plan resmi eklemek] (Unsplash.com'dan bir resim kullanıyorum)

Divi slayt ayarları

Eklemek istediğiniz kadar slayt için bu adımı tekrarlayın.

Bir kez yaptıktan sonra "üzerine tıklayın. Kaydet çık '.

Özel CSS ve JavaScript nasıl eklenir?

WordPress panosundan "gidin Divi → Tema Seçenekleri Ve "Genel Ayarlar" altında, Özel CSS metin kutusuna aşağıdaki CSS'yi girin:

.et_fullscreen_slider .et_pb_slides, .et_fullscreen_slider .et_pb_slide, .et_fullscreen_slider .et_pb_container {dak yükseklik: 100% önemli; Yükseklik: 100% önemlidir;! }

sonraki sekmeyi tıklayın ve aşağıdaki javascript'i "etiketli metin kutusuna ekleyin" Kodu blogunuzun başına ekleyin "

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

(function($) {
 
 $(window).on('load resize', function() {
 $('.et_fullscreen_slider').each(function() {
 et_fullscreen_slider($(this));
 });
 });
 
 function et_fullscreen_slider(et_slider) {
 var et_viewport_width = $(window).width(),
 et_viewport_height = $(window).height(),
 et_slider_height = $(et_slider).find('.et_pb_slider_container_inner').innerHeight(),
 $admin_bar = $('#wpadminbar'),
 $main_header = $('#main-header'),
 $top_header = $('#top-header');
 
 $(et_slider).height('auto');
 
 if ($admin_bar.length) {
 var et_viewport_height = et_viewport_height - $admin_bar.height();
 }
 
 if ($top_header.length) {
 var et_viewport_height = et_viewport_height - $top_header.height();
 }
 
 if (!$('.et_transparent_nav').length) {
 var et_viewport_height = et_viewport_height - $main_header.height();
 }
 
 if (et_viewport_height > et_slider_height) {
 $(et_slider).height(et_viewport_height);
 }
 }
 
})(jQuery);

nihayet

Artık web siteniz için tam ekran kaydırıcınız var. Çoğu tarayıcı için etkili tam genişlikte kaydırıcılar oluşturmak için kullanın.

Herhangi bir sorunuz varsa, sormaktan çekinmeyin.

Diğer Divi öğreticiler

Bu makale yorumları 12 içeriyor

  1. Merhaba, harika bir eğitim.
    Öte yandan, örneğin iphone'da tam ekran görüntülenmez, iphone'u eğerek kaydırıcı zaman zaman tam ekranda görüntülenir, ancak her zaman değil…. sanki duyarlı değilmiş gibi, bu küçük sorunu çözmek için herhangi bir fikriniz var mıydı?

    Şimdiden teşekkürler,
    Cordialement,

    1. Bonjour

      Diğer tüm eklentileri devre dışı bırakmayı deneyin, ayrıca WordPress ve Divi sürümlerinizin güncel olup olmadığını kontrol edin.

  2. Bonjour
    Bu yazı için teşekkürler. CSS'yi çok fazla değiştirmediğimiz sürece Divi ile bir child tema kurmanın gerekli olmadığını okudum.
    Hala biraz özelleştirme var ...
    Peki, süper eğiticinizi uygulamadan önce bir çocuk teması önerir misiniz?
    Tüm iyi tavsiyeleriniz için şimdiden teşekkür ederim, sık sık ondan ilham alıyorum 🙂

  3. Merhaba, çok güzel bir yazı!
    Yazıda belirtilenleri takip ettim ancak kaydırıcım DIVI'da tam ekran görüntülenmiyor.
    Bana yardım eder misiniz ? Bunu ana sayfama koymak istiyorum.

    Merci votre aide dökmek

  4. Bonjour
    Ana sayfamı oluşturucu ile oluşturuyorum… bir önizleme yaptığımda sayfayı görüyorum.
    Sorun şu ki, sayfamı kaydedip tekrar açtığımda kaydırıcı görünmüyor.
    Lütfen birisi bana yardım edebilir mi?

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
13 hisseleri
hisse5
cıvıltı1
Enregistrer7