Elementor merupakan salah satu page builder wordpress terbaik yang memungkinkan pengguna untuk membuat halaman web dengan mudah. Salah satu fitur populer yang sering digunakan adalah widget Accordion.
Namun, secara default, Elementor akan menampilkan item pertama dalam keadaan terbuka. Jika Anda ingin mengatur agar semua item tertutup secara default, artikel ini akan memberikan panduan lengkap dan terperinci.
Mengapa Mengatur Accordion Elementor Agar Tertutup Semua?
Secara bawaan, widget Accordion di Elementor membuka item pertama ketika halaman dimuat. Dalam beberapa kasus, kita mungkin ingin semua item tertutup terlebih dahulu agar tampilan halaman lebih rapi dan profesional. Berikut adalah beberapa alasan mengapa kita perlu mengatur agar widget Accordion tertutup semua:
- Meningkatkan pengalaman pengguna (UX) dengan tampilan lebih bersih.
- Mencegah gangguan visual, terutama jika terdapat banyak item dalam satu halaman.
- Memungkinkan pengguna memilih konten yang ingin mereka lihat tanpa dipaksa melihat isi dari item pertama.
- Membantu navigasi yang lebih nyaman, terutama di halaman dengan banyak informasi.
Cara Mengatur Widget Accordion Elementor Agar Tertutup Semua
Berikut adalah beberapa metode yang dapat digunakan untuk membuat widget Accordion Elementor tertutup semua secara default:
1. Menggunakan Kode Javascript
Cara paling efektif untuk memastikan semua item dalam Accordion tetap tertutup adalah dengan menggunakan kode javascript. Anda bisa menambahkan kode ini ke halaman Anda menggunakan widget HTML di Elementor.
Langkah-langkahnya:
- Buka halaman yang ingin Anda edit menggunakan Elementor.
- Tambahkan widget HTML di bagian paling bawah halaman.
- Salin dan tempel kode berikut:
<script>
jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
$('.elementor-tab-content').css('display', 'none'); }, delay);
});
</script>
- Perbarui atau Simpan halaman Anda, lalu coba muat ulang untuk melihat perubahan.
Kode ini akan memastikan bahwa semua item dalam Accordion tetap tertutup saat halaman dimuat pertama kali.
2. Menggunakan Kode CSS
Jika Anda tidak ingin menggunakan JavaScript, cara alternatif adalah menggunakan kode CSS. Berikut langkah-langkahnya:
Langkah-langkahnya:
- Buka halaman Elementor dan pilih widget Accordion yang ingin Anda ubah.
- Tambahkan widget HTML atau CSS kustom.
- Salin dan tempel kode berikut:
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content {
display: none !important;
}
.elementor-accordion .elementor-accordion-item:first-child {
background: none;
}
- Simpan dan perbarui halaman Anda, lalu periksa apakah perubahan telah diterapkan.
Kode ini akan menyembunyikan konten Accordion pertama sehingga tidak akan terbuka secara otomatis.
Troubleshooting: Jika Perubahan Tidak Berfungsi
Terkadang, setelah menerapkan metode di atas, Accordion masih terbuka. Berikut adalah beberapa langkah pemecahan masalah:
Baca juga: Cara Mengatasi Elementor Pro Gagal Update
- Pastikan kode disimpan dengan benar dan halaman telah diperbarui.
- Gunakan mode incognito di browser untuk menghindari cache yang menghambat perubahan.
- Cek apakah ada konflik dengan plugin lain yang mempengaruhi tampilan Accordion.
- Jika menggunakan Elementor Pro, coba gunakan fitur bawaan Custom CSS tanpa menggunakan kode tambahan di widget HTML.
- Pastikan jQuery diaktifkan di situs Anda, karena beberapa metode memerlukan jQuery untuk berfungsi dengan baik.
Kesimpulan
Mengatur widget Accordion Elementor wordpress agar tertutup semua adalah langkah yang sangat berguna untuk meningkatkan pengalaman pengguna. Dengan menggunakan JavaScript, CSS, atau fitur Elementor Pro, Anda dapat dengan mudah mengontrol tampilan Accordion di situs Anda.
Metode terbaik yang bisa Anda pilih bergantung pada kebutuhan dan tingkat fleksibilitas yang diinginkan. Jika ingin solusi cepat, gunakan CSS. Jika ingin kontrol lebih lanjut, gunakan JavaScript atau fitur Elementor Pro.
