Divi ile Düzgün Kaydırılan Bağlantı Bağlantıları ile Duyarlı Sabit Kenar Çubuğu Nasıl Oluşturulur

Kenar çubukları eskisi kadar popüler değil. Çoğu durumda, yararlı olduklarından daha fazla dikkat dağıtıcı olurlar. Ancak bazen bir kenar çubuğu, özellikle uzun içerikle uğraşırken mükemmel bir anlam ifade eder. Bu yüzden çok mantıklı bir kenar çubuğu oluşturmaya başladım.

Bugün size, düzgün kayan bağlantı bağlantılarına (veya atlama bağlantılarına) sahip duyarlı, sabit (veya yapışkan) bir kenar çubuğu oluşturmak için Divi Builder'ı nasıl kullanabileceğinizi gösteriyorum. Kenar çubuğu görünür durumda kaldığından ve bağlantı bağlantıları sayfadaki farklı bölümlere sorunsuzca kaydırıldığından, kenar çubuğu içerikle evli kalır ve onu yararlı bir UX özelliği haline getirir. Bir belge taslağı gibi, bu kombinasyon web sayfası içeriğinizi daha erişilebilir ve okunması daha kolay hale getirir. Bu uzun kaydırma sayfaları için canlandırıcı bir çözümdür.

Bunu kontrol et!

Gizlice Bakış

İşte birlikte inşa edeceğimiz şeyin gizli bir zirvesi.

Kavram

Benim kadar Google Dokümanlar'da yaşayanlarınız için, belgenizdeki farklı başlıklara atlayan tıklanabilir bir anahatla sabit bir kenar çubuğunu kolayca dağıtmanıza olanak tanıyan bu yararlı belge anahat aracının farkındasınız. Bilgiyi çok daha hızlı bulmama yardımcı olduğu için seviyorum. Aynı özelliği web sitenize getirmenin harika olacağını düşündüm.

Başlamak için Gerekenler

Bu eğitim için gerçekten ihtiyacınız olan tek şey Divi! Divi Builder'dan ücretsiz olarak erişilebilen Yemek Tarifleri Düzen Paketindeki Tarifler Sayfasını da kullanacağız.

Sayfanıza Düzeni Ekleme

Youtube Kanalımıza Abone Olun

Başlamak için devam edin ve yeni bir sayfa oluşturun ve Divi Builder'ı dağıtın. “Hazır Düzen Seçin” seçeneğini seçin. Kitaplıktan Yükle açılır penceresinden Yemek Tarifleri Düzen Paketini seçin ve ardından Tarifler Sayfasını kullanmak için tıklayın.

Düzen yüklendikten sonra, ön uçta oluşturmak için tıklayın.

Yeni Bölüm Oluşturma

Divi Builder'ın ön ucundan yeni bir bölüm oluşturun ve onu düzenin en üstüne sürükleyin.

Düzenin başlık bölümündeki düğmeyi kopyalayın ve oluşturduğunuz yeni bölümün tek sütunlu satırına yapıştırın.

Düğme ayarlarını açın ve aşağıdaki özel CSS'yi gelişmiş sekmenin altındaki Ana Öğeye ekleyin:

display: block !important;

Bu, düğmenin sütunun tüm genişliğini kapsamasına izin verir.

Düğme metnini “Giriş” olarak değiştirin. Ardından, düğme bağlantı url'si için aşağıdakileri ekleyin:

#Giriş

Bu şekilde bir çapa bağlantısı oluşturursunuz. Hashtag (#), tarayıcıya bir CSS kimliğine bağlayacağınızı söyler. Aşağıdaki “introduction” metni, mizanpajdaki bölümlerimizden birine ekleyeceğimiz CSS ID ismine karşılık gelecektir. CSS kimliğinin adı istediğiniz herhangi bir şey olabilir. Bölüme daha sonra vereceğiniz CSS kimliğiyle eşleştiğinden emin olun.

Düğmeyi çoğaltın ve ardından düğmeye yeni bir Düğme Metni ve yeni bir Düğme Bağlantı URL'si verme işlemini tekrarlayın. Bu, sayfanın farklı bir bölümüne atlayan bir bağlantı bağlantısı olacağından, CSS kimliğinin (“#” dan sonraki metin) benzersiz olduğundan ve daha sonra bölümünüze vereceğiniz isme karşılık geldiğinden emin olun.

Bu düğme için düğme metnini "İçindekiler" ve düğme bağlantı URL'sini "#içerikler" olarak değiştirin.

Düğmeyi tekrar çoğaltın ve ardından yeni düğmeye "Beslenme" düğme metnini verin ve düğme bağlantı URL'sini "#nutrition" olarak değiştirin.

Düğmeyi bir kez daha çoğaltın ve ardından yeni düğmeye düğme metnini "Talimatlar" verin ve düğme bağlantısı URL'sini "#instructions" olarak değiştirin.

Şimdilik yapmamız gereken tek şey bu. Birazdan sabit bir kenar çubuğuna çevirerek bu bölüme geri döneceğiz.

Bölümlere ve Satırlara CSS Kimlikleri Ekleme

Bağlantı linkleri ile oluşturulan tüm butonlarımıza sahip olduğumuza göre, ilgili CSS ID adlarını bölümlerimize ve satırlarımıza eklemeye hazırız.

Bağlantı bağlantıları, ilgili CSS kimliğine sahip sayfadaki herhangi bir öğeye otomatik olarak atlayacaktır. Satır içi metne, modüllere, satırlara veya bölümlere bir CSS kimliği uygulanabilir. HTML kullanarak başlığa bir CSS kimliği eklemek isterseniz, şöyle görünür:

<h2 id="introduction">Introduction</h2>

Ancak sayfanın bir bölümüne atlamak istediğimiz için CSS ID'sini sayfanın belirli bölümüne ekleyebiliriz. Bu, kullanıcıya, ziyaretçinin sayfada nerede olduklarını kolayca tanıması için yeterli rahat görüntüleme alanı sağlayacaktır. Satır içi metne veya bir modüle atlamak ziyaretçi için kafa karışıklığına neden olabilir.

Daha önce ele aldığımız gibi, oluşturduğumuz düğme URL'lerinin her biri, atlamaları gereken bölümlerin CSS kimliklerine karşılık gelir.

“Introduction” butonu için sayfanın giriş içeriğinin bulunduğu bölüme CSS ID'yi eklememiz gerekiyor. Bunu yapmak için sayfanın üçüncü bölümünün (doğrudan başlığın altındaki bölüm) bölüm ayarlarını açın ve gelişmiş sekmesinin altına aşağıdaki CSS kimliğini ekleyin:

CSS kimliği: giriş

Bu, daha önce oluşturduğumuz Giriş bağlantı bağlantısı düğmesine karşılık gelecektir.

Şimdi aynı bölümde, "İçindekiler" başlığını içeren satırı bulun. Ardından satır ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:

CSS kimliği: bileşenler

Bu, daha önce oluşturduğumuz Malzemeler bağlantı bağlantısı düğmesine karşılık gelecektir.

“Beslenme” başlıklı bir sonraki bölüme ilerleyin ve bölüm ayarlarını açın. Ardından aşağıdaki CSS kimliğini ekleyin:

CSS kimliği: beslenme

Bu, daha önce oluşturduğumuz Nutrition bağlantı bağlantısı düğmesine karşılık gelecektir.

Son olarak, "Adım Adım Talimatlar" başlıklı düzenin bir sonraki bölümüne ilerleyin. Ardından bölüm ayarlarını açın ve gelişmiş sekmenin altına aşağıdaki CSS kimliğini ekleyin:

CSS kimliği: talimatlar

Bu, daha önce oluşturduğumuz Talimatlar bağlantı bağlantısı düğmesine karşılık gelecektir.

Değişikliklerinizi kaydedin.

Bağlantı bağlantılarınızın çalışıp çalışmadığını görmek için iyi bir zaman. Sayfayı yeni bir sekmede açın ve sayfadaki ilgili konumlarına atladıklarından/kaydıklarından emin olmak için üst kısımdaki düğmelere tıklayın.

Çalışmıyorlarsa geri döndüğünüzden ve CSS kimliklerinin doğru ve eşleştiğinden emin olun.

Sabit Kenar Çubuğu Düzenini Oluşturma

Kenar Çubuğu için Alan Yaratmak İçin Bölümlere Sol Kenar Boşluğu Ekleme

Sayfanın üst kısmında bağlantı bağlantılarının olması, içindekiler gibi şeyler için iyidir. Ancak bu kullanım durumu için, kullanıcının bağlantılardan birini tıkladıktan sonra sayfanın en üstüne geri dönmesine gerek kalmaması için bu bağlantı bağlantılarını kullanıcı tarafından her zaman görünür durumda tutmak istiyoruz. Sabit bir kenar çubuğu bu sorunu çözecektir çünkü kullanıcı bağlantı bağlantılarını tıkladıkça sayfanın kenarında sabit kalacaktır.

Ancak kenar çubuğunu konumlandırmadan önce, sayfamızın sol tarafında onun için biraz boşluk oluşturmamız gerekiyor. Bunu yapmak için mizanpajın her bölümüne bir sol kenar boşluğu ekleyeceğiz.

Her bölüme eklediğimiz sol kenar boşluğu miktarı, kenar çubuğunun genişliğine eşit olacaktır, dolayısıyla şimdi kenar çubuğunun ne kadar geniş olmasını istediğinize karar vermenin zamanı geldi. Bu örnek için %20 genişlik yeterli olacaktır.

İkinci bölümün (doğrudan bağlantı bağlantı düğmelerimizin altındaki) ayarlarını açın ve aşağıdaki özel kenar boşluğunu ekleyin:

Özel Marj: %20 kaldı

Şimdi ayarları kaydetmeden önce, Özel Kenar Boşluğu seçeneğine sağ tıklayın ve “Özel Kenar Boşluğunu Kopyala” seçeneğine tıklayın ve ayarları kaydedin.

Sayfa düzeniniz boyunca kalan bölümlerin her birinde, bölüme sağ tıklayıp "Özel Kenar Boşluğunu Yapıştır" seçeneğine tıklayarak özel kenar boşluğunu bölüme yapıştırın.

Bu, bağlantı bağlantı düğmelerini içeren en üst bölüm hariç tüm bölümlerinize %20'lik bir sol kenar boşluğu verecektir.

Sabit Kenar Çubuğu Oluşturma

Kenar çubuğunu oluşturmak için sayfanın solunda sabit bir konum vermemiz gerekecek. Temel olarak, üst kısmı sabit bir kenar çubuğuna çevireceğiz. Bunu yapmak için üst bölümün ayarlarını açın ve aşağıdakileri güncelleyin:

Tasarım sekmesi altında, yüksekliği ve genişliği güncelleyin…

Genişlik: 20%
Yükseklik: %100

Gelişmiş sekmesi altında, konumu güncelleyin…

pozisyon: sabit
Dikey Ofset: 80 piksel

Bu, bölüme sayfanın %20'si genişliğinde sabit bir konum verir. Ayrıca bölümü sayfanın soluna ve üstbilgi gezinme yüksekliğine uyum sağlamak için sayfanın üstünden 80 piksele konumlandırır. %100 yükseklik, bölümün sayfanın tüm yüksekliğine yayılmasını sağlar.

Şimdi işlevselliği görmek için sayfayı başka bir tarayıcı sekmesinde görüntüleyin. Sayfayı aşağı kaydırırken kenar çubuğu sabit kalır ve farklı bölümlere kolaylıkla gitmek için bağlantı bağlantı düğmelerini tıklayabilirsiniz.

Alt Bilgi Örtüşmesini Düzeltme

Bölümün, sayfanın alt kısmındaki alt bilgi çubuğuyla örtüştüğünü fark etmiş olabilirsiniz.

Bu sorunu çözmenin birkaç yolu vardır. Örneğin, bölümden “height: 100%” öğesini çıkarabilirim veya alt bilgi çubuğunun genişliğini ayarlamak için sayfa ayarlarına biraz CSS ekleyebilirsiniz. Ancak bölüm yüksekliğini %100'de tutmak istiyorsanız, kolay bir düzeltme bölümün arka plan rengini çıkarmaktır. Kenar çubuğu için kullandığımız bölümün bölüm ayarlarını açın ve aşağıdaki arka plan rengini ekleyin:

Arka Plan Rengi: rgba(255,255,255,0)

Kenar çubuğunun rengini değiştirmek isterseniz sayfa ayarlarını açıp İçerik Alanı Arka Plan Rengini değiştirebilirsiniz.

Bölüm arka plan rengi şeffaf olduğundan, sayfanızın içerik alanı arka plan rengi öne çıkar. Ve diğer tüm bölümlerimiz arka plan rengine sahip olduğundan, alt alt bilgi çubuğuyla örtüşmeden yalnızca kenar çubuğu bölümünden gösterilecektir.

Mobil için Ayarlamalar Yapma

Bu tasarım akıllı telefonlar için gerçekten bir anlam ifade etmiyor çünkü kenar çubuğu için yer yok ve sayfanın üst kısmında bağlantılara sahip olmak, kullanıcının bir bağlantı bağlantısını her tıklamak istediğinde geri kaydırmasını gerektirecek. Ancak tasarım tablet için çalışmaya devam edecek, ancak bu bağlantı bağlantıları için biraz daha yer açmanız gerekebilir. Bunu yapmak için, bölüm kenar çubuğunun satırının satır ayarlarını açın ve aşağıdakileri güncelleyin:

Özel Genişlik: 100
Özel Dolgu (masaüstü): %10 sol, %10 sağ
Özel Dolgu (tablet): %0 sol, %0 sağ

Şimdi tek yapmamız gereken akıllı telefondaki bölümü gizlemek (veya devre dışı bırakmak). Bunu yapmak için bölüm ayarlarını açın ve gelişmiş sekmeye gidin ve akıllı telefonda devre dışı bırakmak için onay kutusunu tıklayın.

Bu kadar. Artık düzgün kayan bağlantı bağlantılarına sahip duyarlı, sabit bir kenar çubuğu menünüz var!

Nihai Sonuç

Şimdi nihai sonucu kontrol edelim.

Ve işte düzen tablette nasıl görünüyor.

Sabit Elemanlar ve Bağlantı Bağlantıları Hakkında Daha Fazla Bilgi Edinin

Bu öğreticiyi faydalı bulduysanız, aşağıdaki ilgili eğitimlerimizden bazılarına göz atın:

• Anchor Linklerle Divi'de Yapabileceğiniz 5 Harika Şey
• Herhangi Bir Divi Sayfa Elemanı Nasıl Yapışkan Yapılır
• WordPress'te Kenar Çubuğunuza Sabit Pencere Öğeleri Nasıl Eklenir
• Divi Navigasyonunuzu Alttan Başlatma, Sonra Kaydırırken Üstte Sabit Kalma
• Divi Altbilginizi Nasıl Sabit Yapabilirsiniz?
• Divi'de Kayan Açılır Menü Nasıl Oluşturulur

Son düşünceler

Bu kurulumun güzelliği, farklı bağlantı bağlantılarına (veya istediğiniz herhangi bir şeye) sahip herhangi bir sayfaya sabit kenar çubuklarını kolayca ekleyebilmenizdir. Kenar çubuğunuz temelde bir Divi bölümü olduğundan, yerleşik ayarları kullanarak özelleştirebilir, daha fazla satır ekleyebilir ve istediğiniz herhangi bir modül kombinasyonunu kullanabilirsiniz.

Bu kurulum üyelik kursları, öğreticiler, SSS'ler, portföyler veya uzun blog gönderileri için harika olacaktır. Hatta tek sayfalık web siteleri için de kullanabilirsiniz. Paylaşmak için başka kullanımlarınız var mı? Yorumlarda ne olduklarını duymakla ilgileniyorum.

Şerefe!