Divi’de duyarlı gezinme menünüzü onarın
Tüm ekran boyutlarında harika görünen duyarlı bir gezinme menüsü yapmak zor olabilir.Umarım çok önemli değildir, ancak navigasyon genellikle sitenizin her sayfasının üstünde olduğu için, her sayfada görülen ilk şey budur.Bu yüzden doğru yapmak önemlidir.Neyse ki, Divi temasının ayarlanması, ana menüyü oldukça havalı bazı başlık seçenekleriyle ayarlamanızı sağlar.Ancak, soldaki logo ve sağdaki menü bağlantıları bulunan varsayılan menü stili için, özellikle başlığı dolduran çok fazla bağlantınız varsa, işler daha küçük ekran boyutlarında kolayca karıştırılabilir.Sık sık başıma geldiğini biliyorum.Masaüstü için doğru aranan menüyü aldım ve daha sonra tablette (özellikle iPad Pro) kontrol ediyorsunuz ve menü logosu örtüşüyor ve bazı bağlantılar tek bir satırın altına atladı.
Bugün, kalabalık bir navigasyon menüsü için bazı yararlı çözümler sunacağım, böylece çok yaygın olmayan ekran boyutlarında bile iyi görünüyor. Ancak, en azından bazı kullanıcılar için, sitenizin güvenilirliği buna bağlıdır. Başlayalım. Divi’de Duyarlı Gezinme Menüsünüzü Onarma YouTube Kanal Dört Çözümlerimize Abone Olma Kalabalık Navigasyon Menüsü için Divi ile ilgili en güzel şeylerden biri, medya sorgularını kullanan pürüzsüz bir ızgara düzeni üzerine inşa edilmesidir (CSS bölümlere ayrılmıştır). Ekran boyutu için siteniz farklı. Bu ayarlamanın yapıldığı nokta, kesme noktaları dediğimiz şeydir. Ana gezinme menünüzü tüm ekran boyutlarında mükemmelleştirmeye kararlıysanız, bir medya sorgusu kullanarak bir özelleştirme menüsü kullanmanız ve belirli geçici durdurma noktalarını ayarlamanız gerekir. Varsayılan Divi Gezinme menüsünü kullanırken karşılaştığım en yaygın sorunlardır. Müşteri birçok menü öğesini en üst düzey istediğinde. Ana gezinme menüsünde 5’ten fazla menü öğesi (veya büyük bir yazı tipi menüsü öğesine sahip) vardır, ekran boyutu 980-1100 piksele (küçük dizüstü bilgisayar boyutları ve büyük tabletler) ulaştığında genellikle satır ve logolar büyütür. Eminim bu sorunu daha önce hiç fark etmemiş olsanız bile. Bu şuna benziyor:
Uygun değil. Öyleyse bu sorunun dört çözümüne bakalım.
Bu seçeneği ayarlarken dikkatli olun, çünkü kolay iyileştirmeler oluşturmak için logonuzun veya menü öğenizin tasarımını ve okunabilirliğini feda etmek istemezsiniz. Çözüm #3: Yeni kesme noktasında hücresel menüleri görüntüler. Divi’deki her bir kırılma noktası için genel bir aralık: Büyük masaüstü: 1405px – üst masaüstü standart: 1100px ile 1405px dizüstü bilgisayarlar ve büyük tabletler: 980px ve 1100px arasında tablet: 768 piksel ve 980 piksel akıllı telefon ve küçük tablet arasında: 320 piksel ve 768 piksel; Akıllı telefon: 320 piksel ve 480 piksel arasında; Varsayılan gezinme menüsünün hücresel bir menüye (hamburger navigasyonu ile) dönüştüğü geçici durdurma noktası 980px’dir. 980 pikselden daha az olan herhangi bir ekran boyutu hücresel bir menü görüntülenir. Ancak, garip menü satırı kırılmalarından kaçınmak istiyorsanız, kesme noktasını farklı değerlerle değiştirirsiniz. 980 piksel değil, 1024 piksel civarında bir hücresel menü görüntülemek istediğinizi varsayalım. Bunu yapmak için, Divi’deki varsayılan stili değiştirmek için medya sorgusuna bazı özel CSS girmeniz gerekir. Ayarlama Teması> Ek CSS ve aşağıdakileri girin: @Media (maks-genişlik: 1024px) {#et_mobile_nav_menu { Ekran bloğu;
}
#Top-Menu {
Görüntü yok;
}
}
Bu medya sorguları iki şey yapıyor. Sıradan bir menüyü gizler ve Breakpoint 1024px’de hücresel bir menü görüntüler.
Çözüm #4: Menü stilini belirli bir kesme noktasında ayarlamak Bu çözüm en iyi seçenek olabilir, çünkü menünüz üzerinde belirli bir kesme noktasında en büyük kontrole sahip olmanızı sağlar. Medya sorgularınızda özel bir stil oluşturmak için CSS sınıfını kullanarak menü öğenizi hedefleyebilirsiniz. İşte menü öğeniz için CSS varsayılan divi: #Top-Menu Li {
Ekran: satır içi blok; Dolgu-sağ: 22px; yazı tipi boyutu: 14px;
}
Yazı tipi menü boyutunuzu varsayılan olarak 18px’e istediğinizi ancak belirli bir kesme noktasında 14 piksel olarak değiştirmek istediğinizi varsayalım. Ve daha fazla alan tasarruf etmek için dolguyu 22 piksel değil, 15px’e düşürebilirsiniz. Bunu tüm menü öğeleri için CSS sınıfını hedefleyerek ve medya sorguları yaparak yapabilirsiniz.
Tema Ayarını Aç> Ek CSS ve aşağıdakileri girin:
@Media (Max-Width: 1200px) {
#Top-Menu Li, #Top-Menu Li A {
yazı tipi boyutu: 14px;
dolgu suyu: 15px;
}
}
CSS’nin yaptığı şey, yazı tipi boyutunu 14 piksel ve sağ dolguyu 1200 piksel ekranda veya daha düşük seviyede değiştirmektir. Bu, masaüstündeki ekran boyutunu ayarlarken düzgün bir geçiş oluşturur ve büyük bir tablette ve küçük bir dizüstü bilgisayarda varsayılan gezinmeyi korumanızı sağlar. Diğer başlık stillerini ayarlama Divi tema ayarında seçilecek beş başlık stili vardır (dahil değil dikey navigasyon). Varsayılan (bu yazıda tartışılan) slayt, tam ekran, ortalanmış ve ortalanmış satır içi logo dahil olmak üzere beş stil.
Tam slayt stili ve tam ekran Tam bir slayt veya ekran stili için bir web sitesi tasarımı istiyorsanız, duyarlı menünüz oldukça kolaydır, çünkü hücresel navigasyon hamburger simgesi tüm ekran boyutlarında menüleri tetiklemek için kullanılır.
Merkezi stil merkezi bir stil kullanıyorsanız, nefes almak için menü öğeniz için daha fazla alana sahipsiniz, ancak yine de daha fazla alana ihtiyacınız varsa, istediğiniz gibi görünmesini sağlamak için varsayılan stil için kullandığımız özel çözümü kullanabilirsiniz.
Bu çözüm, logoyu istediğiniz yere almak için ihtiyacınız olan şey olabilir. Küçük ayarlamayı yapmak için “hakkımızda” gibi bir şeyi “hakkında” ya da tam tersi değiştirerek kaçabilirsiniz. Ancak, mükemmeliyetçi iseniz bu sizi biraz hayal kırıklığına uğratabilir (tadını çıkarabilirim. İnanın.) Yani, daha fazla ayar yapmak istiyorsanız yapabileceğiniz daha derin bir ayar seviyesi vardır. Logonun orta noktasını ayarlamak için menü öğesindeki gerçek metni ayarlamak yerine, herhangi bir öğeye özel bir CSS sınıfı ekleyebilir ve sağa veya sola birkaç ped verebilirsiniz. Bu, her şeyi ortalaması için ihtiyacınız olan son baskıyı verecektir. WordPress kontrol panelinden, görünüm> menüleri açın ve ekran seçenekleri alanında kontrol edilen bir CSS sınıfına sahip olduğunuzdan emin olun. Ardından, hedeflemek istediğiniz menü öğesini açın. Ardından CSS sınıfını CSS sınıfı giriş kutusuna girin. Bana “cesaret” dedim. Bundan sonra, Divi> Tema Özelleştirici> Ek CSS’yi açın ve aşağıdaki özel CSS’yi ekleyin: #Top-Menu Li.Nudge {PADDING-RITH: 32PX; } Bu CSS ile, yalnızca “Nudge” sınıfına sahip öğelere 32 piksel sağ dolgu verilir; Onu ortalaması için yeterli logo itti. İşte burada! Divi’nin kapanış zihni, bir web sitesinin yapımını eğlenceli ve kolay hale getirir. Ancak bazen, iş talepleri (ve müşterilerimiz), sitemizin iyi olmasını sağlamak için daha fazla çalışmamızı gerektirir. Ve iyi bir siteyi harika bir siteden ayıran şey küçük detaydır. Duyarlı gezinme menünüzün nasıl çalıştığı, geliştirmek istediğiniz önemli ayrıntılardan biridir. Çoğu zaman, kullanıcınızın sitenizin her sayfasında göreceği ve kullanacağı ilk şeydir. Hasarlı görünen menü ilk izlenim bırakabilir. Umarım bu yazı sizi doğru yöne “itmeye” yardımcı olur (üzgünüm geri tutamazsınız :)). Eminim bu yazıda tartışmadığım daha fazla sorun ve çözüm var. Yorumlarda yayınlamaktan çekinmeyin. Sizden haberleri duymayı umuyorum. Kızarmış ekmek!
