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 '.
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 '.
"Genel ayarlar" bölümünde yeni bir slayt 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)
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
- restoran kullanımı Divi tema için 5 siteleri
- Bir Divi WooCommerce ürününe metin ekleme
- Divi sayfaları arasındaki menü rengini değiştirme
- Bir blog'un ızgaralarını Divi ile kişiselleştirme
- Nasıl WordPress üzerinde rol Divi editörü kullanımı
- Tam ekran Divi sürgüsü nasıl oluşturulur
- Divi sayfaları arasındaki menünün rengi nasıl değiştirilir
- Divi hakkında muhtemelen bilmediğiniz özellikler
- WordPress üzerinde Divi Builder nasıl kullanılır
- Divi video kaydırma modülü nasıl kullanılır
- Divi Builder Flip modülü nasıl kullanılır
- Divi Builder'da referans modülü nasıl eklenir?
- Divi metin modülü nasıl kullanılır?
- Divi'de kaydırıcı nasıl oluşturulur
- Divi kullanıcı rolü nasıl düzenlenir
- Divi Sosyal Medya modülü nasıl kullanılır?
- WordPress Divi konulu mağaza modülü nasıl kullanılır?
- Divi kenar çubuğu modülü nasıl kullanılır
- Divi Fiyat Tablosu Modülünün Kullanımı
- Divi yayınlarının başlık modülünü nasıl kullanırım
- Divi video modülü nasıl eklenir
- Makale navigasyon modülü nasıl kullanılır
- Divi arama modülü nasıl kullanılır?
- Divi cüzdan modülü nasıl kullanılır?
- Divi Builder'da kişi modülünün kullanımı
- Divi filtreli cüzdan modülü nasıl kullanılır
- Tam genişlikte sürgü modülü nasıl kullanılır
- Divi Builder Görüntü Modülü nasıl kullanılır?
- Divi Builder'ın tam genişlikli gezinme modülünü nasıl kullanırım?
- Resim galerisi modülü nasıl kullanılır?
- Divi Builder Tam Genişlik Kart Modülü nasıl kullanılır?
- Divi Tam Genişlik Portföy Modülü nasıl kullanılır?
- Divi tam genişlikli başlık modülü nasıl kullanılır?
- Divi Sayaç Modülünün Kullanımı
- Divi Builder'daki makaleler sürgüsünü kullanma
- Divi Email Optin modülü nasıl kullanılır?
merhaba ve bu eğitim için teşekkürler! Buradaki kaydırıcıya eklenecek js ve css kodunu bulamıyorum
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,
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.
İyi günler, slaydın boyutunu başlık resminin boyutuna uyacak şekilde nasıl özelleştirebilirim, böylece resmi kırpamam?
Bonjour
Ben soruyu anlamadım.
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 🙂
Bonjour
Şart değil. Çok fazla teknik bilginiz yoksa divi'yi tutabilirsiniz.
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
Bonjour
DIVI ekibiyle iletişime geçtiniz mi?
Merhaba Aliénor,
Bende de aynı sorun var ... Bir çözüm buldunuz mu?
Şimdiden teşekkürler
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?
Bonjour
Bu bir hatadan kaynaklanıyor olabilir, Eleganthemes desteğiyle iletişime geçmeye çalıştınız mı?
Bonjour
Yazınızın için teşekkür ederiz!
Eğer ben kaydırma hızı slaytları nasıl değişebileceğinin biliyor musunuz?