Hiç geleneksel bir kaydırma çubuğu yerine dikey bir ilerleme izleyicisi oluşturmaya çalıştınız mı? Değilse, nasıl oluşturulacağını öğrenmek için bu makaleye sonuna kadar göz atın. Elementor Pro.
Ancak ana temayı ele almadan önce, ilerleme izleyicinin ne olduğunu hatırlayalım.
İlerleme izleyicisi, kullanıcıyı bir uygulama yükleme, güncelleme, makale okuma vb. gibi devam eden bir sürecin ilerleme durumu hakkında bilgilendiren bir ilerleme göstergesidir. Ve iki tür vardır:
- le doğrusal ilerleme izleyici
- le dairesel ilerleme izleyici
Ayrıca şunları da okuyabilirsiniz: Elementor: Bir portföyden efekt kartı nasıl oluşturulur
Bu eğitimde, gönderi arşivlerini içeren bir bölüme adım adım dikey ilerleme göstergesinin nasıl ekleneceğini göstereceğiz.
Bir ilerleme izleyicisi oluşturun
Sekmede elementler araç panelindenElementor, arama çubuğuna yazın İlerleme İzleyici. Ardından widget'ı bir bölüme sürükleyin.
Ardından bir ilerleme göstergesi belirir. Varsayılan olarak, yatay olarak yönlendirilir. Ama merak etmeyin, daha sonra dikey olarak nasıl düzenleyeceğinizi göreceksiniz.
İlerleme göstergesi oluşturuluyor, istenen sonucu elde etmek için gerekli değişiklikleri yapalım.
Ayrıca bakınız: Elementor: Bir portföyden efekt kartı nasıl oluşturulur
İlerleme izleyici içeriğini düzenle
Burada izleyici türünü ve neyle ilgili olduğunu seçeceksiniz.
Ana ayarlar şunlardır:
- tipik izci: burada varsayılan değer Yatay. Ancak listeyi aşağı kaydırırken, tür circulaire sizlere de sunulmaktadır. Varsayılanı koru.
- ile ilgili ilerleme: bu ikinci ayarda değeri seçin seçici. Bu seçim ek bir ayar getirecektir: Seçici.
- Seçici: Bu alan, izleyicinin ekleneceği nesnenin tanımlayıcısını almak için tasarlanmıştır.
İzleyicimizin bağlı olduğu öğe olduğu için yayın arşivini seçelim.
Ayarlar panelinde Gelişmiş sekmesine gidin, ardından alana bir değer girin CSS kimliği.
Ardından izleme paneline dönün ve menüdeki Seçici alanını doldurun içindekiler.
Son olarak, ilerleme göstergesinin yönünü sağa ayarlayın.
İlerleme izleyicisinin stilini değiştirin
Bu adımda, ilerleme göstergesinin parametrelerini ve ikincisinin arka planını yapılandıracağız.
İlerleme göstergesini ayarlayarak başlayın.
Ayrıca Oku: Elementor: Bir Resim Galerisi Nasıl Oluşturulur
- Ayarlama ilerleme rengi klasik bir ilerleme ve bir gradyan ilerlemesi arasında seçim yapmanızı sağlar. Örneğimizde, ilk seçeneği seçin. Ancak seçim ne olursa olsun, ayar görünüyor renk.
- l'yi ayarlarengi var genel renk paletini veya renk seçiciyi kullanarak.
- kenarlık türü: burada altı öneriniz var (hiçbiri, dolu, çift, noktalı, noktalı, oluk). Tam bir sınır seçin.
- genişlik: Bu, ilerleme göstergenizin sınırına kalınlık vermek içindir.
- sınır yarıçapı: Varsayılan olarak, ilerleme göstergesi bir dikdörtgen gibi görünür. Yarıçapını değiştirerek, uçları yuvarlak hale gelir.
Son olarak, piste arka plan ayarları. Geri gelen ayarların hemen hemen aynı olduğunu fark ediyorsunuz. Bu nedenle, önceden belirtilenlerle sınırlayın.
İlerleme izleyici gelişmiş seçeneklerini değiştir
Çalışmamızı tamamlamak için aşağıdaki sekmeleri ayarlayacağız: hareket efektleri, Dönüştürme ve özel CSS.
Önce sekmeden başlayalım Özel CSS. Seçin, ardından uygun alana aşağıdaki kodu girin. İzleyicinin genişliğini tanımlamaya izin verir. Böylece genişliği, pencerenin yüksekliğinin %50'si olacak şekilde ayarlar.
Ardından, izleyiciyi dikey yönde döndürün. Bunu yapmak için alt menüyü seçin Trafo, döndürmeyi etkinleştirin, ardından boş alana 90 yazın. Bu, size istenen dikey konumu vererek widget'ımızı 90 derece döndürecektir.
Widget'ımızı ilk gönderilerle aynı düzeyde hizalamak için 145 ofset uygulayın.
Bu seviyede sayfamızı kaydırdığımızda ilerleme göstergemizin kaybolduğunu göreceksiniz. içindekiler.
Bu sorunun üstesinden gelmek için sekmeyi açacaksınız Hareket efektleri, ardından komutu bırakın Toplu iğne ve seç en bas.
Bu sefer aşağı kaydırarak, gönderi arşivimizde ilerlerken ilerleme izleyicimizin giderek arttığını görebiliriz.
Elementor Pro'yu Hemen Alın!
Sonuç
Yani ! Dikey ilerleme izleyicisinin nasıl oluşturulacağını gösteren bu makale bu kadar.
oluştururken dikey ilerleme göstergesi gibi etkileşimli öğeler ekleme web sitesi daha sezgisel hale getirerek gerçekten bir sonraki seviyeye taşıyabiliriz. Ek olarak, bir sayfanın tamamına veya içindekiler bir yayının ve hatta bir sayfanın diğer belirli öğelerinin. Bu nedenle nasıl kullanılacağını bilmek ek bir avantaj olacaktır.
Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
