Divi ile Kaydırma Hareketli Sayı Sayaçları Nasıl Oluşturulur

Animasyonlu sayı sayaçları, hizmetlerin, vaka çalışmalarının ve daha fazlasının değerini vurgulamak için sayısal verileri görüntülemenin bir yolu olarak web genelinde popülerdir. Divi, kolaylıkla animasyonlu sayı sayaçları oluşturmak için kullanılabilecek özel bir sayı sayacı modülüne sahiptir.

Ancak bu eğitimde size Divi kullanarak kaydırmada hareket eden sayı sayaçlarının nasıl oluşturulacağını göstereceğiz. Divi'nin konum seçeneklerini ve kaydırma efektlerini kullanarak, kayan sayılarla bir tarihi görüntülemek için basit bir düzen tasarlayacağız.

Bunu kontrol et!

Gizlice Bakış

Divi'de tasarlayacağımız kaydırma animasyonlu sayaç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.

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!

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.

Bölüm 1: Başlık Bölümünü Oluşturma

Bu ilk bölümde, layout için basit bir başlık oluşturacağız.

İlk olarak, bölüme tek sütunlu bir satır ekleyin.

Ardından satıra yeni bir metin modülü ekleyin.

Metin modülü içeriğini aşağıdakilerle güncelleyin:

<h2>Save The Date<h2>

Ardından başlık metni stilini aşağıdaki gibi güncelleyin:

• Başlık 2 Yazı Tipi: Prata
• Başlık 2 Metin Boyutu: 130px (masaüstü), 70px (tablet), 40px (telefon)

Bölüm 2: Kaydırma Animasyonu ile Sayaçları Oluşturma

Bu sonraki bölümde, bir tarih (ay, gün ve yıl) görüntülemek için durana kadar kaydırmadaki sayıları canlandıracak üç sayaç oluşturacağız. Her sayaç toplam 5 adet metin modülü ve bir bölücü modül kullanılarak oluşturulacaktır. İlk metin modülü sayacın etiketi olarak görev yapacak (yani ay, gün, yıl). Sonraki dört metin modülünün her biri, Divi'deki dikey hareket ofsetleri kullanılarak kaydırmada canlandırılacak olan farklı bir sayıya (devam eden) sahip olacaktır. Alt bölme modülü, sayıların taşmasını gizlemeye yardımcı olacaktır.

İşte nasıl yapılacağı.

İkinci Satır Ekle

Mevcut satırın altına, başka bir tek sütunlu satır ekleyin.

Satır Ayarları

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

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

Sütun Ayarları

Ardından sütun için ayarları açın ve dolguyu aşağıdaki gibi güncelleyin:

• Dolgu (masaüstü): 100 piksel alt
• Dolgu (tablet ve telefon): 0 piksel alt

Metin Modülü Ekle

Ardından sütuna bir metin modülü ekleyin.

İçerik/Etiket

Metin modülü içeriği için “Ay” kelimesini ekleyin.

Metin Tasarım Ayarları

İçerik eklendikten sonra tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Arka Plan Rengi: #ffffff
• Metin Yazı Tipi: Prata
• Metin Metin Boyutu: 40px
• Metin Satır Yüksekliği: 2em
• Genişlik: %100
• Dolgu: 20 piksel üst, 20 piksel alt, 20 piksel sol, 20 piksel sağ
• Alt Kenar Genişliği: 5px
• Alt Kenar Rengi: #eeeeee

Konum

Ardından gelişmiş sekmesi altında konum seçeneklerini aşağıdaki gibi güncelleyin:

• pozisyon: akraba
• Z İndeksi 1

İlk Numara için Metin Modülü Ekle

İlk metin modülü yerleştirildikten sonra kaydırmada 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/İçerik Ekle

Ardından, daha kolay başvuru için metin modülü etiketini “num1”i okuyacak şekilde güncelleyin. Ardından içeriği “01” numarasıyla güncelleyin.

Numara 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: 70px
• Metin Harf Aralığı: 4px
• 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. Dikey hareket ofsetlerini eklemeye başladığımızda bunu akılda tutmak önemlidir. Örneğin, metin modülüne dikey bir "1" ofset eklemek, metin modülünü tam olarak metin modülünün yüksekliği olan 100 piksele taşıyacaktır.

İ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: EVET
• Başlangıç ​​Ofseti: 1 (%10'da)
• Orta Ofset: 0 (%20'de)
• Bitiş Ofseti: -1 (%30'da)

Azalan ve Yavaşlayan sekmesi altında aşağıdakileri güncelleyin:

• Soldurmayı ve Yavaşlamayı Etkinleştir: EVET
• Opaklığı Başlatma: %0 (%10'da)
• Orta Opaklık: %100 (%20'de)
• Bitiş Opaklığı: %0 (%30'da)

Hareket efekti tetikleyicisini öğenin en üstüne ayarladığınızdan emin olun:

• Hareket Efekti Tetikleyicisi: Elemanın Başı

İkinci Numara için Metin Modülünü Oluşturun

İlk Numarayı Çoğalt

İlk numara oluşturulduktan sonra, ikinci numara için metin modülünü oluşturmak için kopyalayın. Ardından, daha iyi referans için katmanlar görünümündeki etiketi güncelleyin.

Numarayı/İçeriği Güncelle

İkinci sayı metin modülünün ayarlarını açın ve içeriği “02” numarasıyla güncelleyin.

Pozisyonu Güncelle

Ardından konum seçeneklerini aşağıdaki gibi güncelleyin:

• Pozisyon: Mutlak
• Dikey Ofset: 126px

Kaydırma Efektlerini Güncelle

Ardından kaydırma efektlerini aşağıdaki gibi güncelleyin:

Dikey Hareket Sekmesi altında aşağıdakileri güncelleyin:

• Başlangıç ​​Ofseti: 1 (%20'de)
• Orta Ofset: 0 (%30'da)
• Bitiş Ofseti: -1 (%40'ta)

Azalan ve Yavaşlayan sekmesi altında aşağıdakileri güncelleyin:

• Opaklığı Başlatma: %0 (%20'de)
• Orta Opaklık: %100 (%30'da)
• Bitiş Opaklığı: %0 (%40'ta)

Üçüncü Numara için Metin Modülü Oluştur

İkinci Numarayı Çoğalt

Üçüncü numara için metin modülünü oluşturmak için ikinci numara için metin modülünü çoğaltın.

Numarayı/İçeriği Güncelle

İçeriği “03” numarasıyla güncelleyin.

Kaydırma Efektlerini Güncelle

Ardından kaydırma efektlerini güncelleyin:

Dikey Hareket Sekmesi altında aşağıdakileri güncelleyin:

• Başlangıç ​​Ofseti: 1 (%30'da)
• Orta Ofset: 0 (%40'ta)
• Bitiş Ofseti: -1 (%50'de)

Azalan ve Yavaşlayan sekmesi altında aşağıdakileri güncelleyin:

• Opaklığı Başlatma: %0 (%30'da)
• Orta Opaklık: %100 (%40'ta)
• Bitiş Opaklığı: %0 (%50'de)

Dördüncü Sayı için Metin Modülü Oluştur

Üçüncü Numarayı Çoğalt

Kaydırma sayacı için dördüncü sayıyı oluşturmak için, üçüncü sayı için metin modülünü çoğaltın.

Numarayı/İçeriği Güncelle

İçeriği “04” numarasıyla güncelleyin.

Kaydırma Efektlerini Güncelle

Ardından kaydırma efektlerini güncelleyin:

Dikey Hareket Sekmesi altında aşağıdakileri güncelleyin:

• Başlangıç ​​Ofseti: 1 (%40'ta)
• Orta Ofset: 0 (%50'de)
• Bitiş Ofseti: 0 (%60'ta)

Azalan ve Yavaşlayan sekmesi altında aşağıdakileri güncelleyin:

• Opaklığı Başlatma: %0 (%40'ta)
• Orta Opaklık: %100 (%50'de)
• Bitiş Opaklığı: %100 (%60'ta)

Alt Bölücü Ekle

Son metin modülünün altına yeni bir ayırıcı modül ekleyin. Bu, görünüme kaydırılacak metnin alt taşmasını gizlemek için kullanılacaktır.

Ardından ayırıcıyı göstermek için NOT'u seçin.

Stil ve Konum Ayarları

Ayırıcının tasarımını aşağıdaki gibi güncelleyin:

• Arka Plan Rengi: #ffffff
• Genişlik: %100
• Yükseklik: 100 piksel
• Üst Kenar Genişliği: 5px

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

• Devre dışı bırak: Telefon ve Tablet
• Pozisyon: Mutlak
• Konum: Sol Alt

ÖNEMLİ: Ayırıcının kaplayacağı alan, daha önce sütuna 100 piksellik bir alt dolgu eklenerek oluşturulmuştur. Bu dolguyu eklemezseniz, bölücü sayılarla örtüşecektir.

Daha Fazla Sayaç ve Sütun Oluşturma

Sütun 1'i Çoğalt ve İçeriği Güncelle

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şturacaktır.

O zaman tek yapmanız gereken, tüm metin modüllerinin içeriğini yeni metin ve sayılarla güncellemektir.

Sütun 2'yi Çoğalt ve İçeriği Güncelle

2. sütundaki tüm metin modüllerinin içeriği güncellendikten sonra, 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.

Son sonuç

İşte nihai sonuç.

Son düşünceler

Kaydırma animasyonlu sayı sayaçlarına sahip bu basit düzen, sayısal verileri yeni ve benzersiz bir şekilde görüntülemek için kullanışlı olmalıdır. Tarih konseptini terk etmekten ve hayal edebileceğiniz her şey için sayaçları kullanmaktan çekinmeyin!

Yorumlarda sizden haber bekliyorum.

Şerefe!