Accordion merupakan salah satu widget elementor yang sangat berguna. Dengan accordion, anda dapat menampilkan banyak konten pada pengunjung namun tidak memakan banyak ruang. Widget ini hanya akan menampilkan isi konten ketika pengunjung membuka konten tersebut.
Catatan
- Jika anda mengaktifkan “nested elements experimental” atau fitur eksperimental elemen bertingkat, widget Accordion baru akan menggabungkan dan menggantikan widget Toggle. Ini berarti widget Toggle tidak lagi tersedia, namun widget Toggle yang sudah ada tidak akan terpengaruh dengan perubahan ini dan masih bisa diedit.
- Jika anda mengaktifkan “nested elements experimental” atau fitur eksperimental elemen bertingkat, widget Accordion default akan diganti dengan widget Accordion baru yang mendukung fitur elemen bertingkat. Untuk lebih jelasnya mari kita bahas tentang apa itu widget accordion
Dengan Accordion, pengunjung dapat memilih isi konten yang ingin ditampilkan. Widget Accordion mirip dengan widget Toggle, namun ada dua perbedaan utama yaitu:
- Saat halaman dimuat, item pertama widget Accordion secara otomatis ditampilkan sepenuhnya, sedangkan item lain hanya akan ditampilkan judulnya
- Hanya satu item Accordion yang dapat ditampilkan semua. Saat item lain ditampilkan sepenuhnya, item yang sebelumnya dibuka secara otomatis akan diringkas. Namun dengan widget Toggle, pengunjung dapat membuka semua konten item yang ada
Itu dia perbedaan accordion dan toggle widget, sekarang mari kita bahas apa saja fungsi dan pengaturan widget accordion.
Content
Accordion
Accordion Items
- Title: Masukkan judul item accordion disini
- Content: Isi konten accordion
- Pilih “+ Add Item” untuk menambahkan item accordion baru
- Icon: Pilih icon ketika konten diringkas atau tidak tampil seluruhnya
- Active Icon: Pilih icon ketika konten ditampilkan seluruhnya
- Title HTML Tag: Tentukan tag HTML untuk judul item accordion (akan berpengaruh ke SEO)
- FAQ Schema: Pilih apakah accordion ini akan digunakan untuk menjawab FAQ atau Frequently Ask Question. Hal ini juga akan berpengaruh pada SEO
Style
Accordion
- Border Width: Tentukan ketebalan border accordion
- Border Color: Pilih warna border accordion
Title
- Background: Tentukan background untuk judul item accordion
- Color: Pilih warna judul item pada mode ringkas (item tertutup)
- Active Color: Pilih warna judul item pada mode tampilan penuh (item terbuka)
- Typography: Atur tipografi untuk judul item accordion
- Text Stroke: Tentukan ketebalan judul item
- Text Shadow: Beri efek bayangan judul item
- Padding: Atur padding judul item
Icon
- Alignment: Tentukan posisi icon berada di kanan atau kiri accordion
- Color: Pilih warna icon ketika item tertutup
- Active Color: Pilih warna icon ketika item terbuka
- Spacing: Tentukan jarak antar icon dan judul
Content
- Background: Pilih warna background untuk isi konten item accordion
- Color: Pilih warna isi konten
- Typography: Atur tipografi isi konten
- Text Shadow: Beri efek bayangan pada teks konten
- Padding: Atur padding untuk isi konten item accordion