One -Page Divi web sitesi için bir kaydırma üzerinde etkin bir bağlantı nasıl yapılır
Bugünün öğreticisinde, ziyaretçiler sayfayı kapattığında, vurgulanacakları parçaya uygun menü bağlantısı olacak şekilde dikey gezinme bağlantınızı nasıl düzenleyeceğinizi göstereceğiz. Bu, web tasarımınız ve kullanıcı davranışı arasında biraz etkileşim katan hoş bir küçük etkidir. Bir sayfa web sitesi oluşturursanız bu yöntem çok iyi çalışır. Bu etkiyi zihinlerinde hayal etmekte zorluk çekenler için, aşağıdaki önizlemeyi sağladık. Sonuçlar Bu yazıyı takip ettikten sonra elde edebileceğiniz nihai sonucu görelim:
Gördüğünüz gibi, vurgulanan etkin bağlantı, kullanıcı sayfa bölümünde (ayrıca tıklandığında) antrenman yaptığında otomatik olarak değişir. İlhamımız, Dikey Navigasyon hakkında yazımızda örnek olarak bahsettiğimiz Berlin Filmschool sitesinde bu yazı için ilham kaynağı buldu. Gönderi yorumlarındaki bir okuyucu, onlara aktif bir bağlantı efektinin nasıl oluşturulacağını göstermemizi istedi ve işte burada! Divi One Page Web Sitesi Aboneliğine Bir Kaydırma Nasıl Etkin Bağlantı Yapılır YouTube kanalına Başladığımız: Bu tasarımı yapmak için eklenti kimliğine sayfa kaydırmasını indirin, Ücretsiz ve Kuyan Scroll Page eklentisini kullanarak başlayacağız Burada bulabilirsiniz. ‘İndir’ düğmesini tıklayın ve hemen bulabileceğiniz bir yerde ZIP eklentisi dosyasını kaydedin. Yükle ve Eklenti Kimliğine Kaydırma Sayfasını Etkinleştirin Yapmanız gereken bir sonraki şey WordPress Dashboard> Eklentilere Gitmektir> Yeni Ekle> Yeni indirdiğiniz ve yüklediğiniz ZIP dosyasını seçin. Bundan sonra, eklentiyi de etkinleştirmeyi unutmayın. Dikey Navigasyonu Etkinleştir Kimlik eklentisi ayarlarına kaydırma girmeden önce, önce dikey navigasyonu (ve bir sonraki adımda sabit navigasyon) etkinleştireceğiz. WordPress kontrol panelini kullanıyorsanız, görünüm> Özelleştir> Başlık ve Navigasyon> Başlık Biçimi> ve Dikey Gezinmeyi Etkinleştirirseniz. Bir sonraki gezinmeyi etkinleştirin, web sitenizi etkinleştirelim. Bu gereklidir, çünkü parşömenlerde aktif bağlantıların kullanımının çekirdeği, ziyaretçilerin hangi kısımda olduklarını, içinde olduklarını görebilmeleridir. WordPress Gösterge Tablosunu kullanıyorsanız, Divi’yi açın> Tema seçeneğini> ve Navigasyon Bıçaklarını Etkinleştirme Genel sekmesinde kalır. Sayfayı kaydırın Bu bölüm için eklenti kimliği ayarlarına, yeni yüklenen eklentiye geri döneceğiz. Eklentiyi etkinleştirdikten sonra doğru ayarları kullanmanız gerekir. Ayarlara gitmek için eklentinin adının hemen altındaki ‘Ayarlar’ı tıklayın. Bunu bitirdikten sonra, web sitenizde aktif bağlantıların nasıl davranacağını belirlemenize yardımcı olan çeşitli seçenekler göreceksiniz. Yaptığımız örnekler için aşağıdaki ayarları kullanıyoruz: WordPress menü bağlantısında etkinleştirin: evetKaydırma Süresi: 200 milisaniye
Rulo süresini otomatik olarak ayarlayın: Evet
Animasyonlu parşömenler: doğrusal
Sayfanın sonuna ulaştığında daima sorunsuz kaydırın/belge: evet
Bir fare tekerleği ile bahçeyi durdurun veya kaydırma yapın: Evet
Sayfa Düzeni: Otomatik
Bir seferde sadece bir öğenin vurgulanmasına izin verin: evet
Bir sonraki görünene kadar vurgulanan geçerli öğeyi koruyun: Evet
Bir sonraki hedefe vurgu: Evet
URL/Tarayıcı adresine tıklanan bağlantıların döküntü değerini ekleyin: Yagulir’den/farklı sayfalara: evet
Yükleme sayfasındaki hedefe kaydırmak için 0 milisaniyenin ertelenmesi
Eklenti bağlantılarını işleyen diğer komut dosyalarını önleyin (mümkünse): Evet
Çapa noktasının hedefini normalleştirin: Evet
CSS Kimliği ve Sınıfını yapmanız gereken bir sonraki şeye ekleyin, farklı bir CSS kimliği ve CSS sınıf kimliğindeki kaydırma sayfasını bir sayfanızdaki farklı bir bölüme ayarlamaktır. Bunu yapmak için, parçalarınızın her birinin ayarlarını açın ve devam eden sekmeyi açın. Gelişmiş sekmesinde, kendi tarafınız için kullanmak istediğiniz çeşitli CSS kimliklerini belirleyin. İşleyebilmek için, bir sayfanızdaki her bölüm için farklı bir CSS kimliği ayarlamanız gerektiğini bilin.
Bu örnekte, ilk CSS kimliğimiz olarak ‘ev’ kullanıyoruz. Bununla birlikte, CSS sınıfı her bölüm için aynıdır ve bölümü eklenti sayfası kaydırmasına kimliğe bağlamanıza yardımcı olur. CSS sınıf adı ‘PS2ID’dir. Kimliği bir sonraki menü öğesine ekleyin, bir öğe menüsü oluşturma ve bölümle eşleştiğinden ve kaydırma eklentisiyle eşleştiğinden emin olmanın zamanı geldi. WordPress Gösterge Tablosunu kullanıyorsanız, görünüm> menüleri açın. Zaten ana menünüz varsa, bunu yapabilirsiniz. Değilse, başlığı yazabilir ve yeni bir menü oluşturabilirsiniz. Ana menü yapmayı unutmayın. Bir sonraki özel bağlantıyı kullanın, istediğiniz sonuçları elde etmek için özel bir bağlantıya ihtiyacınız olacaktır. İlk özel bağlantıyı ekleyerek başlayın. Web sitenizi ve ardından aşağıdaki ekran görüntülerinde gösterildiği gibi bağlantılar alanına ilk bölüm kimliğini ekleyin. CSS sınıfını etkinleştirin Bir sonraki şey, daha önce hiç yapmadıysanız, menü öğeniz için CSS sınıfını etkinleştirmektir. Bunu yapmak için sağ köşedeki ‘Ekran seçeneği’ seçeneğini tıklayın. Görünme olasılığından sonra CSS sınıfını etkinleştirin. Menü öğeniz için CSS sınıfını etkinleştirdikten sonra CSS sınıf kimliğine sayfa kaydırmasını kullanın, sayfa kaydırma sınıfını kimliğe her menü öğesine bağlayabilir ve manuel olarak bağlayabilirsiniz. CSS sınıfı, kimliğimizi belirlemek için kullandığımızla aynıdır, yani ‘PS2ID’.
Görünüm değişikliğinizi oluşturun, bu yöntemi kullansanız bile ana menünüzde her türlü değişiklik yapabilir. Size nasıl değişiklik yapabileceğinizi göstermek için, dikey navigasyonumuzun bir örneğini yeniden oluşturacağız.
Not: Bu yayının tanıtımında belirtildiği gibi, sayfaları gördüğünüzde yaptığınız değişiklikleri göremezsiniz. Sonuçları görmek için önce sayfaları yayınlamalı ve doğrudan modda görmelisiniz. Tema ayarı, Tema Ayarı> Başlık ve Navigasyon> Ana Menü girerek başlar ve ana menü ekranınızda aşağıdaki değişiklikleri yaparak başlar: Logo resimlerini gizle: evet Max Logo: 83
Menü Marjı: 0
Metin Boyutu: 14
Mektup alanı: -1
Yazı Tipi: Lato Light
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 özel tema seçeneği Aktif bağlantı stilini değiştirmek için bazı özel CSS kodunu eklemeliyiz. WordPress kontrol panelindeyseniz, Divi’yi açıyorsanız> Tema Seçenekleri> Genel sekmesini aşağı kaydırın ve CSS Kustom kutusundaki aşağıdaki CSS kodunu yapıştırın: #top-men. Mevcut-menu-öğe A.Mps2id-Highlight {arka plan: Siyah ;
sınır üstü: 1px katı #ffffff;
Sınır dip: 1px katı #ffffff; Dolgu Top: 15px;
} Ayrıca, bu yazıda daha ayrıntılı olarak ele aldığımız üst üste binen şeffaf menüyü de kullanıyoruz. CSS değişikliklerini web sitenize de uygulamak için, özel CSS kutusuna 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;
}
. Konteyner {
Marj-sol:%3! Önemli;
}
.et_vertical_nav #Page-Container #Play-Header {
Box-Shadow: Yok! Önemli;
}
}
Sonuçlar Bu yazıdaki tüm adımları izledikten sonra, bu nihai sonucu elde edebilmelisiniz:
