Loncat ke Konten Utama

Bagaimana cara menambahkan penghitung animasi ke scrolling divi

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Penghitung angka beranimasi populer di web sebagai cara untuk menampilkan data numerik untuk menyoroti nilai layanan, studi kasus, dll. Divi memiliki modul penghitung nomor khusus yang dapat digunakan untuk membuat penghitung angka animasi dengan mudah.

Namun, dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat penghitung digital yang dianimasikan dalam menggulir menggunakan Divi. Menggunakan opsi posisi Divi dan efek gulir, kami akan merancang tata letak sederhana untuk menampilkan tanggal dengan nomor gulir.

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.

Daftarkan modul bagian divi

Kemudian tambahkan modul teks baru ke baris.

Perbarui konten modul teks dengan yang berikut:

Catat tanggalnya
Simpan tanggal 1

Kemudian perbarui gaya teks tajuk sebagai berikut:

  • Tajuk 2 Huruf: Prata
  • Item 2 Ukuran teks: 130px (desktop), 70px (tablet), 40px (telepon)
Modifikasi judul Divi

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
Konfigurasi perbatasan Divi

Parameter kolom

Kemudian buka pengaturan kolom dan perbarui isian sebagai berikut:

  • Padding (meja): 100px rendah
  • Padding (tablet dan telepon): rendah 0px
Konfigurasi jarak kolom Divi

Tambahkan modul teks

Kemudian tambahkan modul teks ke kolom.

Tambahkan modul teks divi

Konten / label

Untuk konten modul teks, tambahkan kata "bulan".

Tentukan divi bulan

Pengaturan desain teks

Setelah menambahkan konten, 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:

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

  • Posisi: Relatif
  • Indeks Z 1
Modul wordpress prata

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 modul teks pendongeng

Tambahkan nomor / konten

Kemudian perbarui label modul teks untuk membaca "num1" untuk referensi yang lebih mudah. Kemudian perbarui konten dengan nomor "01".

Tambahkan modul nomor divi

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
Konfigurasi warna Divi

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
Konfigurasi teks divi modul animasi

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.

Gandakan modul teks divi 1

Perbarui nomor / konten

Buka parameter modul teks digital kedua dan perbarui konten dengan nomor "02".

Simpan nomor 2 divi

Perbarui posisi

Kemudian perbarui opsi posisi sebagai berikut:

  • Posisi: Mutlak
  • Offset vertikal: 126px
Mengubah posisi modul teks divi

Perbarui efek gulir

Kemudian perbarui efek gulir sebagai berikut:

Pada tab Vertical Motion, perbarui hal berikut:

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

  • 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%)
Efek gulir animasi divi

Buat modul teks untuk masalah ketiga

Gandakan nomor kedua

Untuk membuat modul teks untuk nomor ketiga, duplikat modul teks untuk nomor kedua.

Modul teks duplikat nomor 3

Perbarui nomor / konten

Perbarui konten dengan nomor "03".

Ubah modul teks divi

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%)
Edit animasi modul teks

Buat modul teks untuk masalah keempat

Masalah duplikat ketiga

Untuk membuat nomor keempat untuk penghitung gulir, duplikat modul teks untuk nomor ketiga.

Modul teks duplikat divi nomor 4

Perbarui nomor / konten

Perbarui konten dengan nomor "04".

Konfigurasi nilai modul teks divi

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%)
Modul konfigurasi animasi 4 divi

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.

Tambahkan modul pemisah divi

Kemudian pilih TIDAK untuk menampilkan pemisah.

Jangan tampilkan pemisah divi

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.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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 seluruh kolom divi

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

final pikiran

Tata letak sederhana dengan penghitung nomor gulir animasi ini harus berguna untuk menampilkan data digital dengan cara yang baru dan unik. Jangan ragu untuk mengabaikan konsep tanggal dan gunakan penghitung untuk apa pun yang Anda impikan!

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
0 saham
saham
menciak
Register