Divi'nin Tam Genişlik Menü Modülünü ve Normal Menü Modülünü Kullanma
Yayınlanan: 2022-06-06Herhangi bir web sitesinin genellikle gözden kaçan ancak önemli bir parçası, gezinme menüsüdür. Navigasyon, hoş bir kullanıcı deneyimi yaratmak açısından kilit bir unsurdur. Doğru yapılırsa, bir menü kullanıcı deneyimini büyük ölçüde iyileştirebilir ve ziyaretçilerinizin web sitesinde gezinmesini kolaylaştırabilir.
Divi, 2 farklı türde navigasyon modülü ile birlikte gelir; Tam Genişlik Menü ve Normal Menü. Bu yazıda Divi'nin tam genişlikli menü modülü ile normal menü modülü arasındaki bazı farkları tartışacağız ve göstereceğiz. Web siteniz için hangi modülü kullanacağınızı merak ettiyseniz, umarım bu makale, bu modüller için temel farklılıkları ve kullanım örneklerini anlamanıza yardımcı olur. Ayrıca tam genişlikte bir menünün ve normal bir menü modülünün tasarımını özelleştirmek için size adım adım talimatlar vereceğiz.
Başlayalım!
Gizlice Bakış
Masaüstü: Tam Genişlik Menü Modülü
Masaüstü: Normal Menü Modülü
Mobil: Tam Genişlik Menü Modülü
Mobil: Normal Menü Modülü
Divi'nin Tam Genişlikli Menü Modülü ile Normal Menü Modülü Arasındaki Temel Farklar
Burada, tam genişlikte bir menü modülü ile normal bir menü modülü arasındaki temel farklara genel bir bakış yer almaktadır.
Normal ve Tam Genişlikli Bölüm Konteyneri
Tam genişlikli menü modülü, Divi'de tam genişlikte bir bölüm gerektirir. Bölüm tam genişlikte olduğundan ekleyeceğiniz herhangi bir modül sayfanın tüm genişliğini kaplayacaktır. Normal menü bölümünden farklı olarak, yan yana birden fazla modüle sahip olamazsınız. Menünün sayfanın genişliğini kapsamasını istiyorsanız ve yanında herhangi bir ek modüle ihtiyaç duymuyorsanız, tam genişlikli menü modülü harikadır.
Normal menü modülü Divi'de düzenli bir bölüm gerektirir. Normal bölümlerin birçok farklı satır düzeni vardır ve normal menü modülüyle herhangi bir düzeni kullanabilirsiniz. Bu, daha karmaşık bir menü çubuğu oluşturmak için diğer satırları kullanarak menünün yanına ek içerik eklemenize olanak tanır. Divi'nin birçok satır seçeneği sayesinde, normal menü modülünü kullanarak menü çubuğunuz için kolayca benzersiz düzenler oluşturabilirsiniz.
Yerleşik Genişlik Ayarları ve Satır Kapsayıcısını Düzenleme
Normal ve tam genişlikli menüler arasındaki diğer önemli fark, modülün genişliğini ve aralığını düzenlemek için farklı yollara sahip olmalarıdır.
Tam genişlik menü modülü, genişliği düzenlemek için bazı yerleşik ayarlarla birlikte gelir. “Menü bağlantılarını tam genişlikte yap” seçeneği ile menü metnini tam genişlikte yapabilirsiniz. Bu, tam genişlikli menü modülünü varsayılan içerik genişliğinin ötesine uzatır.
Normal bir menü modülüyle benzer bir görünüm elde etmek için, bunun yerine içeren satırın ayarlarını düzenlemeniz gerekir. Örneğin, normal menü modülünü varsayılan içerik genişliğinin ötesine genişletmek için normal menüyü içeren satırın genişliğini, maksimum genişliğini ve hizalamasını düzenleyin.
Divi'nin Tam Genişlik Menü Modülünü ve Normal Menü Modülünü Kullanma
Başlamak için Gerekenler
Bu öğreticiyi takip etmek istiyorsanız, Divi Temasını kurup etkinleştirin ve web sitenizde Divi'nin en son sürümünün bulunduğundan emin olun.
Şimdi, başlamaya hazırsınız!
Tam Genişlikte Menü Modülü Tasarlama
Web sitenize yeni bir sayfa ekleyin ve ona bir başlık verin, ardından Divi Builder'ı Kullan seçeneğini seçin.
Bu eğitim için tasarımı sıfırdan oluşturacağız, bu nedenle İnşaya Başla seçeneğini seçin.
İlk kez boş bir sayfa oluşturduğunuzda, normal bir bölümle önceden yüklenmiş olarak gelir. Önce normal bölümün altına tam genişlikte bir bölüm ekleyin.
Ardından, normal bölümü sayfadan silin.
Tam genişlik satırına bir Tam Genişlik Menü modülü ekleyin.
Tam genişlik menüsüne bir arka plan rengi ekleyin.
- Arka plan: #4e7560
Tam genişlik menüsüne bir logo ekleyin.
Ardından, Tasarım sekmesi altındaki Menü Metni seçeneklerine gidin.
- Menü Yazı Tipi: Poppins
- Menü Metin Rengi: #FFFFFF
- Menü Metin Boyutu: 20px
Ardından, Açılır Menü ayarlarına gidin.
- Açılır Menü Arka Plan Rengi: #FFFFFF
- Açılır Menü Satır Rengi: #7EAD70
- Açılır Menü Metin Rengi: #000000
Mobil Menü arka planını ve metin rengini ayarlayın.
- Mobil Menü Arka Plan Rengi: #FFFFFF
- Mobil Menü Metin Rengi: #000000
Ardından Hamburger Menüsü ayarlarını değiştirin.
- Hamburger Menü Simge Rengi: #FFFFFF
- Hamburger Menü Simgesi Yazı Boyutu: 40px
Son olarak, biraz üst ve alt dolgu ekleyin.
- Dolgu-Üst: 10px
- Dolgu-Alt: 10px
Artık tam genişlikli menü modülünüz tamamlandı!
Normal Menü Modülü Tasarlama
Web sitenize yeni bir sayfa ekleyin ve ona bir başlık verin, ardından Divi Builder'ı Kullan seçeneğini seçin.
Sıfırdan inşa etmek için İnşaya Başla'yı seçin.
Sayfa, boş bir normal bölümle önceden yüklenmiş olarak gelir. Bu bölüme bir arka plan rengi ekleyin.
- Arka plan: #4e7560
Ardından, üst ve alt dolguyu çıkarın.
- Dolgu-Üst: 0px
- Dolgu-Alt: 0px
Aşağıda gösterilen düzen ile yeni bir satır ekleyin.
Satır ayarlarında sütun yüksekliklerini eşitleyin.
- Sütun Yüksekliklerini Eşitle: Evet
Gelişmiş sekmesi altındaki Ana Öğe CSS ayarlarında aşağıdaki özel CSS'yi ekleyin.
align-items:center;
En soldaki sütuna bir metin modülü ekleyin. Bunu bir logo yüklemek yerine web sitesi adını görüntülemek için kullanacağız. Bu, normal menü modülünün benzersiz bir avantajıdır, çünkü menü çubuğuna ekstra öğeler eklemek için diğer modüllerin yanında kullanabilirsiniz.
- H1 Metni: “Divi Blog”
Metin Hizalamasını masaüstünde sola ayarlayın.
- Metin Hizalama-Masaüstü: Sol
Metin Hizalamasını tablet ve mobil cihazlarda ortalanacak şekilde ayarlayın.
- Metin Hizalama-Tablet: Merkez
- Metin Hizalama-Mobil: Merkez
Ardından, başlık metni ayarlarına gidin.
- Başlık Yazı Tipi: Poppins
- Başlık Yazı Tipi Ağırlığı: Kalın
- Başlık Metni Rengi: #FFFFFF
- Başlık Metni Boyutu: 40px
Artık “Divi Blog” başlığı hazır olduğuna göre ortadaki sütuna normal menü modülünü ekleyelim.
Arka plan rengini kaldırın.
- Arkaplan: Yok
Ardından, tasarım sekmesine gidin. Düzen altında, stili Ortalanmış olarak değiştirin.
- Stil: Merkezli
Artık menü metin stillerini değiştirebiliriz.
- Menü Yazı Tipi: Poppins
- Menü Metin Rengi: #FFFFFF
- Menü Metin Boyutu: 20px
Açılır menü stillerini de değiştirin.
- Açılır Menü Satır Rengi: #7EAD70
- Açılır Menü Metin Rengi: #000000
Ardından, mobil menü ayarlarını değiştirin.
- Mobil Menü Arka Plan Rengi: #FFFFFF
- Mobil Menü Metin Rengi: #000000
Son olarak, hamburger menü ayarlarını değiştirin.
- Hamburger Menü Simge Rengi: #FFFFFF
- Hamburger Menü Simgesi Yazı Boyutu: 40px
Bu, normal menü modülünün stilini tamamlar. Menü tasarımını tamamlamak için sağ sütuna bir harekete geçirici mesaj düğmesi ekleyelim. İlk olarak, düğme modülünü ekleyin.
Düğme metnini değiştirin.
- Düğme: "Ücretsiz 30 Günlük Deneme"
Düğme hizalamasını merkeze ayarlayın.
- Düğme Hizalama: Merkez
“Düğme için Özel Stilleri Kullan” seçeneğini Evet olarak ayarlayın ve metin rengini değiştirin.
- Düğme için Özel Stilleri Kullan: Evet
- Düğme Metin Rengi: #FFFFFF
Düğme arka planını ayarlayın.
- Düğme Arka Planı: #7EAD70
Fareyle üzerine gelindiğinde düğme arka planını turuncuya ayarlayın.
- Hover'da Düğme Arka Planı: #D19929
Ardından, düğme kenarlığı genişliğini, yarıçapını ve yazı tipini ayarlayın.
- Düğme Kenar Genişliği: 0px
- Düğme Sınır Yarıçapı: 40px
- Düğme Yazı Tipi: Poppins
Son olarak, sol ve sağ dolguyu ayarlayın.
- Dolgu-Sol: 30px
- Dolgu-Sağ:30px
Son sonuç
Şimdi menü modüllerimiz için nihai sonuca bir göz atalım.
Masaüstü: Tam Genişlik Menü Modülü
Masaüstü: Normal Menü Modülü
Mobil: Tam Genişlik Menü Modülü
Mobil: Normal Menü Modülü
Son düşünceler
Umarım bu makale, Divi'nin tam genişlikli menü modülü ile normal menü modülü arasındaki bazı önemli farkları anlamanıza yardımcı olmuştur. Her ikisinin de web siteniz için harika görünen menüler oluşturmak üzere özelleştirilmesi inanılmaz derecede kolaydır. Tam genişlikli menü modülü, sayfanın genişliğini kaplar ve genişliği değiştirmek ve ince ayar yapmak için yerleşik seçeneklerle birlikte gelir. Öte yandan, normal menü modülü diğer modüllerin yanında kullanılabilir ve genişlik ve diğer boyutlandırma seçeneklerinin ayarlanabileceği bir satır içinde bulunur. Web sitenizde tam genişlikte bir menü modülü mü yoksa normal bir menü modülü mü kullanıyorsunuz? Yorumlarda sizden haber almak isteriz!