Divi'de sayfanın altından üstüne yapışkan bir gezinme çubuğu oluşturmak ister misiniz?
öğreticide Divi Bugün size Divi'de aşağıdan yukarıya yapışkan bir navbar oluşturmayı adım adım göstereceğiz.
Bu, benzersiz bir ekranın üst kısmı düzeni için gezinme çubuğunun başlangıçta sayfanın altında kalmasına izin verecektir. Ardından, sayfanın üst kısmındaki bölümü kaydırdığınızda, gezinme çubuğu sayfanın üst kısmında kalacak ve sayfa boyunca orada kalacaktır.
Sayfanın ekranın alt kısmındaki menüyü "devralacağını" ve ana menünüze ve ana menünüze güzel bir etkileşim efekti getireceğini söyleyebilirsiniz. Site Web.
Hadi başlayalım!
anket
Elde etmeye çalıştığımız sonucu görselleştirmenize yardımcı olmak için, sonuca bakalım:
DIVI'yı şimdi indirin!!!
Divi Builder ile yeni bir sayfa oluşturarak başlayalım
Başlamak için aşağıdakileri yapmanız gerekir:
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın
Ardından İnşaata Başla (Sıfırdan Oluşturun)
Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de alttan üste yapışkan bir gezinme çubuğu oluşturun
Bölüm 1: Sınır Çizgisi Üzerinde Bölüm ve Başlık Oluşturma
Bu öğreticinin ilk kısmı için, sayfamızın ana başlık bölümü olarak hizmet edecek olan bölümü ve ekranın üst kısmındaki başlığı oluşturacağız. Bölümün tüm görüntüleme penceresini kaplamasını sağlamak için bölüm masaüstünde tam ekran olacaktır.
Ayrıca Oku: Divi: Filtrelenebilir Portföy modülünün ızgara ve tam genişlik düzeni arasında seçim yapın
Satır ekle
Başlamak için, varsayılan bölüme bir sütuna bir satır ekleyin.
Bölüm ayarları
Modül eklemeden önce bölüm ayarlarını açın ve aşağıdaki gibi bir arka plan ekleyin:
- Arka Plan Rengi: #e9f9ff
- Arka Plan Resmi: [resim ekle]
Sekmenin altında Dizayn, minimum yüksekliği ve dolguyu güncelleyin.
- Minimum Yükseklik: 100vh (Masaüstü), otomatik (Tablet ve Telefon)
- Dolgu: 20vh (Üst ve Alt)
Başlık metni
Başlık metnini oluşturmak için satıra yeni bir Metin modülü ekleyin.
Daha sonra güncelleyin içindekiler aşağıdaki H1 başlığıyla:
<h1>Above the Fold</h1>
Metin ayarları
Sekmenin altında Dizayn Metin modülü ayarlarında başlık yazı tipi stillerini aşağıdaki gibi güncelleyin:
- Başlık:
- Yazı Tipi: Yakut
- Yazı Ağırlığı: Yarı Kalın
- stil: TT
- Metin Hizalama: ortalanmış
- Metin Rengi: #302ea7
- Boyut: 130px (Masaüstü), 70px (Tablet), 40px (Telefon)
- Harf Aralığı: 2px
- Satır Yüksekliği: 1,3 em
Bölüm 2: Sınır çizgisinin altındaki bölümün oluşturulması
Yapışkan gezinme çubuğunun işlevselliğini göstermek için, kaydırmak için yerimiz olması için ekranın altına bir bölüm eklememiz gerekiyor.
Bölümü oluşturmak için, az önce yaptığımız kıvrımın üzerindeki bölümü çoğaltın.
Yinelenen bölümün arka planını güncelleyin.
- Arka Plan Rengi: #f4def1
Daha sonra bölüme büyük bir minimum yükseklik verin, böylece sayfayı aşağı kaydırmak için yerimiz olur. Bu sadece yerine doldurulması gereken bir bölümdür. içindekiler gerçek bir sayfa.
- Min Yükseklik: 200vh
sonra güncelle içindekiler Kelimeyi değiştirerek Metin modülünün "Aşağıda" yılından beri "Üstünde".
Bölüm 3: Yapışkan gezinme çubuğunu oluşturun
Aşağıdan yukarıya doğru yapışkan gezinme çubuğunu oluşturmak için ilk adımımız bir satırdan bir sütuna yeni bir bölüm oluşturmaktır.
Yeni bölüm ve satır eklendi
Öncelikle, ekranın üst kısmındaki bölümün hemen altına yeni bir normal bölüm ekleyelim.
Ardından, bölüme tek sütunlu bir satır ekleyelim.
Bölüm arka planı ve dolgu
Bölüm ayarlarını açın ve arka plan rengini güncelleyin.
- Arka Plan Rengi: #302ea7
Ardından, gezinme çubuğunun daha az yüksekliğe sahip olması için üst ve alt dolguyu kaldırın.
- Dolgu: 0 piksel (Üst ve Alt)
Görünür taşma ekle
Açılır menülerin görünür kalmasını sağlamak için görünürlük seçeneklerini aşağıdaki gibi güncelleyin:
- Yatay Taşma: Görünür
- Dikey Taşma: Görünür
Bölüme mobil cihazlarda mutlak bir konum verin
Mobil açılır menü, varsayılan olarak hamburger simgesinin altında açılacaktır. Gezinme çubuğunu altta tutarsak, kullanıcı tıklarsa açılır menüyü gizler.
Daha iyi bir kullanıcı deneyimi için navigasyon çubuğunun tablet ve telefon ekranında sayfanın en üstünden başlamasını istiyoruz.
Bunun için tablette ve telefonda bölüme mutlak bir konum verin.
- Konum: göreceli (Masaüstü), Mutlak (Tablet ve Telefon)
Masaüstü ve mobil cihazlar için yapışkan konum ekleyin
Gezinti çubuğu bölümüne yapışkan konumu eklemek için aşağıdakileri güncelleyin:
- Yapışkan Konum: Yukarı ve Aşağıya Yapıştır (Masaüstü), Yukarıya Yapıştır (Tablet ve Telefon)
Satır dolgusunu güncelle
Yapışkan bölüm tamamlandıktan sonra, bölüm içindeki satır ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:
- Dolgu: 10 piksel (Üst ve Alt)
Gezinme menüsü oluşturun
Bölüm ve çizgi yerindeyken, gezinme menüsünü oluşturmaya hazırız.
Tek sütunlu satıra bir Menü modülü ekleyerek başlayın.
Menü içeriği
Menü içeriğini aşağıdaki gibi güncelleyin:
- açılır listeden menüyü seçin
- logo resmi ekle
- varsayılan arka plan rengini kaldır
Sekmenin altında Dizayn, aşağıdaki menü metni ve simge ayarlarını güncelleyin:
- Aktif Bağlantı Rengi: #fff
- Menü Yazı Tipi: Yakut
- Menü Yazı Tipi Stili: TT
- Metin Rengi: #fff
- Menü Metin Boyutu: 16px
- Metin Hizalama: sağ
- Açılır Menü Satır Rengi: #e19dff
- Mobil Menü Metin Rengi: #302ea7
- Alışveriş Sepeti Simge Rengi: #fff
- Arama Simgesi Rengi: #fff
- Hamburger Menüsü Simge Rengi: #fff
Mobil cihazlarda gezinme çubuğunun mutlak konumunu dengelemek için bir kenarlık kullanma
Gezinme çubuğu bölümü mobilde mutlak bir konuma sahip olduğundan, çubuk sayfanın üst bölümünün üstüne oturur (ve keser). Bunu düzeltmek için, gezinme çubuğu/bölümüyle aynı yükseklikte bir üst kenarlık kullanarak üst bölümü kaydırmamız gerekir.
Mobil cihazlarda gezinme çubuğu bölümünün yüksekliğini inceleyin
Gezinme çubuğunun yüksekliğini mobil cihazda belirlemek için sayfanın canlı sürümünü yeni bir tarayıcı penceresinde açın. Ardından, mobil menüyü görmek için tarayıcı genişliğini 980 pikselin altına düşürebilirsiniz.
Şunlara da başvurabilirsiniz: Divi: Yapışkan bir gezinme çubuğu nasıl oluşturulur
Menüyü içeren bölüme sağ tıklayın ve seçeneği seçin elemanı incelemek tarayıcı bağlam menüsünde. bir kutu görmelisin araçları bölümün boyutlarını (yükseklik dahil) gösteren bölümün altında.
Bu örnek için, gezinme çubuğu bölümünün yüksekliği 72 pikseldir.
Ekranın üst kısmındaki bölüme bir üst kenarlık ofseti ekleyin
Artık bölümün yüksekliğini belirlediğimize göre, üst bölüm (ekranın üst kısmı) için ayarları açın.
Sekmenin altında Dizayn, tablette ve telefonda aşağıdaki üst kenarlığı ekleyin:
- Üst Kenar Genişliği: 72 piksel (Tablet ve Telefon)
- Üst Kenar Rengi: #302ea7
Sınır, mutlak konumu olan bölümle aynı yükseklikte olduğundan, sınırı göremezsiniz çünkü sadece bölümü aşağı itmeye yarar, böylece kesilmez.
Nihai sonuç
Son sonucu keşfedin!
DIVI'yı şimdi indirin!!!
Sonuç
Aşağıdan yukarıya yapışkan bir gezinme çubuğu oluşturmak, Divi'nin yerleşik konumu kullanılarak kolayca yapılabilir ve yapışkan seçenekler.
Anahtar, katın üstündeki bölüme 100vh yüksekliği vermek, ardından tarayıcının altına ve üstüne yapışan gezinme çubuğunu aşağıya eklemektir. Umarım bu, sayfanızın üst kısmına daha benzersiz ve ilgi çekici bir şey eklemenize yardımcı olur. Site Web.
Bu yapışkan gezinme çubuğu, genel bir şablon yerine tek sayfa tasarımı için en iyi sonucu verir. Bununla birlikte, bunu ana sayfa tasarımınız olarak kolayca seçebilir ve sayfaların geri kalanı için genel bir başlık kullanabilirsiniz. Divi tema üreteci .
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.
Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
