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.

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 başlığa ekleyin blogunuzun "

(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 tam ekran modu kaydırıcınız var. web sitesi. Ç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.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”genişletilmiş” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI TEMASINI İNDİRİN [/vcex_button][/vc_column][vc_column width=” 1 /2"][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”genişletilmiş” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]YÜKLE ŞABLONLARI DIVI[/vcex_button][/vc_column][/vc_row]

Diğer Divi öğreticiler