Animasyonlu sayı sayaçları, sayıları görüntülemenin bir yolu olarak web'de popülerdir. veri hizmetlerin, vaka incelemelerinin vb. değerini vurgulamak için Divi animasyonlu sayı sayaçlarını kolayca oluşturmak için kullanılabilen özel bir sayı sayacı modülüne sahiptir.
Ancak, bu eğitimde, kaydırmada hareket eden sayısal sayaçların nasıl oluşturulacağını göstereceğiz. Divi. Konum seçeneklerini ve kaydırma efektlerini kullanma Divi, bir tarihi kayan sayılarla görüntülemek için basit bir düzen tasarlayacağız.
Bölüm 1: Başlık bölümünü oluşturma
Bu ilk bölümde, düzen için basit bir başlık oluşturacağız.
İlk olarak, bölüme bir sütunluk bir satır ekleyin.
Ardından satıra yeni bir metin modülü ekleyin.
Güncelleme içindekiler Aşağıdaki öğelere sahip metin modülünün:
Tarihi kaydet
Ardından başlık metni stilini aşağıdaki gibi güncelleyin:
- Başlık 2 Yazı Tipi: Prata
- Öğe 2 Metin boyutu: 130 piksel (masaüstü), 70 piksel (tablet), 40 piksel (telefon)
Bölüm 2: Kayan animasyon ile sayaç oluşturma
Sonraki bölümde, bir tarihi (ay, gün ve yıl) görüntülemek için durana kadar kayan sayıları hareketlendirecek üç sayaç oluşturacağız. Her sayaç, toplam 5 metin modülü ve bir ayırıcı modül kullanılarak oluşturulacaktır. İlk metin modülü, sayacın etiketi (yani ay, gün, yıl) görevi görecek. Sonraki dört metin modülünün her biri, Divi'deki dikey hareket ofsetleri kullanılarak kaydırma sırasında canlandırılacak farklı bir sayı (devam eden) içerecektir. Alt ayırma modülü, sayıların taşmasını gizlemeye yardımcı olacaktır.
İşte böyle.
İkinci bir satır ekleyin
Mevcut satırın altına bir sütuna başka bir satır ekleyin.
Satır Parametreleri
Bir modül eklemeden önce, satır parametrelerini aşağıdaki gibi güncelleyin:
- Oluk genişliği: 1
- Dolgu: 0 piksel yüksek, 0 piksel düşük
Sütun parametreleri
Ardından sütun ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:
- Dolgu (masa): 100 piksel düşük
- Dolgu (tablet ve telefon): 0 piksel düşük
Metin modülü ekle
Ardından sütuna bir metin modülü ekleyin.
İçerik / etiket
için içindekiler metin modülünden “ay” kelimesini ekleyin.
Metin tasarım ayarları
bir kere içindekiler eklendiğinde tasarım ayarlarını aşağıdaki şekilde güncelleyin:
- Arka Plan Rengi: #ffffff
- Metin yazı tipi: Konuşma
- Metin boyutu: 40px
- Metin satırının yüksekliği: 2em
- Genişlik:% 100
- Dolgu: üstte 20 piksel, altta 20 piksel, solda 20 piksel, sağda 20 piksel
- Alt kenar genişliği: 5 piksel
- Alt kenarlığın rengi: #eeeeee
Pozisyon
Ardından, gelişmiş sekmesinin altında, konum seçeneklerini aşağıdaki gibi güncelleyin:
- Pozisyon: Göreli
- Z endeksi 1
İlk sayı için bir metin modülü ekleyin
İlk metin modülü yerleştirildikten sonra, kaydırma üzerinde hareket edecek sayıları eklemeye başlayabiliriz. İlk numarayı eklemek için, mevcut "Ay" metin modülünün altına yeni bir metin modülü ekleyin.
Numara / içerik ekle
Daha sonra, daha kolay başvuru için “num1” okumak üzere metin modülü etiketini güncelleyin. Ardından içeriği “01” numarasıyla güncelleyin.
Sayı için Tasarım Ayarları
Tasarım sekmesi altında aşağıdakileri güncelleyin:
- Metin Yazı Tipi: Prata
- Metin Metin Rengi: # 8ab2d3
- Metin Metin Boyutu: 70 piksel
- Metin Harf Aralığı: 4 piksel
- Metin Satırı Yüksekliği: 1.5em
- Dolgu: 20 piksel kaldı
NOT: Sayıların metin boyutu 70 piksel ve satır yüksekliği 1.5em'dir; bu, metin modülünün toplam yüksekliğinin 100 piksele yakın olacağı anlamına gelir. Bu, dikey hareket ofsetlerini eklemeye başladığımızda akılda tutmak önemlidir. Örneğin, metin modülüne “1” dikey ofset eklemek, metin modülünü tam olarak metin modülünün yüksekliği olan 100 piksel hareket ettirir.
İlk Sayı için Kaydırma Efektleri
Metin modülüne aşağıdaki kaydırma efektlerini ekleyin.
Dikey Hareket Sekmesi altında aşağıdakileri güncelleyin:
- Dikey Hareketi Etkinleştir: VAR
- Başlangıç ofseti: 1 (% 10'de)
- Ortalama ofset: 0 (% 20'de)
- Son ofset: -1 (% 30'de)
Fade In and Fade Out sekmesinde, aşağıdakileri güncelleyin:
- Solmaya giriş ve çıkışı etkinleştir: EVET
- Başlangıç opaklığı:% 0 (% 10'de)
- Ortalama opaklık:% 100 (% 20'de)
- Uç opaklığı:% 0 (% 30'ye kadar)
Klibin üst kısmındaki hareket efekti için tetikleyici ayarladığınızdan emin olun:
- Hareket Efekti Tetikleyicisi: Öğe Üstü
İkinci numara için metin modülü oluşturma
İlk sayıyı çoğalt
İlk numara oluşturulduktan sonra, ikinci numara metin modülünü oluşturmak için onu çoğaltın. Daha sonra, daha iyi referans olması için katmanlar görünümünde etiketi güncelleyin.
Numarayı / içeriği güncelleme
İkinci dijital metin modülünün parametrelerini açın ve içeriği "02" numarasıyla güncelleyin.
Konumu güncelle
Ardından konum seçeneklerini aşağıdaki gibi güncelleyin:
- Pozisyon: Mutlak
- Dikey ofset: 126 piksel
Kaydırma efektlerini güncelleme
Ardından kaydırma efektlerini aşağıdaki gibi güncelleyin:
Dikey Hareket sekmesinde aşağıdakileri güncelleyin:
- Başlangıç ofseti: 1 (% 20'de)
- Ortalama ofset: 0 (% 30'de)
- Son ofset: -1 (% 40'de)
Fade In and Fade Out sekmesinde, aşağıdakileri güncelleyin:
- Başlangıç opaklığı:% 0 (% 20'de)
- Ortalama opaklık:% 100 (% 30'de)
- Uç opaklığı:% 0 (% 40'ye kadar)
Üçüncü sayı için bir metin modülü oluşturun
İkinci sayıyı çoğalt
Üçüncü numara için metin modülü oluşturmak üzere, ikinci numara için metin modülünü çoğaltın.
Numarayı / içeriği güncelleme
İçeriği "03" numarasıyla güncelleyin.
Kaydırma efektlerini güncelleme
Ardından kaydırma efektlerini güncelleyin:
Dikey Hareket sekmesinde aşağıdakileri güncelleyin:
- Başlangıç ofseti: 1 (% 30'de)
- Ortalama ofset: 0 (% 40'de)
- Son ofset: -1 (% 50'de)
Fade In and Fade Out sekmesinde, aşağıdakileri güncelleyin:
- Başlangıç opaklığı:% 0 (% 30'de)
- Ortalama opaklık:% 100 (% 40'de)
- Uç opaklığı:% 0 (% 50'ye kadar)
Dördüncü sayı için bir metin modülü oluşturma
Üçüncü yinelenen sorun
Kaydırma sayacı için dördüncü sayı oluşturmak için üçüncü sayı için metin modülünü çoğaltın.
Numarayı / içeriği güncelleme
İçeriği "04" numarasıyla güncelleyin.
Kaydırma efektlerini güncelleme
Ardından kaydırma efektlerini güncelleyin:
Dikey Hareket sekmesinde aşağıdakileri güncelleyin:
- Başlangıç ofseti: 1 (% 40'de)
- Ortalama ofset: 0 (% 50'de)
- Bitiş ofseti: 0 (% 60'da)
Fade In and Fade Out sekmesinde, aşağıdakileri güncelleyin:
- Başlangıç opaklığı:% 0 (% 40'de)
- Ortalama opaklık:% 100 (% 50'de)
- Uç opaklığı:% 100 (% 60'ye kadar)
Alt ayırıcı ekle
Son metin modülünün altına yeni bir ayırıcı modül ekleyin. Bu, görünümde kayan metnin alttan taşmasını gizlemek için kullanılacaktır.
Ardından ayırıcıyı görüntülemek için HAYIR'ı seçin.
Stil ve konum ayarları
Ayırıcı tasarımını aşağıdaki gibi güncelleyin:
- Arka Plan Rengi: #ffffff
- Genişlik:% 100
- Yükseklik: 100px
- Üst kenar genişliği: 5 piksel
Gelişmiş sekmesinde aşağıdakileri güncelleyin:
- Devre dışı bırak: telefon ve tablet
- Pozisyon: Mutlak
- Yer: sol alt
ÖNEMLİ: Ayırıcının kaplayacağı alan, daha önce sütuna 100 piksel alt dolgu eklenerek oluşturulmuştur. Bu dolguyu eklemezseniz, ayırıcı rakamlarla çakışacaktır.
Ek sayaç ve sütun oluşturma
Sütun 1'i çoğaltın ve içeriği güncelleyin
Yeni bir sayaç oluşturmak için 1. sütunu çoğaltın. Bu, tüm öğelerin otomatik olarak yerinde olduğu ikinci bir sütun oluşturur.
Daha sonra tek yapmanız gereken tüm metin modüllerinin içeriğini yeni metinler ve sayılarla güncellemektir.
Sütun 2'i çoğaltın ve içeriği güncelleyin
Tüm metin modüllerinin içeriği 2. sütunda güncellendiğinde, yıl için üçüncü bir sayaç oluşturmak için 2. sütunu çoğaltın. Ardından her metin modülünün içeriğini gerektiği gibi güncelleyin.
Nihai sonuç
İşte son sonuç.
Diğer Kaynaklar
- Divi'de sayı sayacı modülü nasıl kullanılır
- Divi'de dairesel sayaç modülü nasıl kullanılır
- Divi'de canlanan dairesel sayaçlar nasıl oluşturulur?
Son düşünceler
Kayan animasyonlu sayı sayaçlarına sahip bu basit düzen, görüntüleme için yararlı olmalıdır. veri yeni ve benzersiz bir şekilde dijital. Randevu kavramını bir kenara bırakın ve hayal edebileceğiniz her şey için sayaçları kullanın!
