Tek Sayfa Divi Web Siteleri için Scroll'da Aktif Bağlantılar Nasıl Oluşturulur

Bugünkü eğitimde, bir ziyaretçi sayfayı aşağı kaydırdığında, içinde bulundukları bölüme karşılık gelen menü bağlantısının vurgulanması için dikey gezinme bağlantılarınızı nasıl şekillendireceğinizi göstereceğiz. Web tasarımınız ve kullanıcının davranışı arasında biraz etkileşim ekleyen hoş bir küçük efekt. Bu yöntem özellikle tek sayfalık bir web sitesi oluşturuyorsanız işe yarar.

Bu etkiyi zihinlerinde canlandırmakta güçlük çekenler için aşağıda bir önizleme sağladık.

Sonuç

Bu gönderiyi takip ettikten sonra elde edebileceğiniz nihai sonuca bir göz atalım:

Gördüğünüz gibi, vurgulanan aktif bağlantı, kullanıcı sayfa bölümlerinde gezindikçe (ve tıklamayla) otomatik olarak değişir.

Esin

Bu yazı için ilhamımızı, dikey navigasyon yazımızda örnek olarak bahsettiğimiz Filmschool Berlin web sitesinde bulduk. Bu gönderinin yorumlarındaki bir okuyucu, onlara kayan aktif bağlantı efektinin nasıl oluşturulacağını göstermemizi istedi ve işte buradayız!

Tek Sayfa Divi Web Siteleri için Scroll'da Aktif Bağlantılar Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Başlarken: Sayfa Kaydırarak Kimlik Eklentisini İndirin

Bu tasarımın üstesinden gelmek için burada bulabileceğiniz ücretsiz ve iyi derecelendirilmiş Page Scroll to ID eklentisini kullanarak başlayacağız. 'İndir' düğmesine tıklayın ve eklenti ZIP dosyasını hemen bulabileceğiniz bir yere kaydedin.

Sayfayı Kimliğe Kaydır Eklentisini Yükleyin ve Etkinleştirin

Yapmanız gereken bir sonraki şey, WordPress Panonuz > Eklentiler > Yeni Ekle > Az önce indirdiğiniz ZIP dosyasını seçin ve yükleyin.

Bundan sonra eklentiyi de etkinleştirmeyi unutmayın.

Dikey Gezinmeyi Etkinleştir

Page Scroll to ID eklentisinin ayarlarına girmeden önce, önce dikey gezinmeyi (ve bir sonraki adımda sabit gezinmeyi) etkinleştireceğiz. WordPress Kontrol Panelinizdeyseniz, Görünüm > Özelleştir > Başlık ve Gezinme > Başlık Biçimi > Ve dikey gezinmeyi etkinleştirin.

Sabit Navigasyonu Etkinleştir

Devam edelim, web sitenizin sabit navigasyonunu etkinleştirelim. Bu gereklidir, çünkü kaydırmadaki aktif bağlantıları kullanmanın tüm amacı, ziyaretçilerin hangi bölümde olduklarını, ne zaman içinde olduklarını görmeleridir. WordPress Kontrol Panelinizdeyseniz, Divi > Tema Seçenekleri > Genel sekmesinde Sabit Gezinti Çubuğunu etkinleştirin.

Kimlik Eklentisi Ayarlarına Sayfa Kaydırın

Bu kısım için, yakın zamanda yüklenen eklentiye geri döneceğiz. Eklentiyi etkinleştirdikten sonra doğru ayarları kullanmanız gerekir. Ayarlara gitmek için eklenti adının hemen altındaki 'ayarlar'a tıklayın.

Bunu yaptıktan sonra, aktif bağlantıların web sitenizde nasıl davranacağını belirlemenize yardımcı olacak farklı seçenekleri fark edeceksiniz. Yaptığımız örnek için aşağıdaki ayarları kullanıyoruz:

• WordPress Menü Bağlantılarında Etkinleştir: Evet
• Kaydırma süresi: 200 milisaniye
• Kaydırma süresini otomatik ayarla: Evet
• Kaydırma animasyonu yumuşatma: Doğrusal
• Sayfanın/belgenin sonuna ulaşıldığında her zaman düzgün bir şekilde kaydırın: Evet
• Fare tekerleğinde veya dokunmatik kaydırmada sayfa kaydırmayı durdur: Evet
• Sayfa düzeni: otomatik
• Bir seferde yalnızca bir vurgulanan öğeye izin ver: Evet
• Bir sonraki öğe görüntülenene kadar geçerli öğeyi vurgulu tutun: Evet
• Sonraki hedefe göre vurgulayın: Evet
• Tıklanan bağlantının karma değerini tarayıcının URL/adres çubuğuna ekleyin: Evet
• Farklı sayfalardan/sayfalara kaydırma: Evet
• Sayfa yüklendiğinde hedefe kaydırma için 0 milisaniye gecikme
• Diğer komut dosyalarının eklenti bağlantılarını işlemesini önleyin (mümkünse): Evet
• Bağlantı noktası hedeflerini normalleştirin: Evet

Bölümlere CSS Kimliği ve Sınıfı Ekle

Yapmanız gereken bir sonraki şey, farklı CSS kimliklerini ve Kimlik CSS Sınıfında Sayfa Kaydırma'yı tek çağrı cihazınızın farklı bölümlerine atamak. Bunu yapmak için, bölümlerinizin her birinin ayarlarını açın ve Gelişmiş sekmesine gidin. Gelişmiş sekmesinde, bölümleriniz için kullanmak istediğiniz farklı CSS kimliklerine karar verin. Bilin ki, çalışması için tek çağrı cihazınızdaki bölümlerin her birine farklı bir CSS kimliği atamanız gerekecek.

Bu örnekte, ilk CSS kimliğimiz olarak 'ev' kullanıyoruz. Ancak CSS Sınıfı, bölümlerin her biri için aynıdır ve bölümü Sayfa Kaydırma to ID eklentisine bağlamanıza yardımcı olur. CSS sınıf adı 'ps2id'dir.

Menü Öğelerine Kimlik Ekle

Sırada, menü öğelerini oluşturma ve bunların bölümlerle ve Sayfa Kaydırma to ID eklentisiyle uyumlu olduğundan emin olma zamanı. WordPress Kontrol Panelinizdeyseniz, Görünüm > Menüler'e gidin. Zaten bir birincil menünüz varsa, bunun üzerinde çalışabilirsiniz. Değilse, başlığı yazıp yeni bir menü oluşturabilirsiniz. Ana menü yapmayı unutmayın.

Özel Bağlantıları Kullan

Ardından, istediğiniz sonuçları elde etmek için özel bağlantılara ihtiyacınız olacak. İlk özel bağlantıyı ekleyerek başlayın. Aşağıdaki ekran görüntüsünde gösterildiği gibi web sitenizi ve ardından ilk bölüm kimliğini bağlantı alanına ekleyin.

CSS Sınıflarını Etkinleştir

Yapmanız gereken bir sonraki şey, eğer geçmişte yapmadıysanız, menü öğeleriniz için CSS sınıflarını etkinleştirmektir. Bunu yapmak için sağ köşedeki 'Ekran Seçenekleri' seçeneğine tıklayın. Olasılıklar göründüğünde, CSS sınıflarını etkinleştirin.

Kimlik CSS Sınıfına Sayfa Kaydırmayı Kullan

Menü öğeleriniz için CSS sınıflarını etkinleştirdikten sonra, devam edebilir ve Sayfa Kaydırmayı Kimlik sınıfına manuel olarak menü öğelerinin her birine bağlayabilirsiniz. CSS sınıfı, bölümlerimize kimlik atamak için kullandığımızla aynıdır, yani 'ps2id'.

Görünüm Değişiklikleri Yap

Bu yöntemi kullanırken bile ana menünüzde her türlü değişikliği yapabilirsiniz. Değişiklikleri nasıl yapabileceğinizi size göstermek için dikey gezinme örneğimizi yeniden oluşturacağız.

Not: Bu yazının girişinde belirtildiği gibi, Sayfayı önizlerken yaptığınız değişiklikleri göremezsiniz. Sonuçları fark etmek için önce sayfayı yayınlamanız ve canlı modunda görüntülemeniz gerekir.

Tema Özelleştirici

Tema Özelleştirici > Başlık ve Gezinme > Birincil Menü'ye giderek başlayın ve birincil menünüzün nasıl görüneceğine ilişkin aşağıdaki değişiklikleri yapın:

• Logo Resmini Gizle: Evet
• Logo Maksimum Yükseklik: 83
• Menü Üst Kenar Boşluğu: 0
• Metin Boyutu: 14
• Harf Aralığı: -1
• Yazı Tipi: Lato Işık
• 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)

Özel CSS Tema Seçenekleri

Etkin bağlantı stilini değiştirmek için bazı Özel CSS kodları eklememiz gerekecek. WordPress kontrol panelinizdeyseniz Divi > Tema Seçenekleri > Genel sekmesini aşağı kaydırın ve aşağıdaki CSS kodu satırlarını Özel CSS kutusuna yapıştırın:

#top-menu .current-menu-item a.mPS2id-highlight{
background: black;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

Bunun yanı sıra, bu gönderide daha ayrıntılı olarak ele aldığımız örtüşen şeffaf bir menü de kullandık. Bu CSS değişikliklerini web sitenize de uygulamak için, aşağıdaki CSS kod satırlarını da kopyalayıp Özel CSS kutusuna yapıştırın:

@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;
}
}

Sonuçlar

Bu gönderideki tüm adımları takip ettiğinizde, şu nihai sonucu elde edebilmelisiniz:

Elbette, stili kendi tercihlerinize göre değiştirebilirsiniz (veya en iyi gezinme için de kullanabilirsiniz).

Son düşünceler

Bu öğreticide, tek sayfalık cihazlar için etkileşimli bir dikey gezinme menüsünün nasıl oluşturulacağını gösterdik. Almak istediğiniz sonuca kolayca ulaşmak için Divi temasıyla birlikte Page Scroll to ID eklentisini nasıl kullanabileceğinizi gösterdik. Gelecekteki bir gönderide, buna geri döneceğiz ve bu yöntemle kullandığınız aktif bağlantıları yaratıcı bir şekilde nasıl şekillendireceğinizi göstereceğiz. Herhangi bir sorunuz veya öneriniz varsa, 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!

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