[Ad_1]
Başlayalım!
anket
Elde etmeye çalıştığımız sonucu görselleştirmenize yardımcı olmak için, sonuca bakalım:
Düzeni ÜCRETSİZ indirin
Bu eğitimdeki tasarımları elinize almak için önce aşağıdaki düğmeyi kullanarak onu indirmeniz gerekecek. İndirmeye erişmek için Divi Daily posta listemize abone olmanız gerekir. formulaire aşağıda. Yeni bir abone olarak, her Pazartesi daha da fazla Divi avantajı 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 ek e-posta almayacaksınız.
Bölümün düzenini Divi kitaplığınıza aktarmak için Divi kitaplığına gidin.
İçe Aktar düğmesine tıklayın.
Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirilecek dosyayı seçin.
Ardından içe aktar düğmesine tıklayın.
Tamamlandığında, bölümlerin düzeni Divi Builder'da mevcut olacaktır.
Eğitime devam, olur mu?
Başlamak için neye ihtiyacınız var?
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız, kurun ve etkinleştirin. Divi teması.
- 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 alttan üste yapışkan bir gezinme çubuğu oluşturun
Bölüm 1: Su hattının üzerindeki bölümü ve başlığı oluşturma
Bu öğreticinin ilk kısmı için, sayfamızın ana başlık bölümü olarak hizmet edecek olan sınır çizgisinin üzerindeki bölümü ve başlığı oluşturacağız. Bölümün tüm pencereyi kaplamasını sağlamak için bölüm masaüstünde tam ekran olacaktır.
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]
Tasarım sekmesinde, minimum yüksekliği ve dolguyu güncelleyin.
- Minimum yükseklik: 100 vh (masaüstü bilgisayar), otomatik (tablet ve telefon)
- Dolgu: üst 20vh, alt 20vh
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 sekmesinde, 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
- TT Başlık Yazı Tipi Stili
- Başlık Metni Hizalama: Merkez
- Başlık Metin Rengi: # 302ea7
- Başlık metni boyutu: 130 piksel (masaüstü), 70 piksel (tablet), 40 piksel (telefon)
- Başlık Harf Aralığı: 2px
- Başlık Çizgisi Yüksekliği: 1,3 em
2. Bölüm: Ekranın altındaki bölümün oluşturulması
Yapışkan gezinme çubuğunun işlevselliğini göstermek için, kaydırma 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 oluşturduğumuz sınır çizgisinin üzerindeki bölümü çoğaltın.
Yinelenen bölümün arka planını güncelleyin.
- Arka plan rengi: # f4def1
Ardından, sayfayı kaydırmak için yerimiz olması için bölüme büyük bir minimum yükseklik verin. Bu, bir sayfadaki asıl içerik yerine doldurulması gereken bir bölümdür.
Ardından, “Aşağı” kelimesini “Yukarı” ile değiştirerek metin modülünün içeriğini güncelleyin.
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 bir bölüm ve yeni bir satır ekleyin
Su hattının üzerindeki bölümün hemen altına yeni bir normal bölüm ekleyin.
Ardından, bölüme bir sütuna 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 mobil cihazlarda mutlak bir konum verin
Mobil açılır menü, varsayılan olarak hamburger simgesinin altında açılır. Navigasyon çubuğunu en altta tutarsak, kullanıcı aşağı konumda tıkladığında açılır menüyü gizleyecektir. Daha iyi bir kullanıcı deneyimi için, gezinme çubuğunun tablet ve telefon ekranında sayfanın en üstünde başlamasını istiyoruz.
Bunu yapmak için bölüme tablet ve telefonda mutlak bir konum atayın.
- Konum: Göreceli (masaüstü bilgisayar), Mutlak (tablet ve telefon)
Masaüstü ve mobil cihazlar 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 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 üstte, 10 piksel altta
Gezinme menüsü oluşturun
Bölüm ve satır yerindeyken, gezinme menüsünü oluşturmaya hazırız.
Bir sütuna 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 (122 piksele 52 piksel resim kullanıyorum)
- varsayılan arka plan rengini kaldır
Tasarım sekmesinde 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 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 oturacak (ve kesecektir). Bu sorunu çözmek 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 cihazlarda gezinme çubuğu bölümünün yüksekliğini inceleyin
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ının genişliğini 980 pikselin altına düşürebilirsiniz. Menüyü içeren bölüme sağ tıklayın ve tarayıcının içerik menüsünden Öğeyi İncele 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 örnek için, gezinti ç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.
Tasarım sekmesinin altına, hem tablette hem de telefonda aşağıdaki üst kenarlığı ekleyin:
- Üst kenarlık 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ğu için, sadece bölümün kesilmemesi için aşağı itmeye yaradığından, sınırı göremezsiniz.
Nihai sonuç
Son sonucu keşfedin!
Son düşünceler
Aşağıdan yukarıya 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, katın üstündeki bölüme 100vh yükseklik vermek, ardından navigasyonun altına ve üstüne yapışan aşağıdaki gezinme bölümünü eklemektir. Umarım bu, su hattınızın üzerinde daha benzersiz ve ilgi çekici bir şey eklemenize yardımcı olur. Site Web.
Bu yapışkan gezinme çubuğu, genel bir şablon yerine tek bir sayfa tasarımı için en iyi sonucu verir. Bununla birlikte, bunu ana sayfa tasarımınız olarak kullanmayı kolayca seçebilir ve oluşturucuyu kullanarak sayfaların geri kalanı için genel bir başlık kullanabilirsiniz. Divi teması.
Yorumlarda sizden haber almak için sabırsızlanıyorum.
Sağlığınıza!
[Ad_2]
