Divi Navigasyonunuzu Alttan Başlatma, Sonra Kaydırırken Üstte Sabit Kalma

Bugünün Divi eğitiminde size adım adım web sitenizde gezinirken ve tam ekranınızın yüksekliğini geçtikten sonra nasıl sabit bir navigasyon yapacağınızı göstereceğiz. Bu gönderideki adımları izler ve sabit gezinmeyi yeniden oluşturursanız, gezinmenin ana menünüze ve genel olarak web sitenize hoş bir etkileşim etkisi getireceğini göreceksiniz.

Ekranda normal bir dikey gezinme oluşturarak başlayacağız. Bu gezinme, sayfanın en üstünde olmak yerine ekranın altına itilecektir. Kaydırdıktan sonra ve ekranın menü yüksekliğini geçtikten sonra, menünün konumunun değişeceğini ve sayfanın en üstüne yerleştirileceğini göreceksiniz. Gezinme sabitlendiğinde, sayfanın geri kalanında sabit kalacaktır. Ancak kahraman bölümüne geri döndüğünüzde, navigasyon tekrar normal şekilde çalışacak ve kahraman bölümünün en altına yerleştirilecektir.

Sayfanın ekranın alt kısmındaki menüyü 'alacağını' ve aradığınız gelişmiş efekti vereceğini söyleyebilirsiniz. Elde etmeye çalıştığımız sonucu görselleştirmenize yardımcı olmak için, nihai sonuca bir göz atalım:

Kahraman Bölümü: Tam Ekran Modlu Tam Genişlikli Başlık Modülü

Bu efekti web siteniz için kullanacağınız zaman göz önünde bulundurmanız gereken bir şey var; tam ekran modu Başlık Modülüne ihtiyacınız var. Teorik olarak, bunu diğer modüllere ve bölümlere de uygulayabilirsiniz, ancak menünün o bölümün altında görünmesini sağlamak için bazı değişiklikler yapmanız gerekecektir. Divi'nin sunduğu tam ekran seçeneği, kahraman bölümünün ekranı doldurmasını sağlar (ekranın ölçüleri ne olursa olsun), bu yüzden bu efekti menünüze uygulamak istiyorsanız kullanmanızı öneririz.

Bu efekti eklemek istediğiniz sayfayı açarak veya oluşturarak başlayın. Ardından, Tam Genişlik Başlığını açın veya oluşturun ve Tasarım sekmesine gidin. Tasarım sekmesinde ilk karşılaşacağınız şey Düzen alt kategorisidir. Devam edin ve bu alt kategoride Tam Ekran modunu etkinleştirin.

Kaydırırken Sabit Navigasyonun Oluşturulması

Web sitemize efekt eklemek için hem bazı CSS kod satırlarını hem de bazı jQuery kod satırlarını kullanmamız gerekecek. Kullanacağımız CSS kodu, navigasyonu ekranın altına yerleştirecek ve jQuery kodu etkinleştirilmeden önce normal bir altbilgi gibi davranmasını sağlayacaktır. Bundan sonra, jQuery kod satırları özel CSS kodundan devralacak ve navigasyonun web sitesindeki konumunuza göre hareket etmesine izin verecektir.

Gerekli CSS Kodunu Ekleyin

Gerekli CSS kodunu web sitemize ekleyerek başlayacağız. Genel olarak, bunu yapmanın üç yolu vardır. İlk iki yol, kodun tüm web sitesine uygulanmasını sağlar. Üçüncü yöntem, yalnızca bir sayfa için çalışmasını sağlar.

Tema Özelleştirici Aracılığıyla CSS Kodu Ekleyin

Size göstereceğimiz ilk yöntem, kodu Tema Özelleştirici aracılığıyla eklemenizi sağlar. Bu, kod eklemenin bir yoludur, çok sık kullanılmaz, ancak bazı avantajları vardır. Bunlardan biri, kodu ekler eklemez değişikliklerin gerçek zamanlı olarak gerçekleştiğini fark edeceksiniz.

CSS kodunu eklemek için WordPress kontrol panelinizi açın > Görünüm > Özelleştir'e gidin > Sekmeyi aşağı kaydırın ve Ek CSS sekmesini açın > Aşağıdaki CSS kod satırlarını ekleyin:

#main-header {
position: absolute;
top: auto;
bottom: 0;
}

Tema Seçeneklerinden CSS Kodu Ekleyin

En yaygın kullanılanı olan bir diğer seçeneğiniz de Divi web sitenizin Tema Seçeneklerine CSS kodunu eklemektir. Kodu ekledikten sonra, tüm web sitesi için geçerli olacaktır. Efekti yalnızca bir sayfaya ekleyen bir olasılık arıyorsanız, kodu özellikle bir sayfaya ekleyebileceğiniz bir sonraki olasılığa geçin.

Kodu Tema Seçeneklerinize eklemek için; WordPress panonuza gidin > Divi > Tema Seçenekleri > Genel sekmesini aşağı kaydırın ve aşağıdaki kodu Özel CSS alanına yapıştırın:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Yalnızca Bir Sayfaya CSS Kodu Ekleyin

Bu sabit navigasyonu web sitesinin geri kalanına değil, yalnızca bir sayfaya uygulamak istiyorsanız bu olasılık ilginç olabilir. Örneğin, yalnızca ana sayfada tam genişlikte başlığı kullanıyorsanız, bu yöntemi kullanmak isteyebilirsiniz.

Kaydırırken sabit gezinmeyi eklemek istediğiniz sayfayı açın. Ardından, oluşturucunun sağ köşesinde aşağıdaki sembolü göreceksiniz:

Üzerine tıklayın ve tüm sayfada değişiklik yapabileceğiniz bir ekran göreceksiniz. Özellikle o sayfaya uygulanmasını sağlamak için Özel CSS kutusuna aşağıdaki kodu ekleyin:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Gerekli jQuery Kodunu Ekleyin

Atmak istediğimiz bir sonraki adım, jQuery kodunu WordPress web sitemize eklemek. Bu kod, kaydırdığınız andan itibaren çalışmaya başlayacaktır. jQuery kodunu iki şekilde ekleyebiliriz; Tema Seçenekleri veya Kod Modülü aracılığıyla. Kodu sadece bir sayfaya eklemek istiyorsanız, bu gönderide CSS kodu için bahsettiğimiz üçüncü olasılık ile Kod Modülünü birlikte kullanabilirsiniz.

Tema Seçeneklerinden jQuery Kodu Ekleme

Kodu web sitenizdeki tüm sayfalara uygulamak için Tema Seçeneklerine kodu ekleyebilirsiniz. WordPress kontrol panelinize gidin > Divi'ye gidin > Tema Seçeneklerine Devam Et > Entegrasyon sekmesini açın > Ve aşağıdaki kodu 'blogunuzun <head>' alanına yapıştırın:

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

Kod Modülü Üzerinden jQuery Kodu Ekleme

Özellikle bir sayfaya kod eklemek istiyorsanız bunu Kod Modülü üzerinden yapabilirsiniz. CSS kodunu eklediğimiz önceki bölümde, son seçeneği seçmiş olmalısınız.

O sayfaya geri dönün ve sayfanızın en üstüne bir Standart Bölüm ekleyin. Bu Standart Bölüm içinde bir Kod Modülü ekleyin. Aslında bu bölümü istediğiniz yere yerleştirebilirsiniz, ancak hızlı bir şekilde bulmak istiyorsanız sayfanızın en üstüne koymanızı öneririz. Ardından, aşağıdaki kodu kopyalayıp Kod Modülünüzün İçerik Kutusuna yapıştırın:

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

Ve bu kadar! Kod artık çalışmalı, menünüzü dönüştürmeli ve web sitenizi biraz daha etkileşimli hale getirmelidir.

Son düşünceler

Bu gönderide, kaydırma yaparken nasıl sabit bir gezinme oluşturacağınızı gösterdik. Size hile yapması gereken bazı CSS kod satırları ve bazı jQuery kod satırları sağladık. Bu gönderiyi adım adım takip ettiyseniz, nihai sonucu alabilmeniz gerekir. Gelecek gönderiler için herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bırakmaktan çekinmeyin!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!

DenisXize / Shutterstock.com tarafından Öne Çıkan Görsel