Penghitung angka animasi populer di web sebagai cara untuk menampilkan angka. données untuk menyoroti nilai layanan, studi kasus, dll. Divi memiliki modul penghitung angka khusus yang dapat digunakan untuk menghasilkan penghitung angka animasi dengan mudah.
Namun, dalam tutorial ini, kami akan menunjukkan cara membuat penghitung numerik yang bernyawa saat menggulir menggunakan Divi. Menggunakan opsi posisi dan efek gulir Divi, kami akan merancang tata letak sederhana untuk menampilkan tanggal dengan angka bergulir.
Bagian 1: Membuat bagian judul
Di bagian pertama ini, kita akan membuat judul sederhana untuk tata letak.
Pertama, tambahkan satu baris dari satu kolom ke bagian tersebut.
Kemudian tambahkan modul teks baru ke baris.
Perbarui isi modul teks dengan elemen berikut:
Catat tanggalnya
Kemudian perbarui gaya teks tajuk sebagai berikut:
- Tajuk 2 Huruf: Prata
- Item 2 Ukuran teks: 130px (desktop), 70px (tablet), 40px (telepon)
Bagian 2: Pembuatan counter dengan animasi bergulir
Di bagian selanjutnya ini, kita akan membuat tiga penghitung yang akan menganimasikan angka-angka yang bergulir sampai berhenti untuk menampilkan tanggal (bulan, hari, dan tahun). Setiap penghitung akan dibangun menggunakan total 5 modul teks dan modul pemisah. Modul teks pertama akan berfungsi sebagai label penghitung (yaitu bulan, hari, tahun). Empat modul teks berikutnya masing-masing akan berisi nomor berbeda (sedang berlangsung) yang akan dianimasikan saat menggulir menggunakan offset gerakan vertikal di Divi. Modul pemisah yang lebih rendah akan membantu menyembunyikan luapan angka.
Begini caranya.
Tambahkan baris kedua
Di bawah baris yang ada, tambahkan baris lain ke kolom.
Pengaturan saluran
Sebelum menambahkan modul, perbarui parameter baris sebagai berikut:
- Lebar selokan: 1
- Padding: 0px tinggi, 0px rendah
Parameter kolom
Kemudian buka pengaturan kolom dan perbarui isian sebagai berikut:
- Padding (meja): 100px rendah
- Padding (tablet dan telepon): rendah 0px
Tambahkan modul teks
Kemudian tambahkan modul teks ke kolom.
Konten / label
untuk isi dari modul teks, tambahkan kata “bulan”.
Pengaturan desain teks
Setelah isi ditambahkan, perbarui pengaturan desain sebagai berikut:
- Warna Latar Belakang: #ffffff
- Font teks: Bicara
- Ukuran teks: 40px
- Tinggi baris teks: 2em
- Lebar: 100%
- Padding: 20 piksel di bagian atas, 20 piksel di bagian bawah, 20 piksel di sebelah kiri, 20 piksel di sebelah kanan
- Lebar batas bawah: 5px
- Warna batas bawah: #eeeeee
Posisi
Kemudian di bawah tab lanjutan, perbarui opsi posisi sebagai berikut:
- Posisi: Relatif
- Indeks Z 1
Tambahkan modul teks untuk masalah pertama
Setelah modul teks pertama berada di tempatnya, kita dapat mulai menambahkan angka yang akan bergerak saat menggulir. Untuk menambahkan angka pertama, tambahkan modul teks baru di bawah modul teks "Bulan" yang ada.
Tambahkan nomor / konten
Kemudian perbarui label modul teks untuk membaca "num1" untuk referensi yang lebih mudah. Kemudian perbarui konten dengan nomor "01".
Pengaturan Desain untuk Angka
Di bawah tab desain, perbarui yang berikut ini:
- Font Teks: Prata
- Teks Warna Teks: # 8ab2d3
- Teks Ukuran Teks: 70px
- Penempatan Huruf Teks: 4px
- Tinggi Baris Teks: 1.5em
- Padding: 20px tersisa
CATATAN: Angka-angka tersebut memiliki ukuran teks 70px dan tinggi garis 1.5em, yang berarti tinggi total modul teks akan mendekati 100px. Ini penting untuk diingat setiap kali kita mulai menambahkan offset gerak vertikal. Misalnya, menambahkan offset vertikal "1" ke modul teks akan memindahkan modul teks dengan tepat 100px yang merupakan ketinggian modul teks.
Gulir Efek untuk Nomor Pertama
Tambahkan efek gulir berikut ke modul teks.
Di bawah Tab Gerak Vertikal, perbarui yang berikut:
- Aktifkan Gerakan Vertikal: YES
- Mulai offset: 1 (10%)
- Offset rata-rata: 0 (20%)
- Offset akhir: -1 (pada 30%)
Pada tab Fade In dan Fade Out, perbarui hal berikut:
- Aktifkan fade in dan out: YES
- Opacity awal: 0% (pada 10%)
- Opacity rata-rata: 100% (pada 20%)
- End opacity: 0% (hingga 30%)
Pastikan untuk menyetel pemicu untuk efek gerakan di bagian atas klip:
- Pemicu Efek Gerakan: Elemen Atas
Buat modul teks untuk nomor kedua
Gandakan nomor pertama
Setelah nomor pertama dibuat, duplikat untuk membuat modul teks nomor kedua. Kemudian perbarui label di tampilan lapisan untuk referensi yang lebih baik.
Perbarui nomor / konten
Buka parameter modul teks digital kedua dan perbarui konten dengan nomor "02".
Perbarui posisi
Kemudian perbarui opsi posisi sebagai berikut:
- Posisi: Mutlak
- Offset vertikal: 126px
Perbarui efek gulir
Kemudian perbarui efek gulir sebagai berikut:
Pada tab Vertical Motion, perbarui hal berikut:
- Mulai offset: 1 (20%)
- Offset rata-rata: 0 (30%)
- Offset akhir: -1 (pada 40%)
Pada tab Fade In dan Fade Out, perbarui hal berikut:
- Opacity awal: 0% (pada 20%)
- Opacity rata-rata: 100% (pada 30%)
- End opacity: 0% (hingga 40%)
Buat modul teks untuk masalah ketiga
Gandakan nomor kedua
Untuk membuat modul teks untuk nomor ketiga, duplikat modul teks untuk nomor kedua.
Perbarui nomor / konten
Perbarui konten dengan nomor "03".
Perbarui efek gulir
Kemudian perbarui efek gulir:
Pada tab Vertical Motion, perbarui hal berikut:
- Mulai offset: 1 (30%)
- Offset rata-rata: 0 (40%)
- Offset akhir: -1 (pada 50%)
Pada tab Fade In dan Fade Out, perbarui hal berikut:
- Opacity awal: 0% (pada 30%)
- Opacity rata-rata: 100% (pada 40%)
- End opacity: 0% (hingga 50%)
Buat modul teks untuk masalah keempat
Masalah duplikat ketiga
Untuk membuat nomor keempat untuk penghitung gulir, duplikat modul teks untuk nomor ketiga.
Perbarui nomor / konten
Perbarui konten dengan nomor "04".
Perbarui efek gulir
Kemudian perbarui efek gulir:
Pada tab Vertical Motion, perbarui hal berikut:
- Mulai offset: 1 (40%)
- Offset rata-rata: 0 (50%)
- Offset akhir: 0 (pada 60%)
Pada tab Fade In dan Fade Out, perbarui hal berikut:
- Opacity awal: 0% (pada 40%)
- Opacity rata-rata: 100% (pada 50%)
- End opacity: 100% (hingga 60%)
Tambahkan pemisah yang lebih rendah
Di bawah modul teks terakhir, tambahkan modul pemisah baru. Ini akan digunakan untuk menyembunyikan luapan bawah dari teks bergulir dalam tampilan.
Kemudian pilih TIDAK untuk menampilkan pemisah.
Pengaturan gaya dan posisi
Perbarui desain pemisah sebagai berikut:
- Warna Latar Belakang: #ffffff
- Lebar: 100%
- Tinggi: 100px
- Lebar batas atas: 5px
Pada tab Advanced, perbarui yang berikut ini:
- Nonaktifkan pada: ponsel dan tablet
- Posisi: Mutlak
- Lokasi: kiri bawah
PENTING: Ruang yang akan ditempati pemisah dibuat sebelumnya dengan menambahkan isian bawah 100 piksel ke kolom. Jika Anda tidak menambahkan padding ini, pemisah akan menimpa digitnya.
Pembuatan counter dan kolom tambahan
Gandakan kolom 1 dan perbarui konten
Untuk membuat penghitung baru, duplikat kolom 1. Ini akan membuat kolom kedua dengan semua elemen pada tempatnya secara otomatis.
Maka yang perlu Anda lakukan adalah memperbarui konten semua modul teks dengan teks dan angka baru.
Gandakan kolom 2 dan perbarui konten
Setelah konten semua modul teks diperbarui di kolom 2, duplikat kolom 2 untuk membuat penghitung ketiga untuk tahun tersebut. Kemudian perbarui konten setiap modul teks sesuai kebutuhan.
Hasil akhir
Inilah hasil akhirnya.
Sumber Daya Lainnya
- Cara menggunakan modul penghitung angka di Divi
- Cara menggunakan modul penghitung bundar pada Divi
- Cara membuat penghitung melingkar yang menjadi hidup di Divi
final pikiran
Tata letak sederhana dengan penghitung angka animasi bergulir ini akan berguna untuk ditampilkan données digital dengan cara baru dan unik. Jangan ragu untuk membuang konsep tanggal dan menggunakan penghitung untuk apa pun yang dapat Anda impikan!