Masaüstü menü çubuğu & amp;Divi ile hücresiniz
Bugün Divi Post’ta, hücresel tasarımınızı mükemmelleştirmenize yardımcı olacak kısa bir ipucu paylaşacağız. Hepimiz hücresel tasarımınızın masaüstünde olduğu kadar önemli olduğunu biliyoruz, ancak Divi’deki bazı standart ayarlar nedeniyle, tema ayarında yaptığınız tüm değişiklikler masaüstünde olduğu gibi aynı görünmüyor. Bu yazıda yapacağımız şey, özellikle, maksimum logo yüksekliğini ve minimum menü yüksekliğini kullanırken masaüstündeki menü çubuğuyla aynı görünen daha küçük bir hücresel menü çubuğunun nasıl yapılacağını göstermektir. Varsayılan olarak, hücresel ve masaüstündeki ekran farklıdır. Menünün yüksekliğini ve belirli bir logonun maksimum yüksekliğini ayarladığınız için, aynı şeyin hücresel için geçerli olacağı anlamına gelmez.
Hücresel ve Masaüstü İçin Farklılıklar Kasıtlı olarak çok yüksek olmayan yüksekliğe sahip bir ana menü çubuğuna sahip olmayı seçen birçok web sitesi vardır. Sadece daha zarif görünüyor ve daha az yer yiyor, sabit navigasyon kullanırsanız da dikkate alınması gereken bir şey. Temanızın ayarlanmasında yüksek maksimum logo (yani 100) için en yüksek değeri ve menünün yüksekliğinin en düşük değerini seçtiğinizde, masaüstünde aşağıdaki sonuçları alacaksınız:
Logo görüntülerini gizle: Devre Dışı Bırak
Menü Yüksekliği: 30
Max Yüksek Logo: 100
Ek CSS Kodu Yapmamız gereken bir sonraki hücresel menü çubuğu, hücresel menü çubuğunun masaüstündeki menü çubuğuyla aynı görünmesini sağlamak için bazı ek CSS kodu eklemektir. CSS kodunu belirli bir sayfaya (yalnızca belirli bir sayfada böyle bir menüyü görüntülemek istiyorsak) veya tüm web sitelerine eklemeyi seçebiliriz. Genellikle, web sitenizde gereken tutarlılığı korumak için CSS kodunu tüm web sitelerine uygulayacaksınız, ancak bu size bağlıdır. CSS kodunu belirli bir sayfaya CSS kodu eklemek için özel olarak bir sayfaya ekleyin, sayfayı WordPress kontrol panelinizde açmanız gerekir. Bir divi üreticisi kullanırken, içinde aşağıdaki simgeye tıklamalısınız: Daha sonra, aşağıdaki CSS kod satırlarını alıp CSS özel alanına yerleştirebilirsiniz: @media (maks-genişlik: 980px) {
#Page-Container { Dolgu Top: 43px! Önemli;
}
}
@Media (Max-Width: 980px) {
#logo {
Max-Width:%100! Önemli;
Max-Height:%90! Önemli;
}
}
@Media (Max-Width: 980px) {
#Mainheader {
Üst:%4! Önemli;
}
}
@Media (Max-Width: 980px) {
#ET-TOP-Navigation {
Dolgu Top: 5 piksel! Önemli;
}}
.et_header_style_split. mobil_menu_bar,
.et_header_style_left. mobil_menu_bar {
Dolgu Alt: 5px;
}
CSS kodunu diğer tüm olasılıklar web sitelerine ekleyin ve belki de en yaygın olarak kullanılan tüm web sitelerinize kod eklemektir. Bunu yapmanın iki yolu vardır. İlk yöntemin temasını ayarlayarak, temanızın ayarlanmasına CSS kodunu eklemektir. Bunu yapmak için WordPress Dashboard> Ekran> Özelleştirme> Ek CSS> Özel CSS alanına aşağıdaki CSS kod satırlarını yerleştirin: @media (maks-genişlik: 980px) {
#Page-Container {
Dolgu Top: 43px! Önemli;
}
}
@Media (Max-Width: 980px) {
#logo {
Max-Width:%100! Önemli;
Max-Height:%90! Önemli;
}
}
@Media (Max-Width: 980px) {
#Mainheader {
Üst:%4! Önemli;
}
}
@Media (Max-Width: 980px) {
#ET-TOP-Navigation {
Dolgu Top: 5 piksel! Önemli;
}}
.et_header_style_split. mobil_menu_bar,
.et_header_style_left. mobil_menu_bar {
Dolgu Alt: 5px;
}
Bu seçenek, gerçek zamanlı olarak meydana gelen değişiklikleri görmenizi sağlar. Koddaki birkaç şeyi değiştirecek ve değişiklikleri kaydetmeden önce görünümü görmek istiyorsanız, bu muhtemelen en ilginç seçimdir. Tema seçeneği aracılığıyla ikinci yöntem, tema seçeneğine CSS kodu eklemektir. Bunu yapmak için WordPress Dashboard> Divi> Tema seçeneğini açın> Genel sekmesini aşağı kaydırın ve aşağıdaki CSS kodunu özel CSS alanına yerleştirin: @media (maks-genişlik: 980px) {#page-container {
Dolgu Top: 43px! Önemli;
}
@Media (Max-Width: 980px) {
#logo {
Max-Width:%100! Önemli;
Max-Height:%90! Önemli;
}
}
@Media (Max-Width: 980px) {
#Mainheader {
Üst:%4! Önemli;
}
}
@Media (Max-Width: 980px) {
#ET-TOP-Navigation {
Dolgu Top: 5 piksel! Önemli;
}}
.et_header_style_split. mobil_menu_bar,
.et_header_style_left. mobil_menu_bar {
Dolgu Alt: 5px;
}
Kodu kendi tercihinize göre değiştirin, elbette, mobil menü çubuğunu böyle göstermenin tek yolu bu değildir. Tema ayarındaki ana menü çubuğuna farklı ayarlar uygularsanız, büyük olasılıkla CSS kodunda değişiklik yapmanız gerekir. Ancak, kullanacağınız CSS sınıfı ve ID CSS aynıdır. Ancak, dikkate almanız gereken şeylerden biri, sayfa konteynerindeki pedlerdir. CSS kodumuzda belirlediğimiz değer, yaptığımız diğer değişikliklerle eşleşir. Ancak, diğer sınıflardaki değeri değiştirirseniz, üst dolgunun doğru kaldığından emin olmalısınız. Bunu yapmanın en kolay yolu, daha yüksek bir değerle başlamak ve onun yerine yüklü sayfa kapsayıcısını görene kadar değeri değiştirmektir.
Sonuçlar Bu eğitimi adım adım izlediyseniz, mobil menü çubuğunuz için aşağıdaki sonuçları elde edebilmeniz gerekir: masaüstünde aldığınız sonuçlarla neredeyse aynı görünen:
Herhangi bir CSS değişikliği yapmadan önce, hücresel sonuçlar şuna benzer: Bu yazıdaki son zihin, hücresel menü bıçaklarınızı nasıl daha küçük hale getireceğinizi ve masaüstüne menü çubuğunu nasıl sığdıracağınızı gösterdik.Bu yöntem işlevini yapmak için gerekli CSS kodunu belirli bir sayfaya veya tüm web sitelerine ekleyebilirsiniz.Sorularınız veya önerileriniz varsa;Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
