Artikel ini merupakan tutorial dan dokumentasi teknis tentang cara membuat FAQ menggunakan plugin Kadence Blocks di WordPress, khususnya dengan blok Accordion. Panduan ini membahas struktur konten menggunakan Inner Blocks sekaligus cara mengatur tampilan FAQ agar tetap sederhana dan nyaman dibaca.
Perlu diketahui bahwa Gutenberg bawaan WordPress juga telah menyediakan blok Accordion sendiri. Jadi, tutorial ini bukan satu-satunya cara untuk membuat FAQ di WordPress, melainkan dokumentasi berdasarkan variasi dan fitur Accordion yang tersedia pada plugin Kadence Blocks.
Tutorial ini dibuat dan diuji menggunakan WordPress versi 7.1 dan Kadence Blocks versi 3.7.9.1. Nama menu, tampilan editor, serta beberapa opsi pengaturan dapat berbeda pada versi WordPress atau Kadence Blocks yang lebih lama maupun lebih baru.
Jika tampilan editor WordPress Anda berbeda dari yang ditampilkan dalam tutorial, periksa terlebih dahulu versi WordPress dan Kadence Blocks yang sedang digunakan.
Mengenal Inner Blocks pada Kadence Accordion
Bagi Anda yang baru pertama kali menggunakan blok Accordion dari Kadence, cara kerjanya mungkin terasa sedikit berbeda. Pada beberapa plugin lain, setiap item FAQ biasanya hanya menyediakan satu kolom teks sederhana untuk menuliskan jawaban.
Pada Kadence, area jawaban di dalam setiap item Accordion berfungsi seperti kanvas konten yang dapat diisi dengan berbagai blok. Dalam ekosistem WordPress Gutenberg, struktur seperti ini dikenal sebagai Inner Blocks atau blok bersarang.
Dengan pendekatan tersebut, area jawaban FAQ tidak terbatas pada teks biasa.
Mengapa Inner Blocks Berguna untuk FAQ?
- Format teks lebih fleksibel: Anda dapat menekan Enter untuk membuat beberapa paragraf sehingga jawaban tidak menjadi satu blok teks panjang.
- Bebas menambahkan elemen: Karena area jawaban bekerja seperti editor konten biasa, Anda dapat memasukkan gambar, video YouTube, daftar (List), tombol (Button), atau blok lainnya langsung ke dalam jawaban FAQ.
- Konten lebih mudah dikembangkan: Jawaban FAQ dapat dibuat lebih informatif tanpa harus memindahkan konten ke bagian lain halaman.
Fleksibilitas inilah yang membuat Accordion Kadence menarik digunakan ketika FAQ membutuhkan jawaban yang lebih kompleks daripada sekadar satu atau dua kalimat.
Cara Membuat FAQ dengan Kadence Accordion
Membuat FAQ menggunakan Kadence Accordion cukup sederhana. Ikuti langkah-langkah berikut.
Membuka Editor dan Menambahkan Accordion
- Buka editor artikel atau halaman WordPress tempat Anda ingin menambahkan FAQ.
- Klik ikon (+) untuk menambahkan blok atau ketik /accordion pada editor.
- Pilih blok Accordion dari Kadence yang tersedia di daftar blok.
- Setelah Accordion ditambahkan, Kadence dapat menampilkan pilihan gaya atau preset bawaan. Pilih gaya yang paling sesuai dengan desain website Anda. Untuk tampilan minimalis, gunakan preset yang sederhana dan tidak menggunakan latar belakang dengan warna terlalu kuat.
Menambahkan Pertanyaan dan Jawaban
- Masukkan pertanyaan pada bagian Title.
- Untuk menambahkan jawaban, klik area konten di bawah judul pertanyaan.
- Tambahkan blok Paragraph untuk jawaban berbentuk teks.
- Jika diperlukan, Anda juga dapat menambahkan blok lain seperti List, gambar, video, atau Button.
- Untuk menambahkan pertanyaan berikutnya, klik ikon (+) Add Accordion Item pada toolbar blok Accordion.
Dengan struktur tersebut, setiap pertanyaan dan jawabannya tetap berada dalam satu item Accordion sehingga konten FAQ lebih mudah dikelola.
Memeriksa Struktur FAQ dengan List View
White Tips: Jika Anda ingin memastikan struktur blok tidak membingungkan saat proses editing, buka List View menggunakan ikon tiga garis horizontal di kiri atas editor WordPress.
Secara umum, struktur blok FAQ dapat terlihat seperti berikut:
- Accordion — blok induk
- Accordion Item 1 — judul/pertanyaan
- Paragraph — jawaban
- Accordion Item 2 — judul/pertanyaan
- Paragraph — jawaban
- Accordion Item 1 — judul/pertanyaan
Memahami struktur ini akan membantu ketika Anda ingin memilih blok induk, mengedit item tertentu, atau menambahkan blok tambahan ke dalam jawaban.
Cara Membuat Tampilan FAQ Minimalis
Setelah struktur FAQ selesai, Anda dapat mulai mengatur tampilannya.
Untuk desain FAQ minimalis, Anda tidak perlu menggunakan banyak warna atau efek visual. Fokus utamanya adalah membuat pertanyaan mudah dipindai, memberikan ruang yang cukup, dan memastikan halaman tidak terasa terlalu padat.
Mengatur Border Accordion
Pilih Parent Accordion Block, kemudian buka pengaturan blok pada sidebar editor.
Pada bagian pengaturan styling, Anda dapat menyesuaikan border Accordion. Untuk mendapatkan tampilan sederhana, Anda dapat mencoba konfigurasi awal seperti berikut:
- Border atas: 0px
- Border kiri: 0px
- Border kanan: 0px
- Border bawah: 1px
- Warna: abu-abu dengan kontras rendah
Dengan konfigurasi tersebut, setiap pertanyaan memiliki pemisah visual berupa garis tipis tanpa membuat setiap item terlihat seperti kotak yang terpisah.
Angka tersebut bukan aturan wajib. Sesuaikan ketebalan dan warna border dengan desain keseluruhan website Anda.
Mengatur Background
Jika ingin mendapatkan tampilan yang lebih bersih, gunakan background transparan atau warna yang sama dengan area halaman.
Hindari penggunaan warna background yang berbeda pada setiap item apabila tujuan Anda adalah membuat FAQ dengan gaya minimalis. Perbedaan warna yang terlalu banyak dapat membuat Accordion terlihat seperti kumpulan kartu, bukan bagian alami dari halaman.
Mengatur Spacing dan Padding
Spacing sangat berpengaruh terhadap tampilan Accordion.
Jika jaraknya terlalu kecil, daftar pertanyaan akan terlihat padat. Sebaliknya, jarak yang terlalu besar dapat membuat bagian FAQ memakan terlalu banyak ruang pada halaman.
Sebagai titik awal, Anda dapat mencoba padding sekitar 15–20px untuk bagian atas dan bawah. Setelah itu, sesuaikan nilainya berdasarkan ukuran font, panjang pertanyaan, dan desain website.
Pastikan hasil akhirnya tetap nyaman dibaca, terutama pada layar smartphone.
Mengatur Tipografi
Gunakan tipografi yang konsisten dengan sistem desain website Anda.
Untuk judul pertanyaan:
- Gunakan ukuran font yang mudah dibaca.
- Gunakan font weight yang cukup untuk membedakan pertanyaan dari jawaban.
- Gunakan warna teks yang memiliki kontras baik dengan background.
Untuk jawaban:
- Gunakan ukuran teks yang sama atau mendekati body text website jika memungkinkan.
- Berikan line-height yang cukup agar paragraf mudah dibaca.
- Hindari penggunaan warna teks yang terlalu pucat.
Tidak perlu menggunakan font atau ukuran khusus hanya karena elemen tersebut merupakan FAQ. Konsistensi dengan tipografi website secara keseluruhan biasanya menghasilkan tampilan yang lebih profesional.
Mengatur Ikon Accordion
Accordion membutuhkan indikator visual agar pengunjung mengetahui bahwa sebuah pertanyaan dapat dibuka.
Kadence menyediakan pengaturan ikon untuk Accordion. Untuk desain sederhana, Anda dapat menggunakan ikon Chevron dan meletakkannya di sisi kanan.
Ketika panel dibuka, arah ikon dapat berubah sehingga pengunjung mendapatkan indikasi visual bahwa konten sedang terbuka.
Gunakan ikon yang sederhana dan jangan membuat ukurannya terlalu besar agar perhatian utama tetap berada pada teks pertanyaan.
Kesimpulan
Kadence Accordion dapat digunakan untuk membuat FAQ dengan struktur konten yang cukup fleksibel karena area jawaban mendukung penggunaan Inner Blocks. Artinya, jawaban FAQ tidak harus berupa satu blok teks saja, tetapi dapat dikembangkan menggunakan paragraf, daftar, gambar, video, tombol, maupun blok Gutenberg lainnya sesuai kebutuhan.
Untuk tampilan yang minimalis, fokuskan pengaturan pada border, background, spacing, tipografi, dan ikon. Tidak perlu menambahkan terlalu banyak efek visual selama struktur pertanyaan dan jawaban sudah jelas serta nyaman digunakan pada perangkat desktop maupun smartphone.
Perlu diingat, Kadence Blocks bukan satu-satunya pilihan untuk membuat Accordion di WordPress. Gutenberg bawaan juga menyediakan blok Accordion. Tutorial ini dibuat sebagai dokumentasi teknis untuk penggunaan variasi Accordion dari plugin Kadence Blocks.
