Divi navigasyonunuzu alttan nasıl başlatırsınız, sonra kaydırma yaparken yukarıda kalın
Bugünün Divi öğreticisinde, adım adım, kaydırma yaparken ve tam ekran yüksekliğinizi geçtikten sonra web sitenizde nasıl sabit bir navigasyon yapacağınızı göstereceğiz. Bu yazıdaki adımları izler ve sabit bir navigasyon yeniden oluşturursanız, navigasyonun ana menünüze ve genel olarak web sitenize iyi bir etkileşim etkisi getireceğini göreceksiniz. Ekranda normal dikey navigasyon yaparak başlayacağız. Sayfanın üstünde olmak yerine, bu gezinme ekranın altına itilecektir. Büzüldükten sonra ve menünün yüksekliğini ekrana geçtikten sonra, menünün konumunu değiştireceğini ve sayfanın üstüne yerleştirileceğini göreceksiniz. Navigasyon onarıldıktan sonra, geri kalan avlu boyunca navigasyon yine de onarılacaktır. Ancak kahramana geri döndükten sonra, navigasyon tekrar normal davranacak ve kahramanın dibine yerleştirilecek.
Sayfanın ekranın altındaki menüyü ‘alacağını’ ve aradığınız gelişmiş bir efekt sağlayacağını söyleyebilirsiniz. Elde etmek istediğimiz sonuçları görselleştirmenize yardımcı olmak için, sonucuna bakalım:
Sabit Gezinme Oluşturma Web sitemize efekt eklemek için yuvarlanırken, birkaç satır CSS kodu ve birkaç satır jquery kodu kullanmamız gerekir. Kullanacağımız CSS kodu, navigasyonu ekranın altına yerleştirecek ve jQuery kodu etkinleştirilmeden önce sıradan bir altbilgi gibi davranmasını sağlayacaktır. Bundan sonra, jQuery kod satırı özel CSS kodundan devralacak ve navigasyonun web sitesindeki pozisyonunuza göre davranmasına izin verecektir. Gerekli CSS kodunu ekleyin Web sitemize gerekli CSS kodunu ekleyerek başlayacağız. Genel olarak, bunu yapmanın üç yolu vardır. Kod oluşturmanın ilk iki yolu tüm web siteleri için geçerlidir. Üçüncü yöntem, yalnızca bir sayfa için çalışmasını sağlar. Göstereceğimiz ilk yöntem temasını ayarlayarak CSS kodunu ekleyin Kodu tema ayarı aracılığıyla eklemenize olanak tanır. Bu, sık kullanılmayan ancak birkaç avantajı olan bir kod eklemenin bir yoludur. Bunlardan biri kodu eklediğiniz anda, değişikliklerin gerçek zamanlı olarak gerçekleştiğini göreceksiniz. CSS kodunu eklemek için WordPress Gösterge Tablosunu Aç> Görünüşe Git> Özelleştir> Sekmede aşağı kaydırın ve Ek CSS Sekmesini Açın> Ekle Aşağıdaki CSS kod satırı: #Play-Heading {
Pozisyon: Mutlak;
Üst: Otomatik;
Alt: 0;
}
CSS kodunu, aynı zamanda en yaygın olarak kullanılan diğer seçenek seçenekleri aracılığıyla ekleyin, Divi web sitesi tema seçeneğinize CSS kodu eklemektir. Kodu ekledikten sonra, tüm web siteleri için geçerli olacaktır. Bir sayfaya efekt ekleme olasılığını bulmayı tercih ederseniz, belirli bir sayfaya kod ekleyebileceğiniz bir sonraki olasılığa geçin.
Tema seçeneklerinize kod eklemek için; WordPress Dashboard> Divi> Tema Seçenekleri> Genel sekmesini aşağı kaydırın ve aşağıdaki kodu CSS özel alanına yapıştırın: #Playing-Heading { Pozisyon: Mutlak;
Üst: Otomatik;
Alt: 0;
}
CSS kodunu bir sayfaya ekleyin, bu olasılık bu sabit gezinmeyi bir sayfaya uygulamak istiyorsanız, ancak tüm web sitesine uygulamak istiyorsanız ilginç olabilir. Örneğin, veranda üzerinde tam geniş bir başlık kullanıyorsanız, bu yöntemi kullanmak isteyebilirsiniz. Kaydırma sırasında sabit navigasyon eklemek istediğiniz sayfayı açın. Ardından, oluşturucunun sağ köşesinde aşağıdaki sembolü göreceksiniz: üzerine tıklayın ve ekranın tüm sayfada değişiklik yapabileceğiniz yerlerde göründüğünü göreceksiniz. Özellikle sayfa için geçerli hale getirmek için özel CSS kutusuna aşağıdaki kodu ekleyin: #Play-Heading {
Pozisyon: Mutlak;
Üst: Otomatik;
Alt: 0;}
Atmak istediğimiz bir sonraki adımın JQuery kodunu WordPress sitemize eklemektir. Bu kod, kaydırdığınızdan beri çalışmaya başlayacaktır. JQuery kodunu iki şekilde ekleyebiliriz; Tema seçeneği aracılığıyla veya kod modülü aracılığıyla. Bir sayfaya bir kod eklemek istiyorsanız, kod modülünü bu yazıdaki CSS kodu için bahsettiğimiz üçüncü olasılıkla birlikte kullanabilirsiniz.
Kodu web sitenizdeki tüm sayfalara uygulamak için tema seçenekleri aracılığıyla jQuery kod ekleyin, kodu tema seçeneğine ekleyebilirsiniz. WordPress Dashboard’u aç> Divi’yi açın> Tema seçeneğine devam edin> Entegrasyon sekmesini açın> ve aşağıdaki kodu ‘ blogunuza yapıştırın:
jQuery (işlev ($) { $ (pencere) .bind (‘kaydırma’, function () {
var windowheight = $ (pencere) .Height ();
if ($ (pencere) .scrolltop () <windowheight) {
$ ("#Play-Header"). CSS ("konum", "mutlak"). css ("üst", "otomatik").
başka {
$ ("#Main-Header"). CSS ("Pozisyon", "Sabit"). CSS ("Alt", "Otomatik").
}
});
});
Belirli bir sayfaya bir kod eklemek istiyorsanız, kod modülünden jQuery kodunu ekleyin, kod modülü üzerinden yapabilirsiniz. CSS kodunu eklediğimiz önceki bölümde, son seçeneği seçmelisiniz. Sayfaya dönün ve standart kısmı sayfanızın üstüne ekleyin. Standart bölümde kod modülünü ekleyin. Bu bölümü aslında istediğiniz yere koyabilirsiniz, ancak hızlı bir şekilde bulmak istiyorsanız, sayfanızın üstüne koymanızı öneririz. Ardından, aşağıdaki kodu kopyalayıp kod modülü içerik kutunuza yapıştırın:
jQuery (işlev ($) {
$ (pencere) .bind (‘kaydırma’, function () {
if ($ (pencere) .scrolltop () <windowheight) {
$ ("#Main-Header"). CSS ("konum", "mutlak"). css ("üst", "otomatik").
}
başka {
$ ("#Main-Header"). CSS ("Pozisyon", "Sabit"). CSS ("Alt", "Otomatik").
}
});
});
Ve hepsi bu! Kod şimdi çalışmalı, menünüzü değiştirmeli ve web sitenizi biraz daha etkileşimli hale getirmelidir.
