Cara Mendesain Penghitung Bilah Animasi Gulir dengan Divi

Penghitung batang digunakan di seluruh web untuk secara efektif menggambarkan data atau metrik dengan animasi warna halus yang mewakili nilai tertentu. Divi memiliki modul penghitung batang khusus yang dapat digunakan untuk menghasilkan penghitung batang animasi dengan mudah. Mereka adalah tambahan populer untuk halaman tentang, halaman layanan, dan studi kasus

Sebagian besar penghitung batang tampak bernyawa saat muncul dan sulit untuk disesuaikan. Namun, dalam tutorial ini, kami akan menunjukkan kepada Anda cara membuat penghitung batang yang sepenuhnya dapat disesuaikan (dari awal) yang bernyawa saat menggulir menggunakan Divi. Untuk melakukan ini, kami akan memanfaatkan opsi posisi dan efek gulir Divi dan menggunakannya dengan cara yang unik dan tepat.

Mari kita mulai.

Sneak Peek

Berikut adalah tampilan cepat pada penghitung batang yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk meletakkan tangan Anda di penghitung bilah dengan tata letak efek gulir dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan impor file JSON dari Divi Library.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda perlu melakukan hal berikut:

1. Jika belum, instal dan aktifkan Tema Divi.
2. Buat halaman baru di WordPress dan gunakan Divi Builder untuk mengedit halaman di bagian depan (pembuat visual).
3. Pilih opsi "Bangun Dari Awal".

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Bagian 1: Mengoptimalkan Bagian, Baris, dan Kolom

Menambahkan baris

T0 mulai, tambahkan baris dua kolom ke bagian.

Pengaturan Bagian

Kemudian buka pengaturan bagian dan tambahkan warna latar belakang sebagai berikut:

• Warna Latar Belakang: #000545

Kemudian berikan bagian tersebut beberapa margin sementara untuk menguji efek gulir dan beberapa padding sebagai berikut:

• Margin: 80vh atas, 80vh bawah
• Padding 10vw atas, 10vw bawah

Lebar Baris

Selanjutnya, buka pengaturan baris dan tambahkan lebar berikut:

• Lebar: 90%
• Lebar Maks: 700px

Luapan Kolom

Pastikan untuk menyembunyikan luapan dua kolom di dalam baris. Untuk melakukannya, buka pengaturan untuk setiap kolom dan perbarui yang berikut ini:

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Bagian 2: Membuat Penghitung Batang dengan Efek Gulir

Penghitung batang akan terdiri dari tiga elemen: Latar belakang batang (modul pembagi), Bilah warna (juga modul pembagi), dan konten batang (modul blurb). Elemen bilah berwarna inilah yang akan dianimasikan dengan offset efek gulir gerakan horizontal.

Mari kita mulai dengan latar belakang bar.

Membuat Latar Belakang Bar

Tambahkan Modul Pembagi

Tambahkan modul pembagi baru ke kolom 1.

Pengaturan Pembagi

Tampilkan Pembagi: TIDAK

• Warna Latar Belakang: rgba(255,255,255,0.1)

• Lebar: 300px
• Tinggi: 70px

Buat Bar Penghitung Bar

Modul Pembagi Duplikat

Untuk membuat bilah berwarna untuk penghitung batang, duplikat modul pembagi sebelumnya yang kita gunakan untuk membuat latar belakang bilah.

Latar Belakang Pembagi

Kemudian perbarui latar belakang dengan warna latar belakang gradien baru sebagai berikut:

• Warna Kiri Latar Belakang Gradien: #fe7e1f
• Warna Kanan Latar Belakang Gradien: #ffbc48
• Arah Gradien: 90 derajat

Posisi Pembagi

Untuk membuat bilah berwarna berada di atas latar belakang bilah, kita perlu memberinya posisi absolut dengan Z Indeks 1:

• Posisi: Absolut
• Indeks Z: 1

Efek Gulir Pembagi

Sekarang kita siap untuk menambahkan gerakan ke bar counter bar. Untuk melakukan ini, kita akan menggunakan efek gulir horizontal yang menggerakkan modul pembagi dari kiri ke kanan. Karena luapan kolom disembunyikan, kita tidak akan melihat bilah karena melampaui sisi kiri kolom. Tapi kita akan melihatnya terlihat saat bergerak ke kanan.

Menggunakan Nilai Offset untuk Menentukan Nilai Persentase untuk Penghitung Batang

Sebelum kita menambahkan gerakan horizontal ke pembagi/batang, kita perlu memahami cara menentukan nilai persentase yang akan ditampilkan pada penghitung batang. Dengan kata lain, jika kita ingin merepresentasikan 25% pada penghitung batang, kita perlu mengetahui offset gerak horizontal apa yang akan menggerakkan batang ke kanan tepat 25% dari lebar latar belakang batang.

Kita dapat melakukan beberapa matematika sederhana untuk mengetahui hal ini.

Lebar total bilah adalah 300px.

Setiap nilai offset horizontal relatif terhadap 100px (1 sama dengan 100px, -2 sama dengan -200px, dll…)

Untuk memindahkan bilah ke kiri (di luar tampilan), kita perlu menambahkan offset awal -3 (-300px). Ini memindahkannya ke kiri 300px dari pandangan.

Kemudian kita perlu memindahkan bilah lebih dari 25% dari 300px (yaitu 75px) untuk menyelesaikan animasi gulir.

Untuk memindahkan bilah lebih dari 75px ke kanan saat bilah mencapai pusat vertikal halaman, kita perlu offset tengah -2,25 (karena -300 ditambah 75 sama dengan -225). Ini mungkin mengingatkan Anda pada garis bilangan yang kita gunakan di sekolah dasar.

Tampilkan 25% dengan Gerakan Horizontal

Untuk menampilkan 25% dengan gerakan horizontal, pilih tab gerakan horizontal dan perbarui yang berikut:

• Aktifkan Gerakan Horizontal: YA
• Mulai Offset: -3
• Offset Tengah: -2,25
• Mengakhiri Offset: -2,25

Buat Konten Penghitung Bar

Untuk membuat konten bilah, kita akan menggunakan modul uraian. Blurb memungkinkan kita untuk dengan mudah menambahkan ikon rata kiri bersama dengan judul dan teks isi yang akan sempurna untuk penghitung batang.

Di bawah modul pembagi bilah berwarna, tambahkan modul uraian.

Konten Buram

Kemudian perbarui konten sebagai berikut:

• Judul: 25%
• Tubuh: Pengoptimalan
• Ikon: lihat tangkapan layar

Desain kabur

Di bawah tab desain perbarui yang berikut ini:

• Warna Ikon: #ffffff
• Penempatan Gambar/Ikon: Kiri
• Gunakan Ukuran Font Ikon: YA
• Ukuran Font Ikon: 40px

• Warna Teks: Cahaya
• Font Tubuh: Rubik
• Gaya Huruf Tubuh: TT
• Jarak Huruf Tubuh: 0.2em
• Tinggi Garis Tubuh: 1em

• Lebar Konten: 100%
• Lebar: 300px
• Tinggi: 70px
• Padding: atas 15px, kiri 15px

• Posisi: Absolut
• Indeks Z: 2

Bagian 3: Membuat Penghitung Batang Tambahan

Di bagian selanjutnya ini, kita akan terus membuat lebih banyak penghitung batang menggunakan teknik yang sama. Kami akan membuat penghitung batang 50%, 75%, dan 100% untuk melengkapi desain tata letak. Ini akan memberi Anda contoh kerja yang baik untuk menghasilkan lebih banyak sendiri.

Membuat Penghitung Bar 50%

Kolom Duplikat dengan Penghitung Batang

Setelah Anda memiliki penghitung batang pertama yang dibuat di kolom 1, kita dapat menduplikasi seluruh kolom atau menyalin dan menempelkan tiga modul yang membentuk penghitung batang ke dalam kolom 2. Sekarang Anda harus memiliki dua kolom masing-masing dengan penghitung batang yang identik.

Perbarui Pengaturan Pembagi Bilah

Latar belakang

Di dalam kolom 2, buka pengaturan pembagi bilah berwarna dan perbarui warna latar belakang gradien:

• Warna Kiri Latar Belakang Gradien: #4c75f8
• Warna Kanan Latar Belakang Gradien: #57a1ff

Efek Gulir

Kemudian perbarui efek gulir gerakan horizontal sehingga memenuhi 50% bilah pada gulir:

• Offset Tengah: -1.5
• Offset Akhir: -1.5

Perbarui Konten Blurb

Kemudian buka pengaturan untuk uraian di kolom 2 dan perbarui kontennya:

• Judul: 50%
• Ikon: lihat tangkapan layar

Membuat Penghitung Bar 75%

Gandakan Baris

Untuk memulai desain dua penghitung batang berikutnya, duplikat seluruh baris untuk membuat baris identik lainnya di bawahnya.

Perbarui Latar Belakang Bar dan Efek Gulir

Buka pengaturan untuk modul pembagi bilah berwarna dan perbarui warna latar belakang berikut:

• Warna Kiri Latar Belakang Gradien: #4c75f8
• Warna Kanan Latar Belakang Gradien: #57a1ff

Kemudian perbarui offset gerakan horizontal sebagai berikut:

• Offset Tengah: -.075
• Offset Akhir: -0,75

Konten Buram

Buka pengaturan uraian dan perbarui konten sebagai berikut:

• Judul: 75%
• Ikon: lihat tangkapan layar

Membuat Penghitung Batang 100%

Perbarui Warna Bilah dan Efek Gulir

Untuk membuat penghitung batang 100%, buka kolom 2 dan perbarui warna latar belakang modul pembagi batang berwarna sebagai berikut:

• Warna Kiri Latar Belakang Gradien: #f449b4
• Warna Kanan Latar Belakang Gradien: #fc845b

Kemudian perbarui offset gerakan horizontal sebagai berikut:

• Offset Tengah: 0
• Offset Akhir: 0

Perbarui Konten Blurb

Terakhir, perbarui konten uraian:

• Judul: 100%
• Ikon: lihat tangkapan layar

Hasil Akhir

Berikut adalah screenshot dari hasil akhir. Saya menambahkan gambar latar belakang khusus dari paket pembuat tema kelima kami sebagai sentuhan akhir.

Sekarang apa gerakan gulir beraksi.

Pikiran Akhir

Mudah-mudahan, penghitung bilah animasi gulir ini akan berguna untuk proyek masa depan. Kelemahan untuk memiliki desain khusus seperti itu adalah Anda harus melakukan sedikit matematika untuk menghitung seberapa jauh untuk memindahkan bilah berwarna untuk persentase tertentu. Tetapi keuntungannya adalah Anda memiliki lebih banyak peluang untuk desain yang lebih unik dan kreatif.

Jika Anda tertarik, lihat posting kami tentang membuat penghitung lingkaran khusus yang juga bernyawa di gulir.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!