Divi web sitenizin çakışan şeffaf dikey navigasyon nasıl yapılır
Bugünün Divi öğreticisinde, esas olarak web sitenizde dikey navigasyon ile özel bir şey yapmaya odaklanacağız. Divi teması ile sağlanan dikey navigasyon seçenekleri. Sıklıkla kullanılmasa da, web sitenizin görünümünü ve tam hissini değiştirebilir ve istediğiniz seviyeye getirebilir. Dikey navigasyonunuzu eskisinden daha özel hale getirmenize yardımcı olmak için şeffaf hale getireceğiz. Ayrıca, şeffaf menünün tüm web sitelerinizle örtüşmesini de sağlayacağız. Şu anda, dikey navigasyona sahip birçok web sitesi görmüyoruz. Ancak bazı durumlarda, inanılmaz sonuçlar sağlayabilir. Önceki yayınlarımızdan birinde, web tasarımlarını mükemmelleştirmek için dikey navigasyon kullanan 12 Divi web sitesi örneğini gösterdik.
Dikey navigasyonun web sitenizle örtüşmesini sağladığınızda, şeffaf bir arka plan rengi kullanmak önemlidir. Şeffaf arka plan renkleri kullanmıyorsanız, dikey navigasyon web sitenizdeki bazı içeriklerle örtüşebilir. Web sitenizin içeriğine ana odaklanmayı ortadan kaldırmak istemezsiniz ve aynı zamanda örtüşmek istemezsiniz. Gerçekten ne demek istediğimizi göstermek için, size nasıl yapılacağını göstereceğimiz zarif ve basit bir örnek yaptık. Adım adım, aşağıdaki sonuçları elde etmek için gereken çeşitli adımlarda size rehberlik edeceğiz.
Bugünün nihai sonuçları: Basit ve zarif dikey menü
Tema Ayarında Tasarım Ayarlarınızı Seçin Şimdi hala tema ayarındasınız, tüm dikey gezinme ayarlarını üst navigasyonu değiştirirken aynı şekilde ayarlayabilirsiniz. Header & Navigation> Ana Menü> ve ana menünüzde yapmak istediğiniz tüm değişiklikleri oluşturun. Bu bölümde, 1’den az bir opaklığa sahip bir menü arka plan rengi sağlamak önemlidir, tercihen 0,5’ten daha az. Bunun arka plan rengini uyguladığından emin olun. Aynı şeyin açılır menünün arka plan rengine uygulanmasını istiyorsanız, orada aynı rengi seçin.
CSS kodunu ekleyin Dikey navigasyon tasarımı bölümünde istenen tüm değişiklikleri yaptıktan sonra CSS bölümüne geçebilirsiniz. Zaten tema ayarında olduğumuz için, oraya özel bir CSS kodu ekleyeceğiz. Elbette CSS kodunu belirli bir sayfaya veya tema seçenekleriniz aracılığıyla ekleyebilirsiniz. Size vereceğimiz CSS kodu iki şey yapabilirsiniz. Her şeyden önce, bu şeffaf dikey navigasyon sağlar ve web siteniz çakışır. İkincisi, bu dikey navigasyon genişliğinizi ayarlamanıza yardımcı olur. Genişliği hiç değiştirmek istemiyorsanız, kod parçasını web sitenizden bırakabilir ve şeffaf bir dikey navigasyon yapabilirsiniz ve web siteniz çakışır. Bu değişiklik yalnızca web sitenizin masaüstü sürümü için geçerlidir. 981 pikselden daha küçük bir genişliğe sahip bir ekranda, değişiklikler uygulanmaz. CSS kodunu ekleyin İlk tema ayarına, web sitenizin tarayıcınızın tüm genişliğini karşılamasını sağlayan bir kodumuz var. Aşağıdaki kodu kopyalayıp CSS sekmesine yapıştırın, temanızın ek ayarlaması: @Media (min-width: 981px) {
.et_vertical_nav #et-mati-alea, .et_vertical_nav #top-neverer {
Marj-sol: 0px! Önemli;
}
} Ayrıca, dikey navigasyonun genişliğini de ayarlamak istiyorsanız, aşağıdaki CSS kodunu kopyalayıp yapıştırın: @media (min-width: 981px) {
.et_vertical_nav #et-mati-alea, .et_vertical_nav #top-neverer {
Marj-sol: 0px! Önemli;
}
.et_vertical_nav #Page-Container #Play-Header
{
Genişlik: 120px;
}
}
Basit Dikey Gezinme Oluşturma Şimdi, web sitenizle örtüşen şeffaf dikey navigasyon yapmak için gereken adımları ele aldık, bir örnek oluşturacağız. Örneğin, bir kez daha şöyle görünüyor: genel tasarım ipucu başlamadan önce, hatırlamanız gereken bazı genel tasarım ve düşünmeyi paylaşacağız. Bu ipuçları, yaptığınız zarif ve basit web sitesinden en iyisini almanıza yardımcı olacaktır. Kesinlikle vurgulamak istediğimiz iki ipucuna bakalım. Önce her şeyi merkeze merkeziniz, içeriği web sitenize odakladığınızdan emin olun. Bu açık ama bahsetmeye değer. Web sitenizle örtüşen şeffaf dikey navigasyon kullanıyorsanız, içeriğinizin konsantrasyonu bunun için çok uygun olacaktır. Tersine, her şeyi web sitenizin sol tarafına hizalarsanız, büyük olasılıkla şeffaf dikey navigasyon ve içerik karıştırılacaktır. Elde etmek istediğiniz sonuç bu olmayabilir. Web sitenizde simetri ve okunabilirliğe öncelik vermek istiyorsunuz.
Farklı olarak hizalanmış içeriği seçerseniz, içeriğin dolgusunu ve marjını kontrol ettiğinizden emin olun. Uygun marjı ve dolguyu değiştirirseniz, sonuçlar yine de iyi görünebilir. Ancak, birçok manuel değişiklik yapmanız gerekebilir. Dikey navigasyonunuz için tamamen şeffaf bir arka plan rengi kullanıyorsanız, her yerde aynı rengin arka planı, bu örnekte kullandığımız gibi, belirli tutarlılığı korumak önemlidir. Dikey navigasyonunuzdaki rengin okunmasını ve görülmesini istiyorsunuz, çünkü insanlar web sitenizi sorunsuz bir şekilde gezdirebilmelidir. Şeffaf dikey navigasyonda parlak yazı tipi rengini seçerseniz, görüntünüzün veya arka plan renginizin koyu renkler içerdiğinden emin olun. Aynı şekilde, karanlık yazı tipi rengini kullanıyorsanız, kullandığınız görüntünün veya arka plan renginin parlak renkli olduğundan emin olun. Daha fazla zaman sınırlaması olmadan örnekler yapmaya başlayın, size gösterdiğimiz örnekleri yeniden başlatmaya başlayalım. Her şeyden önce, yeni bir sayfa yapın ve ona geniş bir parça ekleyin. Size yalnızca sayfanın bir bölümünü nasıl yeniden oluşturacağınızı göstereceğiz. Tabii ki, daha sonra devam edip istediğiniz kadar parça ekleyebilirsiniz. Menü yuvarlanırken tamamen aynı kalacaktır. Tam genişlik bölümünde tam geniş bir başlık yapın, tam genişlik başlığını ekleyin. Ardından, Tasarım sekmesini açın, metin ve logonun metin yönünü ‘orta’ e yerleştirin ve tam ekran modunu da tam geniş başlığınızdan etkinleştirin. Başlık ayarları da, aynı sekmeyi aşağı kaydırın ve metin başlığının alt kategorisinde aşağıdaki değişiklikleri yapın:
Yazı Tip Başlığı: Lato Light
Yazı Tip Stili Başlık: Başkentler
Yazı tipi stili başlığı: 60 (masaüstü), 50 (tablet), 40 (cep telefonu)
Altyazı Ayarları Ardından kaydırmaya devam edin ve alt kategori metni alt başlıklarının alt kategorisinin aşağıdaki gibi olduğundan emin olun:
Alt -Stitle Yazı Tipi: Lato Light
Altyazı Yazı Tipi Boyutu: 22px (masaüstü ve tablet), 19 (cep telefonu)
Renk Altyazıları Metin: #C4C4C4 Son Düğme Ayarları, Tasarım sekmesinden düğmenin alt kategorisinde aşağıdaki değişiklikleri yapın:
Bir düğme için özel bir stil kullanın: evet
Bir metin boyutu düğmesi: 15 (masaüstü ve tablet), 12 (cep telefonu)
Bir metin rengi düğmesi: #000000 Bir arka plan rengi düğmesi: #ffffff
Bir yazı tipi düğmesi: Lato Işık
Bir yazı tipi stili düğmesi: kalın ve sermaye
Bir sonraki gradyan arka plan ayarı, içerik sekmesinin arka plan alt kategorisinde bir degrade ile arka plan görüntüleri eklemek için tam geniş bölüm ayarlarını açın. Kullandığınız arka plan ve renge bağlı olarak uygun bir renk ekleyin. Örneğimizde karanlık bir arka plan kullanıyoruz. Bu nedenle, gradyanda siyah olarak başlayacağız. Başka bir renk, arka plan görüntüsünü eşleştiriyoruz ‘RGBA (0.49,109.0.43)’. Ayrıca, gradyan renkleri için kullandığımız ayarlar aşağıdaki gibidir: gradyan tipi: doğrusal
Gradyan yönü: 87deg
Başlangıç pozisyonu:% 0
Son pozisyon:% 62 Ardından, arka plan görüntüsünü ekleyin ve aşağıdaki ayarları uygulayın:
Arka Plan Görüntü Boyutu: Kapak
Arka Plan Görüntü Pozisyonu: Orta
Arka plan görüntüsünün tekrarlanması: Tekrar yok
Arka Plan Görüntü Karışımı: Geniş Temaları ayarlamadaki değişiklikler Bir sonraki adım için, özelleştirici temasında başka değişiklikler yapmamız gerekir. WordPress Gösterge Tablosunu kullanıyorsanız, görünümü açın> Özelleştir> Başlık ve Navigasyon> Birincil Menü Çubuğu> ve aşağıdaki değişiklikleri yapın:
Max Logo: 83
Metin Boyutu: 14
Mektup alanı: 0
Yazı Tipi: Lato Light Yazı Tip Stili: Sermaye
Metin rengi: #ffffff
Aktif bağlantı rengi: #ffffff
Arka plan rengi: #ffffff
Açılır menü arka plan rengi: RGBA (221,153,51,0)
Açılır menü satırı rengi: #1E73Be
Açılır menü metin rengi: #ffffff
Tema Ayarlamasına Özel CSS kodunu ekleyin, hala temanın ayarlanmasındayken, düzeni orijinal gibi görünmesi için gereken CSS kod satırını ekleyeceğiz. Kodun ilk kısmı, dikey navigasyon kullanırken web sitesinin sol kenarını ortadan kaldırır. İkinci kısım menüyü sola yaklaştırır. Üçüncü bölüm, menüdeki her sayfa için üst kenar boşluğunu ve alt sınırları yerleştirir. Dördüncü bölüm logoya üst kenar boşluğunu ekler ve logodan sonra marjı kaldırır. Ve son olarak, menünün üst dolguyu silerek logo ve menü öğesi arasındaki aynı mesafeyi tuttuğundan emin oluruz. Bu değişiklik, kaydırma sırasında menü için de geçerlidir. Bu nedenle, menü tüm web sitelerinde aynı görünecektir. @Media (min-width: 981px) {.et_vertical_nav #et-mati-alea, .et_verrtical_nav #top-neverer {
Marj-sol: 0px! Önemli;
}
. Konteyner {
Marj-sol:%3! Önemli; }
#Top-Menu Li {
Marj-Top: 15px;
Sınır dip: 1px katı #ffffff;
}
.et_vertical_nav #play-header #logo {
Marj-Top:%80! Önemli;
Marj-Alt: 0px! Önemli;
}
.et_vertical_nav.et_vertical_fixed.et_header_style_left .et-fixed-header #et-top-navigation, .et_vertical_nav.et_vertical_fixed.et_header_style_split.
Dolgu Top: 0px! Önemli;
}} Nihai Sonuç Bu yazı sırasında takip ettiğiniz tüm adımların bir sonucu olarak, üzerinde çalıştığınız web sitesinde aşağıdaki sonuçları alacaksınız:
