Membuat Kotak Kartu Pertanyaan Interaktif untuk Halaman Tentang Anda Berikutnya dengan Divi

Setiap minggu, kami memberi Anda paket tata letak Divi baru dan gratis yang dapat Anda gunakan untuk proyek Anda berikutnya. Untuk salah satu paket tata letak, kami juga membagikan kasus penggunaan yang akan membantu Anda membawa situs web Anda ke tingkat berikutnya.

Minggu ini, sebagai bagian dari inisiatif desain Divi kami yang sedang berlangsung, kami akan menunjukkan kepada Anda cara membuat kisi kartu pertanyaan interaktif untuk halaman tentang Anda berikutnya dengan Divi. Kami akan menggunakan halaman tentang Paket Tata Letak Penyedia Layanan Internet tetapi Anda dapat menggunakan pendekatan pada halaman mana pun yang sedang Anda kerjakan. Ini memberikan pengalaman pengguna yang berbeda kepada pengunjung dan memungkinkan Anda untuk berinteraksi dengan mereka tentang informasi yang Anda bagikan. Setelah Anda mendapatkan pendekatannya, Anda dapat membuat desain kisi kartu pertanyaan alternatif pilihan Anda dengan bermain-main dengan opsi bawaan Divi.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas kisi kartu pertanyaan yang akan kita buat ulang dari awal.

Desktop

Seluler

Mari Mulai Berkreasi!

Buat Halaman Baru Menggunakan Halaman Tentang Paket Tata Letak ISP

Untuk membuat desain yang telah kami tunjukkan di atas, kami akan menggunakan halaman about dari Internet Service Provider Layout Pack jadi lanjutkan dan buat halaman baru menggunakan layout ini. Seperti biasa, Anda dapat menemukannya di tata letak yang telah dibuat sebelumnya.

Hapus Semua Bagian Antara Bagian Pahlawan & Footer

Kami akan mengganti semua konten saat ini dengan kartu kisi pertanyaan. Untuk melakukan itu, pertama-tama kita harus menghapus semua bagian di antara bagian pahlawan dan footer.

Tambahkan Bagian Baru di Antara

Kisi kartu pertanyaan yang akan kami buat dapat berisi segala jenis pertanyaan perusahaan yang ingin Anda jawab. Anda juga dapat menggunakan kisi untuk menampilkan pertanyaan yang sering diajukan. Lanjutkan dengan menambahkan bagian reguler baru di antara bagian pahlawan dan footer halaman.

Tambahkan Baris Baru

Struktur Kolom

Tanpa membuat perubahan apa pun pada pengaturan bagian, tambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Kami akan menghapus semua ruang default di antara kolom. Buka pengaturan baris dan buat beberapa perubahan pada pengaturan ukuran.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Kami masih membutuhkan beberapa ruang di antara kolom untuk memiliki desain yang tampak bagus. Buka pengaturan spasi dan tambahkan beberapa nilai padding khusus.

• Padding Atas: 10px
• Padding Bawah: 10px
• Kolom 1 Padding Kiri: 10px (Desktop), 5px (Tablet & Ponsel)
• Kolom 1 Padding Kanan: 5px
• Kolom 2 Padding Kiri: 5px
• Kolom 2 Padding Kanan: 5px
• Kolom 3 Padding Kiri: 5px
• Kolom 3 Padding Kanan: 10px (Desktop), 5px (Tablet & Ponsel)

Tambahkan Modul Blurb Baru ke Kolom 1

Tambah isi

Untuk membuat efek hover, satu-satunya modul yang kita perlukan adalah Modul Blurb. Kami akan mulai dengan membuat satu dan mengkloningnya setelah itu untuk membuat seluruh hasil. Tambahkan Modul Blurb ke kolom satu. Tambahkan pertanyaan yang ingin Anda jawab ke bidang judul dan jawaban ke kotak konten.

Pilih Ikon

Kemudian, pilih ikon yang pas di pengaturan gambar & ikon. Ikon ini akan membantu pengunjung Anda memahami bahwa mereka harus mengarahkan kartu pertanyaan untuk melihat jawabannya.

Pengaturan Ikon Default

Lanjutkan dengan mengubah pengaturan ikon di tab desain.

• Warna Ikon: #aaaaaa
• Penempatan Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 40px

Arahkan ke Pengaturan Ikon

Dan ubah warna ikon di hover. Kami menggunakan warna yang sepenuhnya transparan saat mengarahkan kursor untuk membuat ikon menghilang saat mengarahkan kursor.

• Warna Ikon: rgba(255,255,255,0)

Pengaturan Teks

Selanjutnya, ubah orientasi teks di pengaturan teks.

• Orientasi Teks: Tengah

Pengaturan Teks Judul Default

Buat beberapa perubahan pada pengaturan teks judul juga.

• Judul Font: Poppins
• Judul Font Berat: Tebal
• Warna Teks Judul: #333333
• Ukuran Teks Judul: 40px
• Spasi Huruf Judul: -3px

Arahkan ke Pengaturan Teks Judul

Dan ubah warna teks judul saat melayang. Kami, sekali lagi, menggunakan warna yang sepenuhnya transparan untuk memastikan pertanyaan tidak muncul begitu seseorang mengarahkan Modul Blurb.

• Warna Teks Judul: rgba(255,255,255,0)

Pengaturan Teks Tubuh Default

Lanjutkan dengan mengubah pengaturan teks isi.

• Font Tubuh: Buka Sans
• Berat Huruf Tubuh: Ringan
• Warna Teks Tubuh: rgba(255,255,255,0)
• Ukuran Teks Tubuh: 25px
• Spasi Huruf Isi: -2px
• Tinggi Garis Tubuh: 1.6em

Arahkan Arahkan ke Pengaturan Teks Tubuh

Dan ubah warna teks tubuh saat melayang.

• Warna Teks Tubuh: #000000

Jarak

Untuk membentuk modul kita menjadi persegi, kita akan menambahkan beberapa nilai padding kustom.

• Padding Atas: 9vw
• Padding Bawah: 9vw
• Padding Kiri: 50px
• Padding Kanan: 50px

Sudut Bulat Default

Kami juga memberikan modul kami '30px' sudut membulat.

Arahkan Sudut Bulat

Kami menghapus sudut membulat ini saat melayang.

Perbatasan Default

Dan kami akan menambahkan batas bawah.

• Lebar Batas Bawah: 0px
• Warna Batas Bawah: #0fffeb

Arahkan Perbatasan

Ubah lebar batas bawah saat mengarahkan kursor agar muncul.

• Lebar Batas Bawah: 10px

Bayangan Kotak

Untuk menambahkan beberapa kedalaman, kita akan menggunakan bayangan kotak juga.

• Warna Bayangan: rgba(0,0,0,0.05)

Transisi

Last but not least, kami akan mengurangi durasi transisi di tab lanjutan.

• Durasi Transisi: 250ms

Modul Blurb Klon Dua Kali & Tempatkan di Kolom Tersisa

Sekarang setelah Modul Blurb pertama Anda selesai, Anda dapat menghemat waktu dengan mengkloningnya dan menempatkan duplikatnya di dua kolom yang tersisa.

Ubah Konten

Pastikan Anda mengubah konten setiap duplikat.

Ubah Warna Batas Bawah

Seiring dengan warna batas bawah.

Klon Seluruh Baris Dua Kali

Anda dapat membuat kisi kartu pertanyaan dengan mengkloning baris sebanyak yang Anda inginkan.

Ubah Konten & Warna Bawah Untuk Setiap Item Secara Individual

Tapi jangan lupa untuk mengubah isi dan warna bawah untuk membuat setiap kartu pertanyaan menjadi unik!

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat kisi kartu pertanyaan interaktif menggunakan Paket Tata Letak Penyedia Layanan Internet Divi. Meskipun kami telah memastikan desainnya cocok dengan gaya paket tata letak, Anda dapat menggunakan metode ini untuk mengubah halaman tentang apa pun menjadi halaman yang juga interaktif. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!