Divi Web Sitenizle Örtüşen Şeffaf Dikey Gezinme Nasıl Oluşturulur

Bugünün Divi eğitiminde, öncelikle web sitenizdeki dikey gezinme ile özel bir şey yapmaya odaklanacağız. Divi temasının sağladığı, genellikle unutulan bir seçenek olan dikey gezinme. Sık kullanılmasa da, web sitenizin tüm görünümünü ve verdiği hissi değiştirebilir ve istediğiniz düzeye getirebilir. Dikey navigasyonunuzu olduğundan daha özel hale getirmenize yardımcı olmak için onu şeffaf hale getireceğiz. Bunun yanı sıra, şeffaf menünün web sitenizin geri kalanıyla örtüşmesini de sağlayacağız.

Şu anda, dikey gezinmeye sahip pek çok web sitesi görmüyoruz. Ancak bazı durumlarda çarpıcı sonuçlar verebilir. Önceki gönderilerimizden birinde, web tasarımlarını geliştirmek için dikey gezinmeyi kullanan 12 Divi web sitesi örneği gösterdik.

Dikey gezinmeyi web sitenizle çakıştırırken şeffaf bir arka plan rengi kullanmak önemlidir. Saydam bir arka plan rengi kullanmıyorsanız, dikey gezinme web sitenizdeki bazı içeriklerle çakışabilir. Web sitenizin içeriğindeki ana odaktan kurtulmak istemiyorsunuz ve kesinlikle örtüşmesini de istemiyorsunuz.

Tam olarak 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çlara ulaşmak için gereken farklı adımlarda size rehberlik edeceğiz.

Bugünün Nihai Sonucu: Basit ve Zarif Bir Dikey Menü

Yukarıdaki resimde, şeffaf bir dikey navigasyonun web sitenize getirebileceği basitliği fark edebilirsiniz. Şeffaf dikey menüyü nasıl oluşturacağınızı göstermenin yanı sıra, kendi web sitenize uyacak şekilde yeniden oluştururken kullanabileceğiniz bazı genel tasarım ipuçları da vereceğiz.

Divi'de Tasarım Oluşturma

Youtube Kanalımıza Abone Olun

Genel Ayarlar

Yaptığımız örneğe dalmadan önce, size şeffaf navigasyonu basit bir şekilde entegre etmenize yardımcı olacak bazı genel bilgiler (ve CSS kod satırları) sağlayacağız (örnekte yaptığımız diğer tüm değişiklikler olmadan) .

Dikey Navigasyonu Etkinleştir

Başlamak için, web sitenizde dikey gezinmeyi etkinleştirmeniz gerekir. Bunu yapmak için WordPress Panonuz > Görünüm > Özelleştir > Başlık ve Gezinme > Başlık Biçimi > Ve Dikey Gezinmeyi etkinleştirin.

Tema Özelleştiricide Tasarım Ayarlarınızı Seçin

Artık Tema Özelleştirici'de olduğunuza göre, dikey gezinmenizin tüm ayarlarını, üst gezinmenizi değiştirdiğiniz şekilde ayarlayabilirsiniz. Başlık ve Gezinme > Birincil Menü > seçeneğine geri dönün ve ana menünüzde yapmak istediğiniz tüm değişiklikleri yapın.

Bu bölümde, opaklığı 1'den az olan menüye bir arka plan rengi sağlamak önemlidir. Tercihen 0,5'ten daha az. Bunun arka plan rengini uyguladığından emin olun. Aynısının açılır menü arka plan rengine uygulanmasını istiyorsanız, orada da aynı rengi seçin.

CSS Kodunu Ekle

Dikey gezinmenizin tasarım bölümünde istediğiniz tüm değişiklikleri yaptıktan sonra CSS bölümüne geçebilirsiniz. Zaten Tema Özelleştiricide olduğumuz için özel CSS kodunu oraya ekleyeceğiz. Elbette, CSS kodunu belirli bir sayfaya veya Tema Seçenekleriniz aracılığıyla da ekleyebilirsiniz.

Size sağlayacağımız CSS kodu iki şey yapar. Her şeyden önce, şeffaf dikey gezinme ve web sitenizin örtüşmesini sağlar. İkincisi, dikey navigasyonunuzun genişliğini ayarlamanıza yardımcı olur. Genişliği hiç değiştirmek istemiyorsanız, bu kod parçasını web sitenizin dışında bırakabilir ve şeffaf dikey gezinmeyi ve web sitenizi çakıştırabilirsiniz.

Bu değişiklikler yalnızca web sitenizin masaüstü sürümü için geçerli olacaktır. Genişliği 981 pikselden küçük olan ekranlarda değişiklikler uygulanmaz.

Tema Özelleştiriciye CSS Kodu Ekle

İlk olarak, web sitenizin tarayıcınızın tüm genişliğini doldurmasını sağlayan kodumuz var. Aşağıdaki kodu kopyalayıp Tema Özelleştiricinizin Ek CSS sekmesine yapıştırın:

@media (min-width: 981px) { 
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important; 
}
}

Ek olarak, dikey gezinmenizin genişliğini de ayarlamak istiyorsanız, bunun yerine aşağıdaki CSS kodu satırlarını kopyalayıp yapıştırın:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header { 
margin-left: 0px !important;
}
.et_vertical_nav #page-container #main-header
{
width: 120px;
}
}

Basit Dikey Navigasyonu Yeniden Oluşturma

Web sitenizle örtüşen şeffaf bir dikey gezinme oluşturmanın gerekli adımlarını yerine getirdiğimize göre, örneği yeniden oluşturacağız. Örnek, bir kez daha şöyle görünür:

Genel Tasarım İpuçları

Başlamadan önce, aklınızda bulundurmanız gereken bazı genel tasarım ipuçlarını ve düşüncelerini paylaşacağız. Bu ipuçları, oluşturduğunuz zarif ve basit web sitesinden en iyi şekilde yararlanmanıza yardımcı olacaktır. Kesinlikle vurgulamak istediğimiz iki ipucuna bir göz atalım.

Her Şeyi Merkezileştirin

Öncelikle, içeriği web sitenizde merkezileştirdiğinizden emin olun. Bu apaçık ama bahsetmeye değer. Web sitenizle örtüşen şeffaf bir dikey gezinme kullanıyorsanız, içeriğinizi merkezileştirmek buna en uygun olacaktır. Bunun yerine, her şeyi web sitenizin sol tarafına hizalarsanız, şeffaf dikey gezinme ve içeriğin karışması daha olasıdır. Muhtemelen elde etmek istediğiniz sonuç bu değildir. Web sitenizdeki simetriye ve okunabilirliğe öncelik vermek istiyorsunuz.

Farklı şekilde hizalanmış içeriği seçerseniz, içeriğin dolgusunu ve kenar boşluklarını kontrol ettiğinizden emin olun. Kenar boşluklarını ve dolguları buna göre değiştirirseniz, sonuçlar yine de harika görünebilir. Ancak, muhtemelen birçok manuel değişiklik yapmanız gerekecek.

Her Yerde Aynı Renkli Arka Plan

Bu örnekte kullandığımız gibi, dikey gezinmeniz için tamamen şeffaf bir arka plan rengi kullanıyorsanız, belirli bir tutarlılığı korumak önemlidir. İnsanların web sitenizde sorunsuz bir şekilde gezinebilmesi gerektiğinden, dikey navigasyonunuzdaki rengin okunabilir ve fark edilebilir olmasını istiyorsunuz.

Saydam dikey gezinmenizde açık bir yazı tipi rengi seçiyorsanız, arka plan resimlerinizin veya renklerinizin koyu renkler içerdiğinden emin olun. Aynı şekilde, koyu bir yazı tipi rengi kullanıyorsanız, kullandığınız arka plan resimlerinin veya renklerin açık renklere sahip olduğundan emin olun.

Örneği Oluşturmaya Başlayın

Daha fazla gecikmeden, size gösterdiğimiz örneği yeniden oluşturmaya başlayalım. Her şeyden önce, yeni bir sayfa oluşturun ve buna bir Tam Genişlik Bölümü ekleyin. Size yalnızca sayfanın bir bölümünü nasıl yeniden oluşturacağınızı göstereceğiz. Tabii daha sonra devam edip istediğiniz kadar bölüm ekleyebilirsiniz. Menü, kaydırma sırasında tamamen aynı kalacaktır.

Tam Genişlik Üstbilgisi Oluştur

Tam Genişlik Bölümü içinde bir Tam Genişlik Üstbilgisi ekleyin. Ardından Tasarım sekmesine gidin, Metin ve Logo Yönlendirmesini 'Merkez'e getirin ve Tam Genişlik Başlığınızın tam ekran modunu da etkinleştirin.

Başlık Ayarları

Ayrıca, aynı sekmeyi aşağı kaydırın ve Başlık Metni alt kategorisinde aşağıdaki değişiklikleri yapın:

• Başlık Yazı Tipi: Lato Light
• Başlık Yazı Tipi Stili: Büyük Harfler
• Başlık Yazı Tipi Stili: 60 (masaüstü), 50 (tablet), 40 (telefon)
• Başlık Metin Rengi: #FFFFFF

Alt Başlık Ayarları

Ayrıca, kaydırmaya devam edin ve Alt Başlık Metni alt kategorisinin ayarlarının aşağıdaki gibi olduğundan emin olun:

• Alt Başlık Yazı Tipi: Lato Işık
• Alt Başlık Yazı Tipi Boyutu: 22px (masaüstü ve tablet), 19 (telefon)
• Alt Başlık Metin Rengi: #c4c4c4

Düğme Ayarları

Son olarak, Tasarım sekmesinin Düğme alt kategorisinde aşağıdaki değişiklikleri yapın:

• Düğme Bir için Özel Stilleri Kullan: Evet
• Düğme Bir Metin Boyutu: 15 (masaüstü ve tablet), 12 (telefon)
• Düğme Bir Metin Rengi: #000000
• Düğme Bir Arka Plan Rengi: #FFFFFF
• Düğme Bir Yazı Tipi: Lato Light
• Düğme Bir Yazı Tipi Stili: Kalın ve Büyük Harfler

Degrade Arka Plan Ayarları

Ardından, İçerik sekmesinin Arka Plan alt kategorisine degrade kaplamalı bir arka plan görüntüsü eklemek için Tam Genişlik Bölümü ayarlarını açın. Kullandığınız arka plan türüne ve renklere bağlı olarak eşleşen renkler ekleyin.

Örneğimizde, koyu arka planlar kullanıyoruz. Bu nedenle, degradede siyah bir renkle başlayacağız. Arka plan görüntüsüyle eşleştirdiğimiz diğer renk ise 'rgba(0,49,109,0.43)'.

Ayrıca, degrade renkler için kullandığımız ayarlar şunlardır:

• Gradyan Türü: Doğrusal
• Gradyan Yönü: 87deg
• Başlangıç ​​Konumu: %0
• Bitiş Konumu: %62

Devam ederek, bir arka plan resmi ekleyin ve aşağıdaki ayarları uygulayın:

• Arka Plan Resmi Boyutu: Kapak
• Arka Plan Resmi Konumu: Merkez
• Arka Plan Resmi Tekrarı: Tekrar Yok
• Arka Plan Resmi Karışımı: Yer Paylaşımı

Tema Özelleştiricideki Değişiklikler

Bir sonraki adım için Tema Özelleştiricide başka değişiklikler yapmamız gerekecek. WordPress Kontrol Panelinizdeyseniz, Görünüm > Özelleştir > Başlık ve Gezinme > Birincil Menü Çubuğu > bölümüne gidin ve aşağıdaki değişiklikleri yapın:

• Logo Maksimum Yükseklik: 83
• Metin Boyutu: 14
• Harf Aralığı: 0
• Yazı Tipi: Lato Işık
• Yazı Tipi Stili: Büyük Harfler
• 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ü Çizgi Rengi: #1E73BE
• Açılır Menü Metin Rengi: #FFFFFF

Tema Özelleştiricide Özel CSS Kodu Ekleme

Hala Tema Özelleştirici'deyken, mizanpajın olduğu gibi görünmesini sağlamak için gerekli CSS kod satırlarını ekleyeceğiz.

Kodun ilk kısmı, dikey gezinme kullanılırken web sitesinin sol kenar boşluğunu kaldırır. İkinci kısım menüyü sola yaklaştırıyor. Üçüncü kısım, menüdeki her sayfaya bir üst kenar boşluğu ve bir alt kenarlık yerleştirir. Dördüncü kısım, logoya bir üst kenar boşluğu ekler ve logodan sonraki kenar boşluğunu kaldırır. Son olarak, üst dolguyu kaldırarak menünün logo ile menü öğeleri arasındaki mesafeyi aynı tutmasını sağladık. Bu değişiklikler, kaydırma sırasında menü için de geçerlidir. Bu nedenle, menü tüm web sitesinde aynı görünecektir.

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
#top-menu li {
margin-top: 15px;
border-bottom: 1px solid #FFFFFF;
}
.et_vertical_nav #main-header #logo {
margin-top: 80% !important;
margin-bottom: 0px !important;
}
.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 .et-fixed-header #et-top-navigation {
padding-top: 0px !important;
}}

Son sonuç

Bu gönderi boyunca izlediğiniz tüm adımların bir sonucu olarak, üzerinde çalıştığınız web sitesinde aşağıdaki sonucu almış olmalısınız:

toparlamak

Bu gönderide, web sitenizle örtüşen şeffaf bir dikey gezinmeyi nasıl yapacağınızı gösterdik. Ayrıca bu gönderiyi adım adım takip ederseniz kendi web siteniz için kullanabileceğiniz şık ve sade bir tasarımı da paylaştık. Herhangi bir sorunuz veya isteğiniz varsa, iletişime geçebilmemiz için aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!

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!