Divi Dikey Navigasyonun Aktif Bağlantısına Stil Vermenin 3 Yaratıcı Yolu

Bu Divi eğitiminde, dikey navigasyonunuzda aktif bağlantıya stil vermenin birkaç ilginç yolunu göstereceğiz. Bu eğitim, size tek sayfalık Divi web siteleri için kaydırmada nasıl aktif bağlantılar oluşturacağınızı gösterdiğimiz önceki bir öğreticiyi takip eder. Bu nedenle, farklı stil oluşturma yöntemlerini denemeden önce, kullanacağımız kod bunun üzerine inşa edileceğinden, önceki makaleyi kaydırarak aktif bağlantıları kurmalısınız.

Bu eğitim sırasında aklınızda bulundurmanız gereken bir şey, sonuçları yalnızca sayfayı kaydettikten sonra görebileceğiniz gerçeğidir. Yalnızca sayfanızı önizleyerek değişiklikler görünmeyecektir.

Divi Dikey Navigasyonun Aktif Bağlantısına Stil Vermenin 3 Yaratıcı Yolu

Youtube Kanalımıza Abone Olun

Nasıl çalışır

Sayfayı aşağı kaydırırken etkin bağlantıyı otomatik olarak ayarlayan bir gezinme oluşturmak için, istediğiniz sonuçları kolayca elde etmenize yardımcı olan Sayfa Kaydırma to ID eklentisini kullandık. Ayrıca eklenti, ayarlar içinden manuel olarak seçebileceğiniz farklı seçenekler de sunuyor.

Eklenti, bir ziyaretçinin web sitenizdeki konumunu belirlemeye yardımcı olur ve menü öğesini, web sitenizde o anda hangi bölüme baktıklarına göre değiştirir. Bu, ziyaretçilerinizin tek çağrı cihazında gezinmesine kesinlikle yardımcı olacak küçük bir etkileşimdir. Sayfanızın hangi bölümünü keşfettiklerini ve ilgilenebilecekleri diğer bölümlerden ne kadar uzakta olduklarını otomatik olarak bileceklerdir.

Not: Bu yöntemin yalnızca tek sayfadan oluşan web siteleri için geçerli olduğunu bilin.

Dikey Navigasyonu Etkinleştir

Size nasıl yapılacağını göstereceğimiz örnekler, özellikle dikey gezinme kullanıyorsanız değerli olacaktır. Öyleyse devam edin ve Tema Özelleştirici'de dikey gezinmeyi etkinleştirin (bunu bir önceki gönderide yapmadıysanız).

WordPress Kontrol Panelinizdeyseniz, Görünüm > Özelleştir > Başlık ve Gezinme > Başlık Biçimi > Dikey Gezinmeyi Etkinleştir'e gidin.

Aktif Bağlantı Stili #1

Size göstermek istediğimiz ilk örnek parlak bir örnek. Bir ziyaretçi bölümlerden birinden her geçtiğinde, başka bir menü öğesi parlamaya başlayacaktır. Ziyaretçilerinizin tek çağrı cihazında gezinmesine yardımcı olmanın ince ama güzel ve zarif bir yolu.

Birincil Menü Çubuğu Ayarları

Birincil Menü Çubuğunuzda bazı değişiklikler yaparak başlayın. WordPress Kontrol Panelinizdeyseniz, Görünüm > Özelleştir > Başlık ve Gezinme > Birincil Menü Çubuğu'na gidin ve aşağıdaki değişiklikleri yapın:

• Logo Resmini Gizle: Etkinleştir
• Metin Boyutu: 24
• Harf Aralığı: -1
• Yazı Tipi: Mutlu Maymun
• Metin Rengi: #FFFFFF
• Aktif Bağlantı Rengi: #FFFFFF
• Arka Plan Rengi: rgba(255,255,255,0)
• Açılan Arka Plan Rengi: rgba(255,255,255,0)

Tema Seçeneklerine CSS Kodu Ekle

Yapmanız gereken bir sonraki şey, biraz CSS kodu eklemek. Web sitenize CSS kodu eklemenin birkaç yolu vardır. Bu örneklerde Tema Seçeneklerinden başlayarak üç yöntemi ele alacağız. WordPress kontrol panelinizdeyseniz, Divi > Tema Seçenekleri > Genel sekmesine gidin ve aşağıdaki CSS Kodu satırlarını Özel CSS kutusuna yerleştirin:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight{ 
text-shadow:  0 0 10px #fff,  0 0 30px #fff,  0 0 50px #e3e98e,  0 0 70px #e3e98e, 0 0 90px #e3e98e;
border-top: 1px dotted #FFFFFF;
border-bottom: 1px dotted #FFFFFF;
padding-top: 15px;
}
nav#top-menu-nav {
width:80% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
text-align: center;
margin-bottom: 15px;
padding-left: 25%;
}
#et-top-navigation {
padding-top: 100% !important;
}
#top-menu {
text-align: center;
padding-left: 10%;
}}

Aktif Bağlantı Stili #2

İkinci aktif bağlantı stili, çok temiz ve zarif bir görünüme sahip olanıdır. Her zamanki gibi, aktif bağlantılar, tek sayfalık web sitesini aşağı kaydırma şeklinize göre değişecektir. Menü öğelerinden birine tıklandığında aynı stil uygulanacaktır.

Birincil Menü Çubuğu Ayarları

Bu yazının ilk örneğinde yaptığımızın aynısını yaparak başlayacağız; Birincil Menü Çubuğunda değişiklikler yapmak. Bunu yapmak için WordPress Kontrol Panelinizde Görünüm > Özelleştir > Başlık ve Gezinme > Birincil Menü Çubuğu'na gidin ve aşağıdaki ayarlara sahip olduğunuzdan emin olun:

• Logo Resmini Gizle: Etkinleştir
• Metin Boyutu: 24
• Harf Aralığı: 2
• yazı tipi: ıstakoz
• 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)

Tema Özelleştiriciye CSS Kodu Ekleyin

Önceki örnekte anlatıldığı gibi, CSS kodunu web sitenize çeşitli yollarla ekleyebilirsiniz. Özel kodu Tema Seçeneklerine eklemenin yanı sıra, Tema Özelleştiriciye de ekleyebilirsiniz. WordPress Kontrol Panelinizdeyseniz, Görünüm > Özelleştir > Ek CSS'ye gidin ve aşağıdaki kod satırlarını Özel CSS alanına yerleştirin:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
padding: 0.5em 1.9em;
}
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
height: 20px;
width: 20px;
position: absolute;
content: '';
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
opacity: 0;
}
#top-menu .current-menu-item a.mPS2id-highlight:before {
left: 0;
top: 0;
border-left: 4px solid #000000;
border-top: 4px solid #FFFFFF;
-webkit-transform: translate(100%, 50%);
transform: translate(100%, 50%);
}
#top-menu .current-menu-item a.mPS2id-highlight:after {
border-right: 4px solid #000000;
border-bottom: 4px solid #FFFFFF;
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
} 
#top-menu .current-menu-item a.mPS2id-highlight:before,
#top-menu .current-menu-item a.mPS2id-highlight:after {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
opacity: 1;
}
nav#top-menu-nav {
width:87% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

Aktif Bağlantı Stili #3

Sizinle paylaşmayı seçtiğimiz üçüncü aktif bağlantı stili, öncelikle bir menü öğesi olarak kullanılan anahtar kelimeye odaklanan bir stildir. Metin gölgesi için doğru ayarları kullanarak, aynı metin, bir ziyaretçinin web sitenizdeki konumunu vurgulayan menü öğesini çevreleyecektir.

Birincil Menü Çubuğu Ayarları

Bu son örnek için, Birincil Menü Çubuğunda bazı değişiklikler yaparak başlayın. WordPress kontrol panelinizdeyseniz, Görünüm > Özelleştir > Başlık ve Gezinme > Birincil Menü Çubuğu'na gidin ve dikey gezinme için aşağıdaki değişiklikleri uygulayın:

• Logo Resmini Gizle: Etkinleştir
• Metin Boyutu: 16
• Harf Aralığı: 2
• Yazı Tipi: Josefin Slab
• Yazı Tipi Stili: Büyük Harfler
• 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)

Özellikle Bir Sayfaya CSS Kodu Ekleyin

CSS kodunu eklemeniz gereken diğer bir seçenek de onu özellikle bir sayfaya eklemektir. Divi Builder ile ön sayfanızı (ve dolayısıyla tüm içeriği yerleştirdiğiniz sayfayı) açın ve aşağıdaki simgeye tıklayın:

Simgeye tıkladıktan sonra, Özel CSS alanına aşağıdaki CSS kodu satırlarını yerleştirin:

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
#top-menu .current-menu-item a.mPS2id-highlight {
margin-left: 80px;
text-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#top-menu-nav {
width:95% !important;
}
.et_vertical_nav #main-header #top-menu > li > a {
margin-bottom: 30px;
}
#et-top-navigation {
padding-top: 100% !important;
}}

Son düşünceler

Bu gönderide, menünüzdeki aktif bağlantıya stil vermenin birkaç güzel ve kolay yolunu gösterdik. Bu gönderi, size tek sayfalık Divi web siteleri için kaydırmada nasıl aktif bağlantılar oluşturacağınızı gösterdiğimiz önceki bir gönderinin devamıydı. Sonuçları görebilmeniz için önce değişiklikleri kaydetmeniz gerekeceğini unutmayın, yalnızca sayfanızın önizlemesini yapmak işe yaramaz. Herhangi bir sorunuz veya öneriniz varsa; Aşağıdaki yorum bölümünde 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!

Öne Çıkan Resim Botond1977 / Shutterstock.com