Divi Web Sitenizde Standart ve Dikey Navigasyon Örtüşmesi Nasıl Yapılır?

Bu gönderide, standart ve dikey gezinmeyi nasıl birleştireceğinizi göstereceğiz. Daha spesifik olarak; ikincil menü ve altbilginin web sitenizdeki dikey gezinmeyle nasıl örtüşeceği. Bu, bir üst gezinme veya dikey gezinme arasında seçim yapmak zorunda kalmayacağınız anlamına gelir; ikisini de yapabilirsin! Birincil menüyü ve ikincil menüyü Tema Özelleştiricinizde istediğiniz gibi şekillendirebilirsiniz, bu gönderide açıkça elde etmenize yardımcı olacağımız şey bu değil. Bunun yerine, size aşağıdakileri yapma sürecinde yardımcı olacak aşağıdaki şeyleri göstereceğiz:

• ikincil menünüzü dikey gezinmenizle nasıl örtüştürürsünüz
• kaydırırken ikincil menünüzü nasıl sabitlersiniz
• altbilginizi dikey gezinmenizle nasıl örtüştürürsünüz

Bunlar, web sitenizdeki standart ve dikey gezinme arasında güzel bir denge oluşturmanıza yardımcı olacak şeylerdir. Standart ve dikey gezinmeyi örtüştürerek, web siteniz dikey gezinmenin egemenliği altındaymış gibi hissetmeyecektir. Web sitenizdeki ana içerik kendisini dikey gezinmeye göre ayarlayacaktır, ancak ikincil menü ve alt bilgi, dikey gezinme etkinleştirilmediğinde aynı şekilde davranacaktır.

Sonuç

Bu öğreticinin sonunda, dikey gezinmeyi kullanan bir web sitesinde aşağıdaki sonucu elde edebileceksiniz:

Örtüşen Standart ve Dikey Navigasyon için İlham

Önceki bir gönderide, dikey gezinmeyi kullanan bazı web sitesi örneklerini paylaştık. Tüm örnekler bize çok sık kullanılmayan bir Divi seçeneğiyle ne kadar yaratıcı olabileceğinizi gösterdi. Web sitenizde üzerinde düşünülmüş bir dikey gezinme, ziyaretçileriniz ile elde etmeye çalıştığınız ekstra etkileşimi sağlayabilir.

Örnekleri gösterirken, size belirli sonuçlara nasıl ulaşacağınızı göstermek için bize ilham veren bazı yorumlar vardı. Bu gönderi, çözümleri kendiniz aramak zorunda kalmadan web sitenizde nasıl bazı ince ayarlar yapabileceğinizi gösteren ilhama dayalı eğitimlerden biridir.

Sayfanın üst kısmındaki ikincil menüyü ve sayfanın sol tarafında dikey gezinmeyi kullanan Alex Brands web sitesinden ilham aldık.

Kaydırma sırasında ikincil menü kayar. Web sitesine bu hoş ekstra küçük dokunuşu verir ve ikincil menüdeki içeriğe odaklanmaya yardımcı olur. Alex Brands bir e-ticaret sitesidir ve sabit ikincil menü, insanlara alışveriş sepetlerinde ne olduğunu ve sundukları fırsatları hatırlatmaya yardımcı olur.

Bu tür dikey gezinme, özellikle e-ticaret web siteleri için ilgi çekicidir. Dikey gezinme, ziyaretçilerin web sitesinde sunulan farklı ürün kategorileri arasında gezinmesini kolaylaştırır. İnsanların geçmesi gereken bir liste olarak yorumlanması daha kolay olduğu için, menü öğelerini dikey bir navigasyona yerleştirildiğinde takip etmek daha kolaydır.

Divi Web Sitenizde Standart ve Dikey Navigasyon Örtüşmesi Nasıl Yapılır?

Youtube Kanalımıza Abone Olun

Genel Adımlar

Standart navigasyonunuzu dikey navigasyonunuzla nasıl örtüştüreceğinizi göstereceğimiz kısma girmeden önce, ilk olarak genel adımlardan geçeceğiz. Bu genel adımlar, örtüşmeyi uygulamadan önce geçmeniz gereken temeldir.

Daha fazla ödeme yapmadan; başlayalım.

Menünüzü Oluşturun ve Menü Öğeleri Ekleyin

Yapmanız gereken ilk şey (bunu henüz yapmadıysanız) web sitenize bir menü ve menü öğeleri eklemektir. Bunlar, dikey navigasyonunuzda görünecek menü öğeleridir. Web sitenize yeni bir menü eklemek için WordPress Panonuz > Görünüm > Menüler'e gidin. Bu sayfada olduğunuzda, yeni menünüze bir başlık verin ve menüyü oluşturun.

Menü öğeleri ekleyerek ve bunu birincil menünüz yaparak devam edin.

İkincil Menüye Sosyal Simgeler Ekle

Yapmanız gereken bir sonraki şey, ikincil menünüzü etkinleştirmek. İkincil menünün web sitenizde görünmesini sağlamak için ikincil menünüzün etkinleştirilmiş bir öğesi olmalıdır. Bu gönderide yalnızca sosyal medya simgelerini ekleyeceğiz, ancak elbette istediğinizi ekleyebilirsiniz.

İkincil menüyü etkinleştirmek ve sosyal simgelerin görünmesini sağlamak için WordPress Panonuz > Özelleştir > Başlık ve Gezinme > Başlık Öğeleri > 'Sosyal Simgeleri Göster' seçeneğini etkinleştirerek başlayın .

Dikey Navigasyonu Etkinleştir

Atmanız gereken bir sonraki adım, Divi oluşturucunuzda dikey gezinmeyi etkinleştirmektir. Bunu yapmak için WordPress Panonuz > Görünüm > Özelleştir > Başlık ve Gezinme > Başlık Biçimi > Dikey gezinmeyi etkinleştir seçeneğine gidin.

Bunun yanı sıra, dikey navigasyonunuzun nerede görünmesini istediğinizi de seçebilirsiniz; web sitenizin sol veya sağ tarafında.

Birincil Menünüz İçin Sabit Gezinmeyi Devre Dışı Bırakın

Gelişmiş değişikliklere geçmeden önce yapılacak son bir şey kaldı: birincil menünüz için sabit navigasyonu devre dışı bırakmak. Birincil menüyü zaten devre dışı bıraktıysanız bu adımı atlayın. Bununla birlikte, birincil menünüz şu anda sabitse, WordPress Panonuz > Divi > Tema Seçenekleri > bölümüne gidin ve sabit gezinmeyi 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 dönüştüreceğinizi göstereceğiz. Dikey navigasyon söz konusu olduğunda, ekranın bir kısmının onun tarafından kaplandığını görmeye alışkınız. İkincil menü ve alt bilgi, varsayılan olarak dikey gezinmeyi geçmeyecektir.

Ancak bazı durumlarda, ikincil gezinme ve altbilginin dikey gezinmenin üstünde olduğundan emin olmak istiyoruz. Bu şekilde, dikey gezinmeye bağlı olacak tek şey ana içeriktir. Web siteniz tamamen ikiye bölünmüş gibi görünmeyecek; dikey gezinme ve web sitesinin geri kalanı.

Tema Seçeneklerine CSS Kodu Ekle

CSS kodunu iki şekilde ekleyebilirsiniz: Divi'nin Tema Seçenekleri veya Tema Özelleştirici aracılığıyla. Kodu Tema Seçeneklerine eklemek için WordPress Panonuz > Divi > Tema Seçenekleri > Genel > Sekmeyi aşağı kaydırın ve aşağıdaki CSS kodu satırlarını Özel CSS kutusuna yapıştırın:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Tema Özelleştiriciye CSS Kodu Ekleyin

Sahip olduğunuz diğer olasılık, CSS kod satırlarını Tema Özelleştiriciye eklemektir. Bunu yapmak için WordPress Panonuz > Görünüm > Özelleştir > Ek CSS'ye gidin > Ve CSS satırlarını Özel CSS alanına yapıştırın:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

Son düşünceler

Bu gönderide, web sitenizde standart ve dikey gezinmeyi nasıl birleştireceğinizi gösterdik. Daha kesin; ikincil menünün ve altbilginin dikey gezinmenizle nasıl örtüşeceğini ve ikincil menünüzü nasıl sabitleyeceğinizi gösterdik. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde bir yorum bırakmaktan çekinmeyin!

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!

Line design / Shutterstock.com tarafından Öne Çıkan Görsel