Divi'de Kaydırma İlerleme Çubuğu ile Sabit Gezinme Menüsü Nasıl Birleştirilir

İlerleme Çubuğu Göstergeleri, web sitenize hoş bir dokunuş katabilir ve kullanışlı (ve eğlenceli) bir etkileşimle UX'i artırabilir. Normalde ilerleme çubukları, sayfanın gerçek içeriğiyle fazla bağlantı kurmadan sayfanın üst kısmında tek başına durur. Kullanıcının sadece sayfada nerede olduklarının görsel bir göstergesi vardır. Ancak bugün, bu işlevi başka bir düzeye taşıyacağız.

Bu eğitimde, size Divi'de bir kaydırma ilerleme çubuğunun sabit bir gezinme menüsü ile nasıl birleştirileceğini göstereceğiz. Bu tasarım, ilerleme çubuğunun menü düğmelerinin genişliğiyle ilişkili olması bakımından benzersizdir. Ve menü düğmelerinin genişliği (yüzde olarak) sayfadaki içeriğin kaydırılabilir bölümlerinin yüksekliğine eşit olduğundan, kullanıcı düğmenin ilgili bölümüne ulaştığında her düğme kaydırma ilerleme çubuğu tarafından tam olarak doldurulacaktır. Ve bu yeterli değilse, ek bir UX bonusu için her düğmeyi ilgili bölümlere bir bağlantı bağlantısı yapacağız!

Bu tasarım, bir işlemin adımlarını açıklayan bir açılış sayfası aracılığıyla bir kullanıcıyı getirmek için mükemmel olurdu. Göreceksin.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

https://youtu.be/Kf-ciVKEZFI

Youtube Kanalımıza Abone Olun

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Bölüm 1: Tam Ekran Bölüm Sayfa Düzenini Oluşturma

Üst Bölüm

Başlamak için bölüme tek sütunlu bir satır ekleyin.

Modül eklemeden önce satır ayarlarını aşağıdaki gibi güncelleyin:

• Genişlik: %100
• Maksimum Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt

Satırın içine bir metin modülü ekleyin.

Ardından metin modülünün ayarlarını açın ve renkli bir başlık oluşturmak için aşağıdaki HTML'yi yapıştırın:

<h2><span style="color: #00A4E0;">Let's</span><span style="color: #EE4266;>get</span style="color: #2a1e5c;>star</span><span style="color: #26c485;">ted</span></h2>

Tasarım sekmesi altında, metin hizalamasını ortaya güncelleyin.

Aşağıdaki H2 Başlık stillerini güncelleyin:

• Başlık 2 Yazı Tipi: Roboto
• Başlık 2 Metin Boyutu: 6vw

Bölüm ayarlarını açın ve yüksekliği 100vh (veya görüntü alanı/pencere yüksekliğinin %100'ü) olacak şekilde güncelleyin. Bu, bölümün tam ekran olduğundan emin olacaktır. Ardından dolguyu aşağıdaki gibi çıkarın:

• Yükseklik: 100vh
• Dolgu: 0 piksel üst, 0 piksel alt

Bölüm içindeki satırın/içeriğin bölüm içinde dikey olarak ortalandığından emin olmak için, Bölümün Ana Öğesine aşağıdaki özel CSS'yi ekleyin:

display:flex;
flex-direction:column;
justify-content:center;

Birinci Adım Bölüm

Düzendeki bir sonraki bölüm, dört adımın ilki olacaktır. Aynı zamanda ilk menü bağlantı bağlantımızın kaydırılacağı ilk bölümdür.

İlk adım bölümünü oluşturmak için, az önce oluşturduğumuz üst bölümü çoğaltın.

Ardından yinelenen bölümün ayarlarını açın ve arka plan rengini güncelleyin:

• Arka Plan Rengi: #222222

Ardından, metin ayarlarını açın ve gövde metnini aşağıdakiyle değiştirin:

<h2>Step One...</h2>
Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur. 

Metin hizalamasını sola hizalı olarak değiştirin.

Ardından aşağıdakileri güncelleyin:

• Başlık 2 Metin Rengi: #00a4e0
• Maksimum Genişlik: 40vh (masaüstü), 80vh (tablet)
• Modül Hizalaması: merkez

Bu, birinci adım bölümüyle ilgilenir.

İkinci Adım Bölüm

İkinci adım bölümünü oluşturmak için, az önce oluşturduğumuz birinci adım bölümünü çoğaltın.

Bölüm ayarlarını açın ve arka plan renginin üstüne aşağıdaki gibi bir arka plan gradyanı ekleyin:

• Sol Gradyan Arka Plan Rengi: rgba(255,255,255,0.85)
• Sağ Gradyan Arka Plan Rengi: rgba(255,255,255,0.85)

Ardından başlık rengini güncelleyin:

• Başlık 2 Metin Rengi: #ee4266

Bu bölümün arka plan ve başlık rengi, daha sonra oluşturacağımız menüde bu bölümle ilişkilendirilen buton renkleriyle eşleşecektir.

Üçüncü Adım Bölüm

Üçüncü adım bölümünü oluşturmak için ikinci adım bölümünü çoğaltın ve sayfanın en altına sürükleyin.

Ardından metin modülünün başlık rengini değiştirin.

• Başlık 2 Metin Rengi: #26c485

Dördüncü Adım Bölüm

Son adımımız dördüncü adım. Bu bölümü oluşturmak için ikinci adım bölümünü çoğaltın ve sayfanın en altına sürükleyin.

Ardından, o bölümdeki metin modülünün başlığını güncelleyin.

• Başlık 2 Metin Rengi: #2a1e5c

Sonuç

İşte şimdiye kadar yaptığımız düzenin sonucu.

Bölüm 2: Kaydırma İlerleme Çubuğu ve Menüsü Oluşturma

Bu sonraki bölüm, nihayet menü düğmelerimizle kaydırma ilerleme çubuğunu oluşturduğumuz yerdir. Buradaki fikir, sayfanın üstüne sabit bir bölüm eklemektir. Ardından, bölümün içinde, ilerleme çubuğu göstergemiz olarak hizmet edecek bir bölücü modül içeren bir satır oluşturacağız. İlerleme çubuğunun olduğu satırın üstüne, butonlarımızı içerecek başka bir satır ekleyeceğiz. Kullanıcı sayfayı aşağı kaydırırken arkasındaki ilerleme çubuğunu ortaya çıkarmak için her düğmenin şeffaf (veya yarı saydam) bir arka planı olacaktır.

Başlamak için sayfanın üst kısmındaki sabit bölümü oluşturalım. Devam edin ve yeni bir normal bölüm oluşturun ve onu sayfa düzeninin en üstüne sürükleyin.

Bölüm ayarlarını açın ve dolguyu aşağıdaki gibi çıkarın:

• Dolgu: 0 piksel üst, 0 piksel alt

Gelişmiş sekmesi altında aşağıdakileri güncelleyin:

• Pozisyon: Sabit
• Z İndeksi: 999

Bu, kolay bağlantı bağlantısı işlevi için bölümün tarayıcı penceresinin üst kısmında sabit kalmasını sağlayacaktır. Ayrıca, bölümün belgenin/html'nin normal akışından ayrılmasını ve genel belgenin yüksekliğine katkıda bulunmamasını sağlayacaktır. Bu, kullanıcı kaydırma sırasında sayfadaki her bölüme/adıma ulaştığında kaydırma çubuğunun her düğmenin sonuna ulaşmasını sağlayacaktır.

Bölümün içine tek sütunlu bir satır ekleyin.

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt
• Pozisyon: Mutlak

Sütun ayarlarını açın ve aşağıdaki Özel CSS'yi Ana Öğeye ekleyin:

height: 100%;
display:flex;
align-items:center;

Bu, sütunun bölümle aynı yüksekliğe sahip olmasını sağlayacaktır. Ayrıca modüllerin de %100 yüksekliğe sahip olmasını sağlayacaktır. Bu, ilerleme çubuğunun bölümü doldurduğundan emin olmanın anahtarı olacaktır.

İlerleme çubuğunu oluşturmak için sütuna bir ayırıcı modül ekleyin.

Ardından, ayırıcı ayarlarını aşağıdaki gibi güncelleyin:

• Bölücüyü Göster: HAYIR
• Arka Plan Rengi: #222222

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

NOT: Tasarım içerisinde görebilmeniz için burada ilerleme çubuğuna %100 genişlik veriyoruz. JQuery ile bölücü/ilerleme çubuğunun genişliğini artırıp azaltacağız.

Gelişmiş sekmesinin altına bir CSS kimliği ekleyin ve ona mutlak bir konum verin.

• CSS kimliği: kaydırma çubuğu
• Pozisyon: Mutlak

Yüzde Metin Göstergesini Ekleme

Ardından, kullanıcı sayfayı aşağı kaydırırken kaydırma konumunun yüzdesini gösterecek bir yer ekleyeceğiz. Bu, ilerleme çubuğunun genişliğiyle ilişkilendirilecektir.

Ayırıcının altına bir metin modülü ekleyin.

Ardından aşağıdaki HTML'yi gövdeye yapıştırın:

<p><span></span></p>

JQuery'miz bu HTML'ye yüzde metnini yazacaktır (span etiketleri arasına). Artık hiçbir şey göremezsiniz.

Yüzde metni henüz görünmese de, görünmesini umarak aşağıdaki stili eklememiz gerekiyor.

• Metin Yazı Tipi: Roboto
• Metin Yazı Tipi Stili: TT
• Metin Metin Rengi: #ffffff
• Metin Metin Boyutu: 16px
• Dolgu: 0,8em üst, 0,8 alt, 15 piksel sol

Gelişmiş sekmesi altında, ona özel bir CSS Sınıfı verin ve telefonda ve tablette devre dışı bırakın.

• CSS Sınıfı: et-ilerleme etiketi
• Devre Dışı Bırak: Telefon, Tablet

Bitirmemiş olsak da, bu, kaydırma ilerleme çubuğunu ve yüzdesini göstermek için gereken özel kodumuzu eklemek için iyi bir nokta.

Kodu eklemek için metin modülünün altına bir kod modülü ekleyin.

Ardından, gerekli komut dosyası etiketleriyle sardığınızdan emin olarak aşağıdaki kodu kod kutusuna yapıştırın:

(function($) {
$(document).ready(function(){
var docHeight = $(document).height();
var winHeight = $(window).height();
var $scrollBar = $('#scrollBar');
var $progressLabel = $('.et-progress-label p span'); 
$scrollBar.css('width', 0);
$progressLabel.html('0%');
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100);
$scrollBar.css('width', (scrollPercentage + '%'));
$progressLabel.html( Math.round(scrollPercentage) + '%');
});
});
})( jQuery );

Bu, ilerleme çubuğu ve yüzde metniyle ilgilenir. Navigasyon menüsüne geçelim.

Bağlantı Bağlantılarıyla Menü Düğmelerini Oluşturma

Artık, tarayıcının tüm genişliğini kapsayan dört düğmeyi içeren gezinme menüsünü oluşturmaya hazırız. Kullanıcı bağlantı verdiği ilgili bölüme ulaştığında kaydırma çubuğunun her düğmeyi doldurmasının harika olacağını düşündüm. İşte fikir. Her düğme, tarayıcının toplam genişliğinin %25'i kadar genişliğe sahip olacaktır. Ve dört bölümümüz de aynı yüksekliğe (100vh) sahip olduğundan, dört bölümün her biri sayfa düzeninin toplam kaydırılabilir alanının %25'ini temsil eder. Bu, ilgili bölüm görünümü doldururken ilerleme çubuğunun her düğmenin sonuna tam olarak ulaşmasını sağlayacaktır. Bunu yakaladın mı? Değilse, umarım daha sonra daha mantıklı olur.

Satır ve Sütun

Menü butonlarını oluşturmak için önce ilerleme çubuğunu/bölücüyü içeren satırın altında dört sütunlu bir satır oluşturmamız gerekiyor.

Satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: %100
• Dolgu: 0 piksel üst, 0 piksel alt

Sütunların mobil cihazlarda yığılacağından emin olmak için Ana Öğeye aşağıdaki özel CSS'yi eklememiz gerekiyor:

display:flex;
flex-wrap:nowrap;

Birinci Adım Düğmesi

İlk düğmeyi oluşturmak için en soldaki sütuna bir düğme modülü ekleyin.

Düğme metnini ve bağlantı URL'sini aşağıdaki gibi güncelleyin:

• Düğme Metni: Adım 1
• Düğme Bağlantı URL'si: #one
  (bu bağlantı bağlantısı, daha sonra ekleyeceğimiz ilgili CSS kimliğiyle bölümü atlayacaktır)

Ardından, düğme stillerini aşağıdaki gibi güncelleyin:

• Düğme Hizalama: Merkez
• Düğme Metin Boyutu: 20px (masaüstü), 14px (tablet)
• Düğme Arka Plan Rengi: şeffaf
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Harf Aralığı: 0.2em
• Düğme Yazı Tipi: Roboto
• Düğme Yazı Tipi Stili: TT
• Dolgu: 0,8em üst, 0,8em alt, 0 sol, 0 sağ

Düğmeyi sütunun tüm genişliğine yaymak için ana öğeye aşağıdaki özel CSS'yi ekleyin:

display:block !important;
width: 100%;

2. Adım Düğmesi

İkinci adım için düğme oluşturmak için birinci sütundaki düğmeyi çoğaltın ve 2. sütuna sürükleyin.

Ardından aşağıdakileri güncelleyin:

• Düğme Metin Rengi: #ee4266
• Düğme Arka Plan Rengi: rgba(255,255,255,0.85)

Yarı saydam arka plan rengi, karşılık gelen ikinci adım bölümü arka planıyla eşleşmesi için siyah ilerleme çubuğu rengiyle (arkasında) birleştirilecektir.

Ardından, düğme bağlantı URL'sini aşağıdakilerle güncelleyin:

• Düğme Bağlantı URL'si: #iki

3. Adım Düğmesi

3. adım düğmesini oluşturmak için 1. adım düğmesini çoğaltın (aynı bg rengine sahiptir) ve 3. sütuna sürükleyin.

Ardından düğme metin rengini güncelleyin:

• Düğme Metin Rengi: #26c485

Ardından, düğme bağlantı URL'sini aşağıdakilerle güncelleyin:

• Düğme Bağlantı URL'si: #üç

4. Adım Düğmesi

3. adım düğmesini oluşturmak için 2. adım düğmesini çoğaltın (aynı bg rengine sahiptir) ve 4. sütuna sürükleyin.

Ardından düğme metin rengini güncelleyin:

• Düğme Metin Rengi: #2a1e5c

Ardından, düğme bağlantı URL'sini aşağıdakilerle güncelleyin:

• Düğme Bağlantı URL'si: #dört

Bağlantı Bağlantıları için Karşılık Gelen Bölüm CSS Kimliklerini Ekleme

Düğmeler bittiğinde ve hepsinin bağlantı bağlantı URL'leri olduğunda, her düğmenin sayfada atlamasını istediğimiz her bölüme karşılık gelen bölüm CSS kimliklerini ekleyebiliriz.

Birinci Adım Bölüm CSS Kimliği

Birinci adım bölümünün ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:

• CSS kimliği: bir

İkinci Adım Bölüm CSS Kimliği

İkinci adım bölümünün ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:

• CSS kimliği: iki

Üçüncü Adım Bölüm CSS Kimliği

Üçüncü adım bölümünün ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:

• CSS kimliği: üç

Dördüncü Adım Bölüm CSS Kimliği

Dördüncü adım bölümünün ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:

• CSS kimliği: dört

Son sonuç

Son düşünceler

Bu ilerleme çubuğu menüsü, kesinlikle çeşitli uygulamalar için potansiyele sahip benzersiz bir tasarımdır. Umarım, bir sonraki projenizde size yardımcı olur. Ve kendi ilerleme çubuğu menünüzü oluşturmak için Divi oluşturucuda bulunan sayısız tasarım varyasyonunu keşfetmekten çekinmeyin.

Yorumlarda sizden haber bekliyorum.

Şerefe!