Rancang Bagian Fitur Unik di Divi dengan Ikon yang Dianimasikan oleh Penghitung Lingkaran

Sebagian besar situs web memerlukan bagian fitur yang dirancang dengan baik untuk menampilkan fitur produk atau layanan. Jadi, dalam tutorial ini, saya akan menunjukkan cara membuat bagian fitur unik di Divi. Untuk melakukan ini, kita akan sedikit berkreasi dengan modul Penghitung Lingkaran Divi untuk menambahkan animasi ke ikon uraian Anda. Dan dengan menggunakan beberapa spasi khusus, saya akan menunjukkan kepada Anda bagaimana Anda dapat dengan mudah memposisikan uraian Anda agar sesuai dengan latar belakang pembagi. Desain akhirnya bersih dan unik. Dan dengan beberapa sentuhan kecil, ini bisa menjadi tambahan yang bagus untuk proyek Anda berikutnya.

Mari kita mulai!

Sneak Peek

Berikut ini sedikit bocoran desain dan gif untuk membantu mengilustrasikan elemen animasi.

Membuat Halaman Baru dan Menyebarkan Visual Builder

Untuk memulai, buka Dasbor WordPress Anda dan buka Pages > Add New. Kemudian beri Anda judul halaman dan klik untuk menggunakan Divi Builder. Kemudian klik untuk menggunakan Visual Builder. Anda akan diminta dengan tiga opsi. Pilih opsi untuk "Membangun Dari Awal".

Kanvas kosong Anda menunggu!

Membuat Header Bagian Fitur

Header teratas untuk bagian fitur Anda cukup sederhana. Elemen uniknya adalah bayangan kotak halus yang ditampilkan di bawahnya untuk memberi sedikit kedalaman pada desain.

Untuk membuatnya, masukkan baris satu kolom ke bagian reguler Anda.

Kemudian tambahkan modul teks ke baris dan perbarui pengaturan sebagai berikut:

Isi:

<h1>Our Features</h2>
Everything you need.

Font Teks: Montserrat
Berat Font Teks: Semi Tebal
Ukuran Teks Teks: 22px
Orientasi Teks: Tengah
Berat Huruf Judul: Ultra Tebal
Ukuran Teks Judul: 6vw(desktop), 50px(tablet), 30px(smartphone)

Sekarang simpan pengaturan Anda dan lompat ke pengaturan bagian dan tambahkan bayangan kotak sebagai berikut:

Bayangan Kotak: lihat tangkapan layar
Posisi Vertikal Bayangan Kotak: 19px
Kekuatan Buram Bayangan Kotak: 80px
Kekuatan Penyebaran Bayangan Kotak: -16px
Warna Bayangan: rgba(136,150,171,0,13)

Simpan Pengaturan.

Hal-hal yang cukup sederhana. Sekarang mari kita ke bagian yang menyenangkan.

Membuat Bagian Fitur Utama dan Desain Latar Belakang

Kita perlu menambahkan bagian baru untuk menampung fitur kita. Biasanya, Anda hanya dapat menambahkan baris baru ke bagian sebelumnya, tetapi dalam kasus ini kita perlu menambahkan latar belakang Pembagi yang tersedia di elemen Bagian.

Lanjutkan dan tambahkan bagian baru langsung di bawah bagian yang baru saja Anda selesaikan. Kemudian tambahkan tata letak empat kolom ke baris.

Kami akan menambahkan uraian ke kolom ini, tetapi untuk sekarang mari perbarui pengaturan bagian kami.

Untuk bagian ini, kita perlu memberikan lebar maks kustom. Ini penting untuk menjaga desain tetap pada ukuran browser yang lebih besar. Kita juga perlu menambahkan Pembagi bagian untuk dijadikan sebagai latar belakang yang sesuai dengan pengaturan uraian kita (lebih lanjut tentang ini nanti).

Buka pengaturan bagian dan perbarui yang berikut:

Lebar: 1080px
Perataan Bagian: Tengah
Pembagi: Atas
Gaya Pembagi: lihat tangkapan layar
Warna Pembagi: rgba(136,150,171,0,07)
Tinggi Pembagi: 52%

Simpan Pengaturan.

Memberi bagian lebar khusus (atau lebar maksimum) 1080px pada dasarnya adalah bagaimana baris Anda diatur secara default dalam suatu bagian. Jadi, pada dasarnya, kami membuat seluruh bagian kami seukuran baris default.

Menambahkan Blurb ke Baris Empat Kolom

Pada titik ini kita dapat melanjutkan dan mulai menambahkan uraian kita ke masing-masing dari empat kolom. Klik ikon abu-abu di kolom pertama untuk menambahkan uraian pertama Anda. Perbarui konten di dalam kotak untuk menyertakan lebih sedikit teks (2 kalimat), lalu pilih untuk menggunakan ikon daripada gambar (saya memilih ikon gambar).

Di bawah tab desain, perbarui yang berikut ini:

Warna Ikon: #974450
Ikon Lingkaran: YA
Warna Lingkaran: rgba (255,255,255,0.5)
Gunakan Ukuran Font Ikon: YA
Ukuran Font Ikon: 48px
Orientasi Teks: Tengah

Simpan Pengaturan.

Sekarang salin dan tempel modul uraian ke setiap kolom yang tersisa sehingga Anda memiliki satu uraian di setiap kolom.

Anda dapat kembali dan memperbarui ikon jika Anda mau pada saat ini, tetapi Anda tidak harus melakukannya.

Tambahkan Penghitung Lingkaran ke Ikon Blurb Tumpang Tindih

Untuk menambahkan animasi ke ikon uraian kami, kami akan tumpang tindih setiap ikon dengan penghitung lingkaran yang memiliki nilai angka yang berbeda. Ini akan menyebabkan animasi lingkaran meningkat secara bertahap dengan setiap ikon untuk menunjukkan perkembangan. Namun, Anda dapat menggunakan nilai nubmer apa pun yang Anda inginkan dengan setiap penghitung lingkaran.

Klik ikon abu-abu "Tambah Modul Baru" di bawah modul uraian di kolom pertama dan kemudian tambahkan modul penghitung.

Sebelum Anda mulai mengedit pengaturan modul lingkaran, lanjutkan dan seret ke atas modul uraian. Sekarang Anda dapat memperbarui pengaturan konten sebagai berikut:

Hapus teks di kotak judul
Nomor: 25

Kemudian perbarui pengaturan tab desain sebagai berikut:

Warna Latar Belakang Bar: #974450 (warna yang sama dengan ikon uraian Anda)
Warna Teks Angka: rgba(0,0,0,0) (ini benar-benar transparan sehingga menyembunyikan nomornya)
Ukuran Teks Angka: 0px (untuk menghilangkan ruang teks yang tidak diinginkan di dalam lingkaran)
Lebar: 109px (ini disetel berdasarkan ukuran ikon yang akan tumpang tindih)
Penyelarasan Modul: Pusat
Margin-bottom: -102px (ini akan menutupi ikon dengan sempurna)

Simpan Pengaturan.

Sekarang yang perlu Anda lakukan adalah menyalin dan menempelkan modul penghitung lingkaran ke masing-masing kolom yang tersisa dan kemudian seret ke bagian atas setiap uraian. Setelah penghitung lingkaran yang digandakan berada di tempatnya, perbarui penghitung lingkaran kedua menjadi 50, penghitung ketiga menjadi 75, dan penghitung keempat menjadi 100. Hasilnya akan terlihat seperti ini setelah animasi selesai.

Gunakan Padding Baris untuk Memposisikan Ikon agar Bertepatan dengan Pembagi

Langkah terakhir untuk desain ini adalah memposisikan ikon agar sesuai dengan lengkungan latar belakang pembagi. Untuk melakukan ini, kita perlu menambahkan beberapa padding khusus pada baris. Buka pengaturan baris dan perbarui yang berikut:

Jadikan Baris Ini Lebar Penuh: YA
Kolom 2 Padding Khusus: 9% Atas (desktop), 0% Atas (tablet)
Kolom 3 Padding Khusus: 9% Atas (desktop), 0% Atas (tablet)

Itu dia!

Lihat hasil akhirnya.

Perhatikan bagaimana ikon sekarang dianimasikan oleh penghitung lingkaran dengan nilai angka yang bervariasi. Dan ikonnya bertepatan dengan latar belakang pembagi.

Bagaimana Bagian Fitur Terlihat di Seluler

Berikut adalah tampilan desain pada tampilan tablet dan smartphone.

Pikiran Akhir

Elemen unik dari desain bagian fitur ini ringan dan halus, yang seharusnya memudahkan Anda untuk memasukkan ke dalam tata letak Anda sendiri dengan beberapa penyesuaian kecil. Dan jika animasi penghitung lingkaran tidak cocok untuk Anda, jangan ragu untuk mengabaikannya dan cukup gunakan ikon lingkaran pada modul uraian. Atau Anda dapat memilih untuk hanya menggunakan penghitung lingkaran dengan nilai angka yang terlihat untuk tata letak materi iklan untuk menampilkan statistik. Jika ada, saya harap ini akan memberi Anda beberapa ide untuk dijelajahi sendiri.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!