Divi web sitenizde üst üste binen standart ve dikey navigasyon nasıl yapılır
Bu yazıda, standart ve dikey navigasyonu nasıl birleştireceğinizi göstereceğiz. Daha özel; İkincil bir menü ve altbilginin web sitenizde dikey navigasyon ile örtüşme nasıl yapılır. Bu, en iyi navigasyon veya dikey navigasyon arasında seçim yapmanız gerekmediği anlamına gelir; İkisini de yapabilirsin! Ana menüyü ve ikincil menüyü temanızın ayarlanmasındaki isteklerinize göre ayarlayabilirsiniz, bu yazıda açıkça başarmanıza yardımcı olacağımız değil. Aşağıdakileri yapma sürecinde yardımcı olan aşağıdaki şeyleri göstermeyi tercih ediyoruz:
İkincil menünüzün dikey navigasyonunuzla nasıl örtüşmesini sağlayabilirsiniz
Kaydırma sırasında ikincil menünüzü nasıl onarırsınız
Dikey navigasyonunuzla altbilginizin nasıl örtüşmesini sağlayabilirsiniz
Bu, web sitenizde standart ve dikey navigasyon arasında iyi bir denge oluşturmanıza yardımcı olacak her şeydir. Standart ve dikey navigasyon örtüşerek, web siteniz dikey navigasyonun egemen olduğu gibi hissetmeyecektir. Web sitenizdeki ana içerik dikey navigasyona ayarlanacaktır, ancak ikincil menü ve altbilgi dikey navigasyon etkinleştirilmediğinde aynı şekilde davranacaktır.
Sonuçlar Bu öğreticinin sonunda, dikey navigasyon kullanan web sitelerinde aşağıdaki sonuçları elde edebileceksiniz:
Yuvarlanırken ikincil menü yuvarlandı. Bu, web sitesine biraz iyi bir dokunuş sağlar ve ikincil menüdeki içeriğe odaklanmaya yardımcı olur. Alex Brands bir E-Niaga web sitesidir ve ikincil bir menü, insanlara alışveriş sepetlerinde ne olduğunu ve sundukları teklifleri hatırlatmaya yardımcı olur. Bu tür dikey navigasyon, E-Niaga web sitesi için çok ilginçtir. Dikey navigasyon, ziyaretçilerin web sitesinde sunulan çeşitli ürün kategorileri arasında gezinmesini kolaylaştırır. Menü öğesini dikey navigasyondayken takip etmek daha kolaydır, çünkü insanların geçmesi gereken bir liste olarak yorumlamak daha kolaydır. Divi web sitenizde standart ve dikey navigasyonun üst üste binmesini nasıl yapılır, Standart Navigasyonunuzu dikey navigasyonla nasıl örtüşmesini göstereceğimiz bölüme girmeden önce YouTube Kanalı Genel Adımlarımıza abone olunur, özellikle eskiden genel adımlardan geçeceğiz. Bu genel adımlar, üst üste binmeden önce geçmeniz gereken temeldir. Daha fazla olgunluk olmadan; Başlayalım. Menü oluşturun ve menü öğeleri ekle Yapmanız gereken ilk şey (yapmadıysanız) web sitenize menüler ve menü öğeleri eklemektir. Bu, dikey navigasyonunuzda görünecek bir menü öğesidir. Web sitenize yeni bir menü eklemek için WordPress Gösterge Tablosu> Ekran> menüsünü açın. Bu sayfada bulunduktan sonra yeni menü başlığınızı verin ve menüyü oluşturun. Menü öğeleri eklemeye ve ana menünüzü yapmaya devam edin.
Sosyal simgeyi ikincil menüye ekleyin Yapmanız gereken bir sonraki şey ikincil menünüzü etkinleştirmektir. Web sitenizde ikincil bir menü göründüğünden emin olmak için ikincil menünüzde etkinleştirilmiş bir öğeye sahip olması gerekir. Bu yazıda sadece sosyal medya simgeleri ekleyeceğiz, ancak elbette istediğiniz her şeyi ekleyebilirsiniz. İkincil menüyü etkinleştirmek ve sosyal simgeleri görüntülemek için WordPress Dashboar> Ayarlama> Başlık ve Navigasyon> Başlık Elemanları> ‘Social Ikon’u Göster’ seçeneğini etkinleştirerek başlayın. Dikey Navigasyonu Etkinleştir Atmanız gereken bir sonraki adım, divi üreticinizdeki dikey navigasyonu etkinleştirmektir. Bunu yapmak için WordPress Gösterge Tablosunu Aç> Ekran> Özelleştirme> Başlık ve Navigasyon> Başlık Biçimi> Dikey Navigasyonu Etkinleştirin. Ayrıca, dikey navigasyonunuzu nerede görüntülemek istediğinizi de seçebilirsiniz; Web sitenizin sol veya sağ tarafında. Ana menünüz için sabit gezinmeyi devre dışı bırakın Gelişmiş değişikliklere geçmeden önce yapılacak son bir şey vardır: ana menünüz için sabit gezinmeyi devre dışı bırakma. Ana menüyü devre dışı bıraktıysanız, bu adımı geçin. Ancak, ana menünüz tam olarak onarılmışsa, WordPress> Divi> Divi> Tema seçeneğini açın ve sabit navigasyonu devre dışı bırakın.
Standart ve dikey navigasyonu birleştirin Bu yazının bir sonraki bölümünde, standart ve dikey navigasyonunuzu normalden farklı bir şeye nasıl yapacağınızı göstereceğiz. Dikey navigasyon hakkında konuşurken, ekranı kapsadığını görmeye alışkınız. İkincil menüler ve altbilgiler, varsayılan olarak dikey navigasyondan geçmez. Ancak bazı durumlarda, ikincil navigasyon ve altbilginin dikey navigasyonun üzerinde olmasını sağlamak istiyoruz. Bu şekilde, dikey navigasyona bağlı olan tek şey ana içeriktir. Web siteniz tamamen iki yere bölünmüş gibi hissetmeyecektir; Dikey navigasyon ve artık web siteleri.
CSS kodunu tema seçeneğine ekleyin CSS kodunu iki şekilde ekleyebilirsiniz: Divi Tema seçeneği aracılığıyla veya temaları ayarlayarak. Kodu tema seçeneğine eklemek için WordPress Dashboard> Divi> Tema seçeneğini açın> Genel> Aşağıdaki sekmeyi aşağı kaydırın ve aşağıdaki CSS kodunu özel CSS kutusuna yapıştırın: @media ekran ve (min-width: 769px) {.et_vertical_nav #top -Header, .loaded.et_vertical_nav #üst-başlık {Margin-Left: 0! Önemli; Z-index: 10000; Konum: Sabit;Genişlik:%100;
}
.et_vertical_nav #play-header {
Pozisyon: Mutlak;
Z-Index: 1! Önemli;
Taşma: gizli;
}
#Et-Main-Earea {
Genişlik: Otomatik! Önemli;
}
#Main-footer {
Marj -Sol: -225px! Önemli;
Sol: 0! Önemli;
Z-Index: 1000! Önemli;
Pozisyon: Mutlak;
Genişlik:%117.4;
Yükseklik: Otomatik;
}}
CSS Kodunu Ekle Ayarlamaya sahip olduğunuz diğer olasılıkların teması, tema ayarına CSS kod satırını eklemektir. Bunu yapmak için WordPress Dashboard> Ekran> Özelleştirme> Ek CSS> ve Stict CSS satırını Özel CSS alanına açın: @media ekran ve (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_nertical_nav # {
Marj-sol: 0! Önemli;
Z-index: 10000;
Konum: Sabit; Genişlik:%100;
}
.et_vertical_nav #play-header {
Pozisyon: Mutlak;
Z-Index: 1! Önemli;
Taşma: gizli;
}
#Et-Main-Earea {
Genişlik: Otomatik! Önemli;
}
#Main-footer {
Marj -Sol: -225px! Önemli;
Sol: 0! Önemli;
Z-Index: 1000! Önemli;
Pozisyon: Mutlak;
Genişlik:%117.4;
Yükseklik: Otomatik;
}}
