Divi Dikey Navigasyon Aktif Bağlantınızı Organize Etmenin 3 Yaratıcı Yolu
Bu Divi öğreticisinde, dikey navigasyonunuzda aktif bağlantılar düzenlemenin bazı ilginç yollarını göstereceğiz. Bu öğretici, Divi One sayfa web sitesi için kaydırma üzerinde nasıl etkin bir bağlantı oluşturacağınızı gösterdiğimiz önceki öğreticiyi takip eder. Bu nedenle, çeşitli yapılandırma yollarını denemeden önce, öncelikle önceki makaleyi kaydırırken etkin bir bağlantı ayarlamanız gerekir, çünkü kullanacağımız kod bundan daha fazla oluşturulacaktır. Bu eğitim sırasında hatırlamanız gereken bir şey, sonuçları yalnızca sayfayı kaydettikten sonra görebilmenizdir. Yalnızca sayfalarınıza bakarak değişiklikler görünmez.
3 Aktif Gezinme Bağlantısı Dikey Divi Organize etmenin Yaratıcı Yolları YouTube kanalımıza abone olursunuz, sayfaları aşağı kaydırdığınızda aktif bağlantıları otomatik olarak ayarlayan gezinme oluşturmak için nasıl çalışır, eklenti sayfası kaydırmayı kimliğe kolayca ulaşmanıza yardımcı olan sonuçları kullandık. İstediğiniz. Ayrıca, bu eklenti aynı zamanda ayarlarda manuel olarak seçebileceğiniz farklı bir seçenek sunar. Eklenti, web sitenizdeki ziyaretçilerin konumunu belirlemeye yardımcı olur ve menü öğesini web sitenizde gördüklerine göre değiştirecektir. Bu, ziyaretçilerinizin bir sayfanın tamamını gezmesine kesinlikle yardımcı olacak küçük bir etkileşimdir. Sayfanızın keşfettikleri kısmını ve ilgilendikleri diğer kısımlardan ne kadar uzak olduklarını otomatik olarak bileceklerdir.
Not: Bu yöntemin yalnızca yalnızca bir sayfadan oluşturulan web siteleri için geçerli olduğunu bilin. Dikey navigasyon kullanıyorsanız, nasıl yapılacağını göstereceğimiz dikey navigasyon örneklerini etkinleştirin. Bu nedenle, özelleştirici temasında dikey navigasyona devam edin ve etkinleştirin (önceki yazıda yapmadıysanız). WordPress Gösterge Tablosunu kullanıyorsanız, görünümü aç> Özelleştir> Başlık ve Navigasyon> Başlık Biçimi> Dikey Gezinmeyi Etkinleştir. Bir ziyaretçi bir parçayı her geçtiğinde, diğer menü öğeleri parlamaya başlar. Bu, ziyaretçilerinizin bir sayfada gezinmesine yardımcı olmak için ince ama güzel ve zarif bir yoldur.
Metin Boyutu: 24
Mektup alanı: -1
Yazı Tipi: Mutlu Maymun
Metin rengi: #ffffff
Aktif bağlantı rengi: #ffffff
Arka plan rengi: RGBA (255,255,255.0)
Açılır arka plan rengi: RGBA (255,255,255.0)
CSS kodunu tema seçeneğine ekleyin Yapmanız gereken bir sonraki şey bazı CSS kodu eklemektir. Web sitenize CSS kodu eklemenin birkaç yolu vardır. Tema seçeneklerinden başlayarak bu örnekte üç yöntemi ele alacağız. WordPress kontrol panelindeyseniz, Divi’yi açın> Tema Seçenekleri> Genel sekmesini aşağı kaydırın ve aşağıdaki CSS kod satırlarını özel CSS kutusuna yerleştirin: @Media (min-width: 981px) {
.et_vertical_nav #et-mati-alea, .et_vertical_nav #top-neverer {margin-sol: 0px! Önemli;
}
. Konteyner {
Marj-sol:%3! Önemli;
}
.et_vertical_nav #Page-Container #Play-Header {
Box-Shadow: Yok! Önemli;
}
#top-menu .current-menu-ız
Text-Shadow: 0 0 10px #fff, 0 0 30px #fff, 0 0 50px #e3e98e, 0 0 70px #e3e98e, 0 0 90px #e398e;
Sınır üstü: 1px noktalı #ffffff;
Sınır dip: 1px noktalı #ffffff;
Dolgu Top: 15px;
}
Nav#üst-menu-nav {
Genişlik:%80! Önemli;
}
.et_vertical_nav #play-header #top-menu> li> a {
Metin-align: merkez;
Marj-Alt: 15px;
Dolgu-sol:%25;
}
#ET-TOP-Navigation {
Dolgu Top:%100! Önemli;
}
#Top-Menu {
Metin-align: merkez;
Dolgu-sol:%10;
}} Aktif Bağlantı Kuvveti #2 İkinci aktif bağlantı kuvveti, çok temiz ve zarif bir görünüme sahip olmasıdır. Her zamanki gibi, aktif bağlantı tek sayfa web sitesi altında kaydırma şeklinize göre değişecektir. Bir menü öğesine tıklanırken aynı stil uygulanır.
Ana menü çubuğunu ayarlama Bu yazının ilk örneğinde yaptığımızla aynı şeyi yaparak başlayacağız; Ana menü çubuğunda değişiklikler yapın. Bunu yapmak için, WordPress Dashboard> Ayar> Başlık ve Navigasyon> Ana Menü Bıçakları’ndaki görünümü açın ve aşağıdaki ayarlara sahip olduğunuzdan emin olun:
Logo görüntülerini gizle: Etkinleştir Metin Boyutu: 24
Mektup alanı: 2
Mektup Türü: Istakoz
Metin rengi: #ffffff
Aktif bağlantı rengi: #ffffff
Arka plan rengi: RGBA (255,255,255.0)
Açılır menü arka plan rengi: RGBA (255,255,255.0)
CSS kodunu ekleyin Tema ayarına önceki örnekte açıklandığı gibi, CSS kodunu web sitenize çeşitli şekillerde ekleyebilirsiniz. Tema seçeneğine özel bir kod eklemenin yanı sıra, tema ayarına da ekleyebilirsiniz. WordPress Gösterge Tablosunu kullanıyorsanız, görünümü açıyorsanız> Özelleştir> Ek CSS ve aşağıdaki kod satırlarını özel CSS alanına yerleştirin: @media (min-width: 981px) {
.et_vertical_nav #et-mati-alea, .et_vertical_nav #top-neverer {
}
. Konteyner {
Marj-sol:%3! Önemli;
}
.et_vertical_nav #Page-Container #Play-Header {
Box-Shadow: Yok! Önemli;
}
#top-menu .current-menu-ız
Dolgu: 0.5EM 1.9EM;
}
#Top-Menu .Current-menu-öğe a.mps2ID-Highlight: daha önce,
#Top-Menu .Current-menu-öğe a.mps2ID-Highlight: sonra {
Yükseklik: 20 piksel;
Genişlik: 20px;
Pozisyon: Mutlak;
İçerik: ”;
-Webkit-Transition: Tüm 0.35S kolaylığı;
Geçiş: 0,35’lerin tümü;
Opaklık: 0;
}
#Top-Menu .Current-menu-öğe a.mps2ID-Highlight: {
Sol: 0;
Üst: 0;
Sınır sol: 4px katı #000000;
sınır üstü: 4px katı #ffffff;
-Webkit-Transform: Çeviri (%100,%50);
Dönüşüm: Çeviri (%100,%50);
}
#Top-Menu .Current-menu-öğe a.mps2ID-Highlight: sonra {
Sınır-sağ: 4px katı #000000;
Sınır dip: 4px katı #ffffff;
-Webkit-Transform: Çeviri (%-100,%-50);
Dönüşüm: Çeviri (%-100,%-50);
}
#Top-Menu .Current-menu-öğe a.mps2ID-Highlight: daha önce,
#Top-Menu .Current-menu-öğe a.mps2ID-Highlight: sonra {
-Webkit-Transform: Çeviri (%0,%0);
Dönüşüm: Çeviri (%0,%0);
Opaklık: 1;
}
Nav#üst-menu-nav {
Genişlik:%87! Önemli;
}
.et_vertical_nav #play-header #top-menu> li> a {
Marj-Alt: 30px;
}
#ET-TOP-Navigation {
Dolgu Top:%100! Önemli;
}} Aktif Bağlantı Stili #3 Stil Sizinle paylaşmayı seçtiğimiz üçüncü etkin bağlantı, esas olarak menü öğeleri olarak kullanılan anahtar kelimelere odaklanan stildir. Metnin gölgesi için doğru ayarları kullanarak, aynı metin, ziyaretçilerin web sitenizdeki konumunu vurgulayan menü öğesini çevreleyecektir.
Bu son örnek için ana menü çubuğunu ayarlayın, ana menü çubuğunda bazı değişiklikler yaparak başlayın. WordPress Gösterge Tablosu’ndaysanız, görünüm açın> Özelleştir> Başlık ve Navigasyon> Birincil Menü Çubuğu ve Dikey Gezinme için aşağıdaki değişiklikleri uygulamak:
Logo görüntülerini gizle: Etkinleştir
Metin Boyutu: 16 Mektup alanı: 2
Yazı tipi: Josefin levhası
Yazı Tip Stili: Sermaye
Metin rengi: #ffffff
Aktif bağlantı rengi: #ffffff
Arka plan rengi: RGBA (255,255,255.0)
Açılır menü arka plan rengi: RGBA (255,255,255.0)
CSS kodunu bir sayfaya ekleyin Özellikle başka bir seçenek için CSS kodunu eklemeniz gerekir, belirli bir sayfaya eklemektir. Ön sayfanızı açın (ve böylece tüm içeriği koyduğunuz sayfayı) Divi Builder ile birlikte ve aşağıdaki simgeyi tıklayın:
Simgeye tıkladıktan sonra, aşağıdaki CSS kodu satırını CSS özel alanına yerleştirin: @media (min-width: 981px) {
.et_vertical_nav #et-mati-alea, .et_vertical_nav #top-neverer { Marj-sol: 0px! Önemli; }
. Konteyner {
Marj-sol:%3! Önemli;
}
.et_vertical_nav #Page-Container #Play-Header {
Box-Shadow: Yok! Önemli;
}
#top-menu .current-menu-ız
Marj-sol: 80px;
Metin -Shadow: 0 0 0 #000, -70px 0 0 RGBA (255, 255, 255, .4), 70px 0 0 RGBA (255, 255, 255, .4), 0 25px 0 RGBA (255, 255, 255, .4), 0 -25px 0 RGBA (255, 255, 255, .4); }}
Nav#üst-menu-nav {
Genişlik:%95! Önemli;
}
.et_vertical_nav #play-header #top-menu> li> a {
Marj-Alt: 30px;
}
#ET-TOP-Navigation {
Dolgu Top:%100! Önemli;
}} Bu yazıdaki son zihin, menünüzde etkin bağlantılar düzenlemenin iyi ve kolay yollarını gösterdik. Bu yazı, Divi One -Page web sitesi için bir kaydırma üzerinde nasıl etkin bir bağlantı oluşturacağınızı gösterdiğimiz önceki yazıya bir takiptir. Sonuçları görmeden önce değişiklikleri kaydetmeniz gerektiğini unutmayın, yalnızca sayfalarınız çalışmaz. Sorularınız veya önerileriniz varsa; Aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun! Botond1977 / Shutterstock.com tarafından Üstün Görüntü
