Masaüstü ve Mobil Menü Çubuğunuzu Divi ile Nasıl Eşleştirebilirsiniz?

Bugünkü Divi gönderisinde, mobil tasarımlarınızı geliştirmenize yardımcı olacak hızlı bir ipucu paylaşacağız. Mobildeki tasarımınızın masaüstündeki kadar önemli olduğunu hepimiz biliyoruz, ancak Divi'deki bazı standart ayarlar nedeniyle, Tema Özelleştirici'de yaptığınız tüm değişiklikler Masaüstünde mobil cihazlarda olduğu gibi görünmüyor.

Bu yazıda özellikle yapacağımız şey, maksimum logo yüksekliği ve minimum menü yüksekliği kullanıldığında masaüstündeki menü çubuğuyla aynı görünen daha küçük bir mobil menü çubuğunun nasıl oluşturulacağını göstermektir. Varsayılan olarak, mobil ve masaüstündeki görünüm farklıdır. Belirli bir menü yüksekliği ve logo maksimum yüksekliği ayarlamış olmanız, aynı şeyin mobil cihazlar için de geçerli olacağı anlamına gelmez.

Mobil ve Masaüstü Farkı

O kadar yüksek olmayan bir birincil menü çubuğuna sahip olmayı kasten seçen birçok web sitesi var. Sadece daha zarif görünüyor ve daha az yer kaplıyor, bu da sabit navigasyon kullanıyorsanız kesinlikle dikkate alınması gereken bir şey.

Tema Özelleştiricinizde Logo Maks Yüksekliği (100 olan) için en yüksek değeri ve Menü Yüksekliği için en düşük değeri (30 olan) seçtiğinizde, masaüstünde aşağıdaki sonucu alırsınız:

Ancak, logo ve menü yüksekliğinin oranları mobil için farklıdır. Logo Maks Yüksekliği için en yüksek değeri ve Menü Yüksekliği için en düşük değeri seçtiyseniz, masaüstündekiyle aynı sonucu elde edemezsiniz. Alacağınız sonuç bunun yerine şöyle görünür:

Sonuç

Şimdi yapacağımız şey, aynı düzeni mobil menü çubuğunuza nasıl uygulayacağınızı göstermek. Bu, logonun menüde maksimum yüksekliğine sahip olacağı anlamına gelir. Bunun yanı sıra, menü çubuğunun kendisi çok daha küçük olacaktır. Sonunda, sayfanızdaki içeriğin görünmesi için ekranda daha fazla yeriniz olacak.

Bu öğreticiyi adım adım izledikten sonra aşağıdaki sonucu elde edeceksiniz:

Açıkçası daha çok masaüstü sürümüne benziyor:

Masaüstü ve Mobil Menü Çubuğunuzu Divi ile Nasıl Eşleştirebilirsiniz?

Youtube Kanalımıza Abone Olun

Birincil Menü Çubuğu Ayarları

Yapacağımız ilk şey, Tema Özelleştirici içindeki Birincil Menü Çubuğunda gerekli değişiklikleri yapmak. WordPress Kontrol Panelinizdeyseniz, Görünüm > Özelleştir > Başlık ve Gezinme > Birincil Menü Çubuğu'na gidin ve aşağıdaki ayarların geçerli olduğundan emin olun:

• Logo Resmini Gizle: Devre Dışı Bırak
• Menü Yüksekliği: 30
• Logo Maksimum Yükseklik: 100

Mobil Menü Çubuğu Ek CSS Kodu

Bir sonraki yapmamız gereken şey, mobil menü çubuğunun masaüstündeki menü çubuğuyla aynı şekilde görünmesini sağlamak için bazı ek CSS kodları eklemek. CSS kodunu belirli bir sayfaya (menüyü sadece belirli sayfalarda bu şekilde göstermek istiyorsak) veya tüm web sitesine eklemeyi seçebiliriz. Genellikle, web sitenizde gerekli tutarlılığı korumak için CSS kodunu tüm web sitesine uygularsınız, ancak bu size kalmış.

Özellikle Bir Sayfaya CSS Kodu Ekleyin

CSS kodunu özellikle bir sayfaya eklemek için, sayfayı WordPress kontrol panelinizde açmanız gerekir. Divi oluşturucuyu kullanırken, içindeki aşağıdaki simgeye tıklamanız gerekir:

Ardından, aşağıdaki CSS kod satırlarını alıp Özel CSS alanına yerleştirebilirsiniz:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Tüm Web Sitesine CSS Kodu Ekleyin

Diğer olasılık ve muhtemelen en çok kullanılacak olanı, kodu web sitenizin tamamına eklemektir. Bunu yapmanın iki yolu var.

Tema Özelleştirici Aracılığıyla

İlk yöntem, CSS kodunu Tema Özelleştiricinize eklemektir. Bunu yapmak için WordPress Panonuz > Görünüm > Özelleştir > Ek CSS > Özel CSS alanına aşağıdaki CSS kodu satırlarını yerleştirin:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Bu seçenek, değişiklikleri gerçek zamanlı olarak görmenizi sağlar. Koddaki bazı şeyleri değiştirecekseniz ve değişiklikleri kaydetmeden önce nasıl göründüğünü görmek istiyorsanız, bu muhtemelen en ilginç seçimdir.

Tema Seçenekleri Aracılığıyla

İkinci yöntem, CSS kodunu Tema Seçeneklerine eklemektir. Bunu yapmak için WordPress Panonuz > Divi > Tema Seçenekleri > Genel sekmesine gidin ve aşağıdaki CSS kodunu Özel CSS alanına yerleştirin:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Kodu Kendi Tercihlerinize Göre Değiştirin

Tabii ki, mobil menü çubuğunu böyle göstermenin tek yolu bu değil. Tema Özelleştirici'deki Birincil Menü Çubuğunuza farklı ayarlar uyguluyorsanız, büyük olasılıkla CSS kodunda da değişiklik yapmanız gerekecektir. Ancak kullanacağınız CSS Sınıfları ve CSS Kimlikleri aynıdır.

Yine de kesinlikle hesaba katmanız gereken şeylerden biri, sayfa kabının üst dolgusudur. CSS kodumuzda atadığımız değer, yaptığımız diğer değişikliklerle eşleşiyor. Ancak, diğer sınıflardaki değerleri değiştirirseniz, üst dolgunun doğru kaldığından emin olmanız gerekir. Bunu yapmanın en kolay yolu, daha yüksek bir değerle başlamak ve sayfa kapsayıcısının yerine oturduğunu görene kadar değeri değiştirmektir.

Sonuç

Bu öğreticiyi adım adım izlediyseniz, mobil menü çubuğunuz için aşağıdaki sonucu elde etmiş olmanız gerekir:

Bu, masaüstü bilgisayarlarda elde ettiğiniz sonuçla neredeyse tamamen aynı görünüyor:

Herhangi bir CSS değişikliği yapmadan önce, Mobil'deki sonuç şöyle görünür:

Son düşünceler

Bu gönderide, mobil menü çubuğunuzu nasıl küçülteceğinizi ve masaüstündeki menü çubuğuna nasıl sığdıracağınızı gösterdik. Bu yöntemin çalışması için gerekli CSS kodunu belirli bir sayfaya veya tüm web sitesine ekleyebilirsiniz. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bıraktığınızdan emin olun!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!