Akordeon menampilkan bagian-bagian konten dalam bentuk header-header yang dapat diklik untuk membuka atau menciutkan kontennya. Dalam panduan ini, Anda akan belajar cara menambahkan, menyesuaikan, dan menggunakan blok Akordeon di situs WordPress.com.
Gunakan akordeon untuk menata informasi, memperpendek halaman, dan membantu pengunjung berfokus pada konten yang paling penting bagi mereka. Akordeon ideal untuk menata konten yang mungkin akan dicermati secara pilih-pilih oleh masing-masing pengunjung. Berikut beberapa cara penggunaan akoedeon yang umum:
- Ketentuan dan kebijakan: Tampilkan informasi legal atau kebijakan tanpa menjejali layar pengunjung dengan teks panjang.
- TJU: Kelompokkan pertanyaan umum dengan jawaban yang dapat dibuka tutup.
- Detail produk: Tampilkan spesifikasi, panduan ukuran, atau informasi pengiriman dalam kolom yang dapat diciutkan.
- Petunjuk runtut: Uraikan tutorial atau panduan menjadi langkah-langkah yang mudah dipahami.
- Jadwal acara: Atur agenda atau rencana kegiatan menurut waktu atau sesi.
- Biodata tim: Tampilkan perkenalan singkat tiap anggota tim dengan biodata yang dapat dibuka tutup.
Ikuti langkah-langkah berikut untuk menambahkan blok Akordeon ke halaman atau pos:
- Buka dasbor situs.
- Buka Halaman atau Pos lalu klik halaman/pos yang ingin Anda beri akordeon.
- Klik ikon + penyisip blok.
- Cari “Blok Akordeon” lalu klik untuk menambahkannya ke pos atau halaman.

Panduan lebih lanjut tentang cara menambahkan blok terdapat di sini.
Ketika blok Akordeon pertama kali ditambahkan ke dalam pos atau halaman, akan tersedia bagian-bagian berikut:
- Item Akordeon: Tiap bagian yang dapat diciutkan, berisi header dan panel.
- Judul Akordeon: Header yang dapat diklik untuk membuka atau menciutkan konten di dalamnya.
- Panel Akordeon: Konten yang terbuka saat header diklik.

Untuk melengkapi akordeon Anda:
- Tambahkan teks judul atau header yang ingin selalu ditampilkan.
- Klik di dalam area Panel Akordeon, atau gunakan Tampilan Daftar untuk memilihnya.
- Klik + penyisip blok untuk menambahkan blok di dalam area panel akordeon. Anda dapat menambahkan konten apa pun, termasuk teks, gambar, video, dan blok lainnya.

Blok Akordeon menyediakan pengaturan untuk mengontrol perilaku blok. Untuk membuka pengaturan ini, pilih blok Akordeon induk menggunakan Tampilan Daftar dan buka pengaturan blok di bilah sisi kanan.
Saat pengaturan “Blok internal menggunakan lebar konten” diaktifkan, blok di dalam blok Accordion akan mengikuti pengaturan lebar tersebut:
- Konten: Lebar area konten untuk blok tidak diatur menjadi lebar atau lebar penuh.
- Lebar: Lebar konten untuk blok yang diatur menjadi lebar.
Jika diaktifkan, item akordeon yang terbuka akan otomatis menutup saat item lainnya dibuka. Hal ini membuat konten tetap rapi dan membantu pengunjung fokus ke tiap bagian satu per satu.
Nyalakan atau matikan ikon buka/ciutkan (biasanya berupa “+” atau panah) yang muncul di samping masing-masing header akordeon. Matikan pilihan ini agar tampilan lebih bersih dan minimalis.
Tentukan apakah ikon ditampilkan di kiri atau kanan header akordeon.
Anda dapat mengatur item akordeon tertentu yang akan ditampilkan ketika halaman dimuat. Untuk melakukannya, ikuti langkah-langkah berikut:
- Gunakan Tampilan Daftar untuk memilih blok Item Akordeon yang ingin dibuka secara default.
- Pada bilah sisi pengaturan blok, aktifkan pilihan “Buka secara default“.
Di bilah samping pengaturan blok, klik ikon Gaya untuk mengakses pengaturan desain pada blok. Ikon Gaya berbentuk lingkaran dengan setengah bagiannya terisi:

Pilihan yang tersedia meliputi:
- Warna: Atur warna latar dan teks untuk header dan panel akordeon.
- Gambar latar belakang: Tambahkan gambar latar belakang ke keseluruhan blok Akordeon induk.
- Tipografi: Sesuaikan ukuran dan gaya font untuk teks.
- Dimensi: Atur padding dan margin di sekeliling item akordion.
- Garis tepi & bayangan: Tambahkan efek garis tepi dan bayangan ke akordeon.