Divi'de Aşağıdan Yukarıya Sabit Gezinme Çubuğu Nasıl Oluşturulur
Yayınlanan: 2021-09-06Bugünün Divi eğitiminde size adım adım Divi'de nasıl aşağıdan yukarıya yapışkan bir gezinme çubuğu oluşturulacağını göstereceğiz. Bu, ekranın üst kısmında benzersiz bir düzen için gezinme çubuğunun başlangıçta sayfanın altına yapışmasını sağlar. Ardından, sayfanın ekranın üst kısmındaki bölümü geçtikten sonra, gezinme çubuğu sayfanın en üstüne yapışacak ve sayfanın geri kalanında orada kalacaktır. Sayfanın ekranın alt kısmındaki menüyü "alacağını" ve ana menünüze ve web sitenize hoş bir etkileşim etkisi getireceğini söyleyebilirsiniz.
Başlayalım!
Gizlice Bakış
Elde etmeye çalıştığımız sonucu görselleştirmenize yardımcı olmak için, nihai sonuca bir göz atalım:
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.
İçe Aktar düğmesini tıklayın.
Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.
Ardından içe aktar düğmesini tıklayın.
Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.
Hadi öğreticiye geçelim, olur mu?
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
- WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
- “Sıfırdan Oluştur” seçeneğini seçin.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de Aşağıdan Yukarıya Sabit Gezinme Çubuğu Oluşturma
Bölüm 1: Ekranın Üstü Bölüm ve Başlık Oluşturma
Bu eğitimin ilk kısmı için, sayfamızın ana başlık bölümü olarak hizmet edecek ekranın üst kısmındaki bölümü ve başlığı oluşturacağız. Bölümün tüm görünümü kapladığından emin olmak için bölüm masaüstünde tam ekran olacaktır.
Satır ekle
Başlamak için, varsayılan bölüme tek sütunlu bir satır ekleyin.
Bölüm Ayarları
Modül eklemeden önce, bölüm için ayarları açın ve aşağıdaki gibi bir arka plan ekleyin:
- Arka Plan Rengi: #e9f9ff
- Arka Plan Resmi: [resim ekle]
Tasarım sekmesi altında, minimum yüksekliği ve dolguyu güncelleyin.
- Min Yükseklik: 100vh (masaüstü), otomatik (tablet ve telefon)
- Dolgu: 20vh üst, 20vh alt
Başlık Metni
Başlık metnini oluşturmak için satıra yeni bir metin modülü ekleyin.
Ardından içeriği aşağıdaki H1 başlığıyla güncelleyin:
<h1>Above the Fold</h1>
Metin Ayarları
Metin ayarlarının tasarım sekmesi altında, başlık yazı tipi stillerini aşağıdaki gibi güncelleyin:
- Başlık Yazı Tipi: Rubik
- Başlık Yazı Tipi Ağırlığı: Yarı Kalın
- Başlık Yazı Tipi Stili TT
- Başlık Metni Hizalama: Orta
- Başlık Metni Rengi: #302ea7
- Başlık Metni Boyutu: 130px (masaüstü), 70px (tablet), 40px (telefon)
- Başlık Harf Aralığı: 2px
- Başlık Çizgisi Yüksekliği: 1.3em
2. Bölüm: Ekranın Altındaki Bölümünü Oluşturma
Yapışkan gezinme çubuğunun işlevselliğini göstermek için ekranın altına bir bölüm eklememiz gerekiyor, böylece kaydırmak için biraz yerimiz olabilir.
Bölümü oluşturmak için, az önce oluşturduğumuz ekranın üst kısmındaki bölümü çoğaltın.
Yinelenen bölüm arka planını güncelleyin.
- Arka Plan Rengi: #f4def1
Ardından, sayfayı aşağı kaydırmak için yerimiz olması için bölüme büyük bir minimum yükseklik verin. Bu, bir sayfanın gerçek içeriğinin yerine yalnızca bir doldurma bölümüdür.
- Min Yükseklik: 200vh
Ardından, “Aşağı” kelimesini “Yukarı” ile değiştirerek metin modülü içeriğini güncelleyin.
Bölüm 3: Yapışkan Gezinti Çubuğu Oluşturma
Yapışkan gezinme çubuğunu aşağıdan yukarıya oluşturmak için ilk adımımız tek sütunlu bir satırla yeni bir bölüm oluşturmaktır.
Yeni Bölüm ve Satır Ekle
Ekranın üst kısmındaki bölümün hemen altına yeni bir normal bölüm ekleyin.
Ardından bölüme tek sütunlu bir satır ekleyin.
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 çıkarın.
- Dolgu: 0 piksel üst, 0 piksel 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 Mobilde Mutlak Bir Konum Verin
Mobil açılır menü, varsayılan olarak hamburger simgesinin altında açılır. Gezinme çubuğunu en altta tutarsak, kullanıcı en alt konumda tıklarsa bu, açılır menüyü gizleyecektir. Daha iyi bir kullanıcı deneyimi için, tablet ve telefon ekranında gezinme çubuğunun sayfanın en üstünde başlamasını istiyoruz.
Bunu yapmak için bölüme tablet ve telefonda mutlak bir konum verin.
- Konum: Göreceli (masaüstü), Mutlak (tablet ve telefon)
Masaüstü ve Mobil için Sabit Konum Ekleyin
Gezinti çubuğu bölümüne yapışkan konumu eklemek için aşağıdakileri güncelleyin:
- Sabit Konum: Yukarıya ve Aşağıya Yapış (masaüstü), Yukarıya Yapış (tablet ve telefon)
Satır Doldurmasını Güncelle
Yapışkan bölüm tamamlandıktan sonra, bölüm içindeki satırın ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:
- Dolgu: 10 piksel üst, 10 piksel alt
Gezinme Menüsü Oluştur
Bölüm ve satır yerindeyken, navigasyon menüsünü oluşturmaya hazırız.
Tek sütunlu satıra bir menü modülü ekleyerek başlayın.
Menü İçeriği
Menünün içeriğini aşağıdaki gibi güncelleyin:
- açılır menüden menü seç
- logo resmi ekle (122 piksele 52 piksel olan bir resim kullanıyorum)
- varsayılan arka plan rengini çıkar
Tasarım sekmesi altında aşağıdaki menü metni ve simge ayarlarını güncelleyin:
- Aktif Bağlantı Rengi: #fff
- Menü Yazı Tipi: Rubik
- Menü Yazı Tipi Stili: TT
- Menü 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ü Simge Rengi: #fff
Mobil Cihazda Gezinme Çubuğunun Mutlak Konumunu Kaydırmak için Kenarlık Kullanma
Gezinme çubuğu bölümü mobil cihazlarda 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ü ile aynı yükseklikte bir üst kenarlık kullanarak üst bölümü kaydırmamız gerekiyor.
Mobil Cihazda Gezinti Çubuğu Bölümünün Yüksekliğini Kontrol Edin
Mobil cihazlarda gezinme çubuğunun yüksekliğini 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 küçültebilirsiniz. Menüyü içeren bölüme sağ tıklayın ve tarayıcıdaki sağ tıklama menüsünden öğeyi incele seçeneğini seçin. Bölümün boyutlarını (yükseklik dahil) gösteren bölümün altında bir araç kutusu görmelisiniz. Bu örnekte, gezinti çubuğu bölümünün yüksekliği 72 pikseldir.
Üst Kenar Ofsetini Katlama Üstü Bölümüne Ekle
Artık bölümün yüksekliğini belirlediğimize göre, üst (ekranın üst kısmı) bölümü için ayarları açın.
Tasarım sekmesinin altına, tablette ve telefonda aşağıdaki üst kenarlığı ekleyin:
- Üst Kenar Genişliği: 72px (tablet ve telefon)
- Üst Kenar Rengi: #302ea7
Sınır, mutlak konumu olan bölümle aynı yükseklikte olduğu için, sınırı göremezsiniz çünkü sadece bölümü aşağı itmeye yarar, böylece kesilmez.
Son sonuç
Nihai sonucu kontrol edin!
Son düşünceler
Aşağıdan yukarıya doğru yapışkan bir gezinme çubuğu oluşturmak, Divi'nin yerleşik konumu ve yapışkan seçenekleri kullanılarak kolayca gerçekleştirilebilir. Anahtar, ekranın üst kısmındaki bölüme 100vh yüksekliği vermek ve ardından tarayıcının altına ve üstüne yapışan gezinme çubuğu bölümünü aşağıya eklemektir. Umarım bu, web sitenize daha benzersiz ve ilgi çekici bir ekranın üst kısmı eklemenize yardımcı olur.
Bu yapışkan gezinme çubuğu, genel bir şablon yerine tek bir sayfa tasarımı için en iyi sonucu verir. Bununla birlikte, bunu bir ana sayfa tasarımı olarak kullanmayı kolayca seçebilir ve Divi Tema oluşturucuyu kullanarak geri kalan sayfalar için genel bir başlık kullanabilirsiniz.
Yorumlarda sizden haber bekliyorum.
Şerefe!