Ana İçeriğe Geç

Divi'de kaydırmaya animasyonlu bir sayaç nasıl eklenir

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Animasyonlu sayı sayaçları, hizmetlerin, örnek olay incelemelerinin vb. Değerini vurgulamak için sayısal verileri görüntülemenin bir yolu olarak web'de popülerdir. Divi, animasyonlu sayı sayaçlarını kolayca oluşturmak için kullanılabilecek özel bir sayı sayacı modülüne sahiptir.

Bununla birlikte, bu eğitimde, Divi kullanarak kaydırmada hareket eden dijital sayaçları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.

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.

Bir divi bölüm modülü kaydedin

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

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

Tarihi kaydet
Tarihi kaydedin 1

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)
Divi başlık değişikliği

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
Divi sınır yapılandırması

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
Divi sütun aralığı yapılandırması

Metin modülü ekle

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

Divi metin modülü ekle

İçerik / etiket

Metin modülünün içeriği için "ay" kelimesini ekleyin.

Ayın divisini belirtin

Metin tasarım ayarları

İçerik ekledikten sonra tasarım ayarlarını aşağıdaki gibi 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:

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

  • Pozisyon: Göreli
  • Z endeksi 1
Prata wordpress modülü

İ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.

Hikaye anlatıcı metin modülü ekle

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.

Divi sayı modülü ekle

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ı
Divi renk yapılandırması

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ü
Yapılandırma animasyon modülü divi metni

İ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.

Yinelenen divi 1 metin modülü

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.

2 numaralı divi'yi kaydet

Konumu güncelle

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

  • Pozisyon: Mutlak
  • Dikey ofset: 126 piksel
Divi metin modülünün konumunu değiştirme

Kaydırma efektlerini güncelleme

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

Dikey Hareket sekmesinde aşağıdakileri güncelleyin:

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

  • 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)
Animasyon kaydırma efekti divi

Üçü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.

Yinelenen metin modülü numarası 3

Numarayı / içeriği güncelleme

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

Divi metin modülünü değiştir

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)
Metin modülü animasyonunu düzenleyin

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.

Yinelenen metin modülü divi numarası 4

Numarayı / içeriği güncelleme

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

Divi metin modülü değerini yapılandırın

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)
Animasyon yapılandırma modülü 4 divi

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.

Divi ayırıcı modülü ekle

Ardından ayırıcıyı görüntülemek için HAYIR'ı seçin.

Divi ayırıcısını görüntüleme

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.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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.

Tüm sütun divi'sinin kopyasını oluştur

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

Son düşünceler

Animasyonlu kayan sayı sayaçlarına sahip bu basit düzen, dijital verileri yeni ve benzersiz bir şekilde görüntülemek için yararlı olmalıdır. Tarih kavramını bir kenara atıp, hayal edebileceğiniz her şey için sayaçları kullanmaktan çekinmeyin!

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
0 hisseleri
hisse
cıvıltı
Enregistrer