Divi ile Parşömen Üzerinde Hareket Eden Daire Sayaçları Nasıl Oluşturulur

Animasyonlu daire sayaçları, eğlenceli bir etkileşimle bilgileri (istatistikler veya ölçümler gibi) bir web sayfasında sergilemenin popüler bir yoludur. Aslında, Divi sitenize daire sayaçları eklemeyi hızlı ve kolay hale getiren Divi'nin Daire Sayacı Modülüne zaten aşina olabilirsiniz. Ancak, bu eğitimde size kaydırmada hareket eden tamamen özel daire sayaçlarının nasıl oluşturulacağını göstereceğiz! Bunları oluşturmak için herhangi bir harici özel CSS'ye ihtiyacımız olmayacak. İşin püf noktası, katmanlı ve hassas bir şekilde canlandırılan birden fazla modülü yönetmek için Divi'nin Katmanlar özelliğinden yararlanmaktır.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız animasyonlu daire ayırıcılara 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.

Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.

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.

Divi ile Scroll'da Animasyon Yapan Dört Daire Sayacı Oluşturma

Bölüm ve Satırı Ayarlama

İlk olarak, varsayılan bölüme dört sütunlu bir satır ekleyin.

Ardından bölüm ayarlarını açın ve oluşturacağımız daire sayaçları için kaydırma efektlerini test etmek için yeterli alana sahip olmamız için biraz üst ve alt kenar boşluğu ekleyin.

• Marj: 85vh üst, 85vh alt

Ardından, satır ayarlarını açın ve aşağıdakileri güncelleyin:

• Oluk Genişliği: 1
• Genişlik: %100
• Maksimum Genişlik: 1200 piksel

Katmanlar Görünümünü Kullanma

Animasyonlu daire sayaçlarını oluşturmaya başlamadan önce Divi's Layers özelliğini kullandığınızdan emin olun. Bunu, alt ayarlar menüsündeki gri katmanlar simgesine tıklayarak yapabilirsiniz.

Çok sayıda örtüşen öğe (veya katman) oluşturacağımız için, katmanlar kutusu ileriye dönük katmanlarımızı yönetmek için kesinlikle kullanışlı olacaktır.

Animasyonlu Daire Sayacı #1 Oluşturma (%25)

Bu ilk animasyonlu daire sayacı, kaydırma sırasında dairenin %25'ine kadar hareket ettirecek ve kaydırma sırasında kaybolacak şekilde merkezde karşılık gelen yüzde metnine sahip olacaktır. Tam daire sayaç tasarımını oluşturmak için birbiri üzerine katmanlı çoklu bölücüler ve metin modülleri kullanacağız. İşte nasıl yapılacağı.

Arka Daire

Arka daireyi oluşturmak için daire şeklinde şekillendireceğimiz bir bölücü modül kullanacağız ve ona bir arka plan rengi vereceğiz.

Bölücü Modülü Ekle

Katmanlar görünümünde ayırıcıyı yukarı çekin ve etiketi "arka daire" olarak değiştirin. Ardından ayırıcı modül ayarlarını açın ve aşağıdakileri güncelleyin:

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

Tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Genişlik: 250 piksel
• Yükseklik: 250 piksel
• Kenar boşluğu: 25 piksel üst, 25 piksel alt, 25 piksel sol
• Yuvarlatılmış Köşeler: %50

Dönen Renk Çubuğu

Daire sayacının bir sonraki parçası dönen renk çubuğu olacak. Tasarımı hızlı bir şekilde başlatmak için önceki bölücüyü (arka daire) çoğaltın. Ardından yeni ayırıcıyı “renk çubuğu” etiketiyle güncelleyin.

Dönen renk çubuğu efektini oluşturmak için, bu bölücüyü çubuk için kullanmak istediğimiz renkle yarım daireye çevirmemiz gerekiyor.

Renk Çubuğu Bölücü ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: yok
• Degrade Arka Plan Sol Renk: #121b55
• Gradyan Arka Planı Sağ Renk: rgba(255,255,255,0)
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %0

Bazı tarayıcılarda, katmanlar arasında bazı istenmeyen renkleri gösteren küçük bir örtüşen aksaklık var. Bunu önlemek için, bu yarım daireyi biraz daha küçülteceğiz ve ofseti buna göre ayarlayacağız.

• Genişlik: 248 piksel
• Yükseklik: 248 piksel

Renk Çubuğu dairesinin Arka Daire ile örtüşmesini sağlamak için, ayırıcıya aşağıdaki gibi mutlak bir konum verin:

• Pozisyon: Mutlak
• Dikey Ofset: 26px
• Yatay Ofset: 26px

Ardından daire çubuğunu 90 derece (veya dairenin %25'i) döndürmek için aşağıdaki kaydırma efektini ekleyin.

Dönen Efektler sekmesi altında…

• Döndürmeyi Başlatma: 0deg (%15 görünüm alanında)
• Orta Dönme: 90 derece (%20 – %25 görünüm alanında)
• Bitiş Dönüşü: 90deg (%30 görünüm alanında)

Buradaki döndürme yüzdeleri ve değerleri bu noktada tam bir anlam ifade etmeyebilir. Daha sonra 180 derecede (dairenin %50'si) biten bir sonraki daire sayacını oluşturduğumuzda dönüşü güncellemeyi kolaylaştırıyoruz. Bu noktada önemli olan rotasyonun 90 derecede (veya %25) bitmesidir.

Kalkan

Daire sayacımızın bir sonraki öğesi, dönerken Renk Çubuğu dairesinin sol tarafını gizleyen başka bir yarım daire olan kalkan dediğim şeydir. Kalkanı oluşturmak için daha önce yaptığımız ilk Back Circle bölücü modülünü çoğaltın. Ardından, "Renk Çubuğu" ayırıcı modülünün altına sürükleyin ve kolay başvuru için etiketi "kalkan" olarak güncelleyin.

Kalkan bölücü modülü için ayarları açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: yok
• Degrade Arka Plan Sol Renk: #c3e0e5 (arka daire ile aynı)
• Gradyan Arka Planı Sağ Renk: rgba(255,255,255,0)
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %50
• Bitiş Konumu: %0

Şimdi modüle aşağıdaki gibi mutlak bir konum verin:

• Pozisyon: Mutlak
• Dikey Ofset: 25 piksel
• Yatay Ofset: 25 piksel

Ön Çember

Daire sayacının bir sonraki parçası, önceki katmanların orta kısmını gizleyecek ve dış kenarı ortaya çıkaracak olan ön dairedir.

Oluşturmak için arka daire ayırıcıyı çoğaltın, kalkan bölücü modülünün altına bırakın ve etiketi "ön daire" olarak güncelleyin.

Ön daire ayırıcı modülün ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: #ffffff
• Genişlik: 200 piksel
• Yükseklik: 200 piksel

Ardından mutlak konumu aşağıdaki gibi ekleyin:

• Pozisyon: Mutlak
• Dikey Ofset: 50px
• Yatay Ofset: 50px

Solan Sayı

Bu ilk daire sayacının son parçası, dönen çubuğun gösterdiği değere karşılık gelen sönümleme sayısıdır.

Oluşturmak için ön daire ayırıcı modülünün altına yeni bir metin modülü ekleyin.

Katmanlar kutusunda, yeni metin modülünü “num1” olarak etiketleyin. Ardından ayarları açın ve gövde metnini “%25” okuyacak şekilde güncelleyin.

Tasarım ayarları altında aşağıdakileri güncelleyin:

• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Metin Boyutu: 25px
• Metin Satır Yüksekliği: 2em
• Metin Hizalama: orta

• Genişlik: 200 piksel
• Yükseklik: 200 piksel
• Yuvarlatılmış Köşeler: %50

• Dolgu: 75 piksel üst
• Pozisyon: Mutlak
• Dikey Ofset: 50px
• Yatay Ofset: 50px

Şimdi metin, daire sayacı içinde mükemmel bir şekilde ortalanmalıdır.

Solma efektini eklemek için aşağıdaki kaydırma efektlerini güncelleyin:

Fading In ve Out sekmesinin altında…

• Soldurmayı ve Yavaşlamayı Etkinleştir: EVET
• Opaklığı Başlatma: %0 (%10 görünüm alanında)
• Orta Opaklık: %100 (%20 görünüm alanında)
• Bitiş Opaklığı: %100 (%100 görünüm alanında)

İlk sayacımız bu kadar. Sonucu kontrol edin.

Animasyonlu Daire Sayacı #2 Oluşturma (%50)

Bir sonraki animasyonlu daire sayacımız %25'e kadar hareket edecek ve ardından kullanıcı sayfayı aşağı kaydırdıkça %50'ye kadar canlandırmaya devam edecek. Bunu oluşturmak için dönen daire çubuğunu 180 dereceye (veya dairenin %50'sine) kadar dönmeye devam edecek şekilde güncellememiz gerekecek. Ardından, bir öncekinin kaybolmasından sonra kaybolması için ek bir sayı eklememiz gerekecek.

Sütun 1'i çoğaltma

Bir sonraki daire sayacı tasarımımızı hızlı bir şekilde başlatmak için ilk sütunun tamamını çoğaltın. Ardından, dört sütun düzenini korumamız için fazladan boş sütunlardan birini silin.

Renk Çubuğu Daire Döndürmesini Güncelle

Yeni sütunun içinde (şimdi sütun 2), renk çubuğu ayırıcı modül ayarlarını açın ve aşağıdaki kaydırma efekti değerini güncelleyin:

• Bitiş Dönüşü: 180deg

Solan başka bir sayı ekleyeceğimiz için, %25 değerini içeren mevcut metin modülünü karartmamız gerekecek. “num1” metin modülünün ayarlarını açın ve solma içeri ve dışarı kaydırma efektini aşağıdaki gibi güncelleyin:

• Opaklığı Başlatma: %0 (%10 görünüm alanında)
• Orta Opaklık: %100 (%20-25 görünüm alanında)
• Bitiş Opaklığı: %0 (%27 görünüm alanında)

Bir sonraki soluk sayıyı oluşturmak için “num1” metin modülünü çoğaltın ve yinelenen etiketi “num2” olarak değiştirin.

Ardından yeni “num2” metin modülünün ayarlarını açın ve gövde metnini “%50” olarak değiştirin.

Ardından, Yavaşlatma ve Yavaşlama kaydırma efektlerini aşağıdaki gibi güncelleyin:

• Opaklığı Başlatma: %0 (%25 görünüm alanında)
• Orta Opaklık: %100 (%30-%35 görünüm alanında)
• Bitiş Opaklığı: %100 (%40 görünüm alanında)

İşte ikinci daire sayaç tasarımımızın sonucu.

Animasyonlu Daire Sayacı #3 Oluşturma (%75)

Sütun 2'yi Çoğalt

Kaydırma sırasında %75'e hareket eden üçüncü daire sayacını oluşturmak için 2. sütunu çoğaltın ve fazladan 5. sütunu silin.

İkinci Bir Renk Çubuğu Bölücü Modülü Oluşturun

Renk çubuğunu daire sayacının sağ tarafına doğru canlandırmaya devam etmek için, ilk renk çubuğu 180 derecelik dönüşe ulaştığında (180 derecede) kaybolan başka bir "renk çubuğu" yarım daire bölücü modülü oluşturmamız gerekecek. Ardından, yeni renk çubuğu dönüşünün ilerlemesini görebilmemiz için soldaki kalkanı aynı anda karartmamız gerekecek.

Yeni ikinci renk çubuğunu oluşturmak için, renk çubuğu bölücü modülünü çoğaltın ve kopyanın etiketini “colorbar2” olarak değiştirin.

Renk Çubuğu Ekle 2 Kaydırma Efekti

Ardından yeni “colorbar2” bölücü ayarlarını açın ve Fade In and Out kaydırma efektini aşağıdaki gibi güncelleyin:

• Soldurmayı ve Yavaşlamayı Etkinleştir: EVET
• Opaklığı Başlatma: %0 (%33 görünüm alanında)
• Orta Opaklık: %100 (%34 görünüm alanında)
• Bitiş Opaklığı: %100 (%100 görünüm alanında)

Döndürme efekti sekmesi altında…

• Döndürmeyi Başlatma: 180deg (%35 görünüm alanında)
• Orta Dönme: 270deg (%40-%45 görünüm alanında)
• Bitiş Dönüşü: 270deg (%50 görünüm alanında)

Bu, daire çubuğunu 180 dereceden 270 dereceye (veya dairenin %75'i) canlandıracaktır.

Solma Numarası #3 Ekle

Daire sayacındaki bu sonraki ilerleme için “%75”te solmak için “num2” metin modülünü çoğaltın ve ardından yinelenenin etiketini “num3” olarak değiştirin.

Ardından yeni metin modülünün içeriğini “%75” gövde metniyle güncelleyin.

“num3” metin modülünün ayarlarını açın ve Fading In and Out Scroll efektini aşağıdaki gibi güncelleyin:

• Opaklığı Başlatma: %0 (%35 görünüm alanında)
• Orta Opaklık: %100 (%40-%45 görünüm alanında)
• Bitiş Opaklığı: %100 (%50 görünüm alanında)

İkinci Numara Kaydırma Efektini Güncelle

İkinci sayıyı soldurmak için, “num2” metin modülünün ayarlarını açın ve aşağıdaki Fading In and Out kaydırma efektini güncelleyin:

• Bitiş Opaklığı: %0

Animasyonlu daire çubuklarımıza şimdi göz atın.

Animasyonlu Daire Sayacı #4 Oluşturma (%100)

Son daire sayacımız için 3. sütunu çoğaltın ve ardından fazladan boş sütunu silin.

“Colorbar2” bölücü modülün ayarlarını açın ve Döndürme kaydırma efektini aşağıdaki gibi güncelleyin:

• Biten Rotasyon: 360deg

Ardından “num3” metin modülünü çoğaltarak başka bir metin modülü oluşturun. Ardından yeni metin modülünün etiketini “num4” olarak değiştirin.

Yeni numarayı güncellemeden önce, “num3” metin modülünün ayarlarını açın ve Fading In and Out scroll efektini aşağıdaki gibi güncelleyin:

• Bitiş Opaklığı: %0

Şimdi kopyaladığımız “num4” metin modülünü açın ve gövde içeriğini “%100” okuyacak şekilde güncelleyin.

Ardından Solma ve Kaydırma Efektini aşağıdaki gibi güncelleyin:

• Opaklığı Başlatma: %0 (%45 görünüm alanında)
• Orta Opaklık: %100 (%50-%55 görünüm alanında)
• Bitiş Opaklığı: %100 (%60 görünüm alanında)

Son sonuç

İşte tablet ve telefonda nasıl yığıldığı.

Yeni Tasarımları Keşfetmekle Eğlenin

Bu temel kurulumla, minimum ayarlamalarla benzersiz animasyonlu daire sayaçları oluşturmak için tüm Divi tasarım seçeneklerini keşfedebilirsiniz. Sadece birkaç ince ayar ile neler yapabileceğinize dair bir fikir edinmek için aşağıdaki resme bakın.

Son düşünceler

Kaydırmada hareket eden özel daire sayaçları oluşturmak, Divi Builder'ın ne kadar güçlü olduğunu vurgular. Katmanlar özelliği, bu tür bir tasarım için bir zorunluluktur çünkü Divi modüllerinin üst üste binen çoklu katmanlarının yönetimini basitleştirir. Umarım, bu size bir sonraki projeniz için güzel ve işlevsel bir şey yaratmanız için başka bir ilham verici araç verir.

Yorumlarda sizden haber bekliyorum.

Şerefe!