Cara Menggunakan Widget Akordeon Tingkat Lanjut Elementor dari HappyAddons

Diterbitkan: 2024-04-01

Widget akordeon adalah cara terbaik untuk menyajikan dan mengatur konten panjang secara ringkas, tanpa menambah panjang halaman. Anda dapat menambahkan bagian yang dapat dilipat sebanyak yang Anda inginkan ke postingan dan halaman Anda dengan widget sehingga pengunjung dapat menjelajahi konten sesuai keinginan mereka.

Elementor adalah plugin pembuat halaman yang kuat dengan 100+ widget menarik. HappyAddons adalah tambahan plugin dengan 110+ widget dan fitur tambahan. Kedua plugin ini menyediakan widget akordeon. Namun widget HappyAddons lebih kaya fitur dibandingkan widget lainnya.

Pada artikel ini, kami akan menunjukkan cara menggunakan widget akordeon tingkat lanjut Elementor di HappyAddons dengan tutorial mendetail. Sebelum itu, lihat sekilas widget akordeon tingkat lanjut. Mari kita mulai.

Apa itu Widget Akordeon Tingkat Lanjut?

Sederhananya, widget akordeon tingkat lanjut memungkinkan Anda membuat bagian konten yang dapat dilipat di situs web Anda. Pengguna dapat memperluas dan menciutkan bagian dengan satu klik sederhana untuk menjelajahi konten mereka. Keuntungan utama widget ini adalah sejumlah besar informasi di bagian kecilnya.

Hal ini dapat menyelamatkan pengguna dari kewalahan karena banyaknya informasi. Widget ini sangat berguna untuk situs web yang mencakup banyak konten tekstual dan sering memperbaruinya. Ini dapat membantu Anda menjaga antarmuka yang bersih dan terorganisir di halaman web Anda.

Cara Menggunakan Widget Akordeon Tingkat Lanjut Elementor dari HappyAddons

Di bagian ini, kami akan menjelaskan kepada Anda cara menggunakan widget akordeon lanjutan HappyAddons. Pastikan Anda telah menginstal dan mengaktifkan plugin berikut di situs Anda.

  • elemen
  • Selamat Addons
  • SelamatAddons Pro

Sekarang, ikuti langkah-langkah yang diuraikan di bawah ini untuk mempelajari cara menggunakan widget akordeon tingkat lanjut.

Langkah 01: Seret dan Jatuhkan Widget Akordeon Tingkat Lanjut ke Kanvas Elementor

Buka halaman yang Anda inginkan dengan kanvas Elementor. Kemudian, buat tata letak bagian dengan mengklik tombol plus (+) . Anda akan mendapatkan beberapa tata letak berbasis kolom. Pilih yang Anda suka. Untuk tutorial ini, kita akan memilih tata letak satu kolom.

Drag and Drop the Advanced Accordion Widget to the Elementor Canvas

Temukan widget Advanced Accordion dengan mengetikkannya di bilah pencarian panel Elementor. Setelah widget muncul, seret dan lepas ke area kanvas Elementor yang Anda pilih.

Drag and drop the Advanced Accordion widget to the Elementor Canvas

Langkah 02: Ubah Gaya Tata Letak Akordeon Tingkat Lanjut

Secara default, widget hadir dengan latar belakang hitam-putih. Namun, HappyAddons menyediakan beberapa preset yang telah dirancang sebelumnya. Anda dapat mengubah tata letak widget menggunakan preset ini.

Change the Advanced Accordion's layout style

Buka Konten > Preset . Klik pada preset yang tersedia di sana untuk menjelajahinya. Lihat video di bawah untuk mempelajari cara melakukan ini. Pilih preset yang Anda suka.

Langkah 03: Tambahkan Item Baru ke Akordeon Tingkat Lanjut

Buka Konten > Akordeon pada panel Elementor. Perluas bagian Akordeon . Klik tombol + Tambahkan Item untuk menambahkan bagian akordeon baru ke widget.

How to add new items to Advanced Accordion

Sekarang, klik dan perluas tab item yang ingin Anda tambahkan konten. Jenis konten yang dapat Anda tambahkan adalah judul, ikon, file media, dan deskripsi tekstual . Semoga Anda bisa melakukannya sendiri.

Add content to the Advanced Accordion's section

# Impor Templat ke Akordeon

Widget akordeon lanjutan dari HappyAddons memungkinkan Anda mengimpor templat. Mari kita lihat bagaimana melakukan ini. Namun pastikan Anda sudah membuat dan menyimpan template secara langsung.

Klik daftar Dropdown di sebelah Sumber Konten . Pilih opsi Templat pada daftar.

How to import a template in advanced accordion

Tuliskan nama templat di kotak Templat Bagian untuk menemukannya. Setelah templat muncul, klik templat tersebut.

Write the template's name to find and select it

Anda dapat melihat template telah muncul di bagian akordeon lanjutan. Untuk menyesuaikannya, klik opsi Edit Bagian . Anda akan diizinkan untuk menyesuaikan template.

Customize the template in Advanced Accordion section

Catatan: Kami akan menjelaskan tutorial hari ini menggunakan konten tekstual, bukan dengan template.

Langkah 04: Tambahkan Ikon ke Akordeon Tingkat Lanjut

Perluas opsi Opsi . Anda akan mendapatkan opsi untuk mengubah ikon Tertutup dan ikon Terbuka . Anda juga dapat mengubah posisi ikon di kanan atau kiri.

Add Icons to Advanced Accordion

Langkah 05: Tambahkan Lencana Global

Lencana global adalah gaya lencana canggih yang digunakan untuk menghiasi elemen web. Anda dapat mengaktifkan lencana untuk widget akordeon tingkat lanjut dari opsi ini.

Pengguna dapat memilih gaya lencana yang berbeda seperti Garis, Bendera, Segitiga, Lingkaran, Bookmark, atau bahkan membuat tata letak khusus. Anda juga dapat menambahkan ikon, gambar, dan Lottie ke lencana jika Anda mau.

Add a global badge

Langkah 06: Sesuaikan gaya Widget Akordeon Tingkat Lanjut

Buka tab Gaya setelah Anda selesai dengan kontennya. Anda dapat menyesuaikan padding, tipografi, efek bayangan, radius batas, warna teks, warna, jenis latar belakang, spasi, dan berbagai opsi lainnya.

Stylize the Advanced Accordion Widget

Di bawah ini adalah cuplikan hal-hal yang dapat Anda sesuaikan untuk masing-masing elemen widget. Berdasarkan elemennya, opsi penyesuaian akan berbeda.

Things you can customize for the elements of the Advanced Accordion widget

Langkah 07: Jadikan Widget Akordeon Tingkat Lanjut Seluler Responsif

Membuat widget Advanced Accordion menjadi responsif seluler sangatlah mudah. Seperti pada widget lainnya, penyesuaian ekstensif perlu dilakukan dengan mengubah posisi berbagai elemen mulai dari elemen; dalam kasus widget Advanced Accordion, hal ini tidak perlu dilakukan.

Periksa saja apakah widgetnya terlihat bagus di semua ukuran layar. Jika memerlukan sedikit koreksi, lakukanlah. Kunjungi posting ini untuk panduan lebih lanjut tentang cara membuat situs Elementor responsif seluler.

Make the Advanced Accordion Widget Mobile Responsive

Anda dapat mencegah widget ini ditampilkan pada jenis perangkat atau ukuran layar tertentu. Buka tab Tingkat Lanjut > Responsif . Sembunyikan widget di perangkat tertentu dengan mengaktifkan opsi di sebelahnya.

How to hide the advanced accordion widget on any particular device type or screen size

Langkah 08: Pratinjau dan Publikasikan Widget Akordeon Tingkat Lanjut

Mudah-mudahan, konten Anda sudah baik-baik saja sekarang dan siap dipublikasikan. Namun meninjau konten apa pun sebelum dipublikasikan selalu merupakan praktik yang baik. Dengan mengklik ikon Pratinjau di bilah bawah panel Elementor, Anda dapat melihat pratinjau widget. Selanjutnya, publikasikan

Preview and Publish the Advanced Accordion Widget

Untuk panduan lebih lanjut, lihat dokumentasi kami tentang widget akordeon tingkat lanjut.

Hal yang Dapat Anda Lakukan dengan Widget Akordeon Tingkat Lanjut dari HappyAddons

Anda dapat menyusun berbagai jenis konten dengan widget Advanced Accordion di HappyAddons untuk memikat pengguna. Di bawah ini, kami telah mencantumkan beberapa kasus penggunaan tersebut.

1. Halaman/Bagian FAQ

Widget akordeon tingkat lanjut sangat cocok untuk membuat halaman atau bagian FAQ (Pertanyaan yang Sering Diajukan). Ini memungkinkan Anda mengatur dan menampilkan daftar pertanyaan dan jawaban dengan cara yang ringkas dan mudah digunakan. Pengguna dapat dengan mudah menjelajahi jawaban yang sesuai dengan mengklik pertanyaan.

2. Konten yang Dapat Dilipat

Konten yang dapat dilipat memungkinkan Anda menyembunyikan dan menampilkan bagian konten dengan mengklik. Ini dapat menghemat ruang berharga Anda. Jika Anda ingin meliput konten yang panjang tetapi khawatir akan menimbulkan pengalaman pengguna yang negatif, Anda dapat menampilkannya menggunakan widget.

3. Fitur Produk

Widget akordeon tingkat lanjut adalah alat luar biasa untuk menampilkan fitur produk atau layanan Anda. Anda dapat membuat tata letak bergaya akordeon dengan pertanyaan atau judul yang mewakili setiap fitur. Saat pengguna mengklik pertanyaan atau judul, detail fitur terkait akan muncul.

4. Tutorial atau Panduan Langkah demi Langkah

Anda dapat menyusun panduan tutorial menjadi serangkaian langkah atau tahapan, dengan setiap langkah diwakili oleh akordeon yang dapat dilipat. Pengguna dapat mengikuti panduan sesuai keinginan mereka, memperluas setiap langkah untuk menjelajahi instruksi atau informasi terperinci.

5. Syarat dan Ketentuan

Syarat dan ketentuan seringkali sangat panjang, sehingga dapat membebani pengguna. Jadi, daripada menampilkan semua teks sekaligus, Anda dapat menggunakan widget akordeon tingkat lanjut untuk memecahnya dan menampilkannya dalam bagian yang singkat dan mudah dikelola.

Perbedaan Antara Widget Akordeon Tingkat Lanjut (HappyAddons) dan Akordeon (Elementor).

Saat ini, kami harap Anda memahami bahwa akordeon tingkat lanjut adalah widget dari HappyAddons, dan akordeon adalah widget dari Elementor. Keduanya memiliki beberapa perbedaan yang dapat disebutkan. Perbedaan keduanya akan kami sajikan pada tabel berikut.

Tema Selamat Addons elemen
Ikon Akordeon Ya! Anda dapat menambahkan ikon terpisah untuk setiap bagian akordeon. TIDAK! Anda hanya dapat menambahkan ikon terbuka dan tertutup tetapi tidak dapat menambahkan ikon khusus akordeon.
Skema FAQ TIDAK! HappyAddons tidak memiliki skema FAQ. Ya! Elementor menyediakan skema FAQ untuk widget.
Impor Templat Ya! Ini memungkinkan Anda untuk menambah dan menampilkan template menggunakan widget. TIDAK! Anda hanya dapat menampilkan teks dan gambar. Tidak ada templat yang diperbolehkan.
Premium Ya! Widget ini hanya diperuntukkan bagi pengguna premium. TIDAK! Terbuka untuk semua pengguna.
Coba HappyAddons
Coba HappyAddons Pro

Kesimpulan

Elementor dengan HappyAddons benar-benar telah merevolusi bidang pengembangan web, khususnya untuk pengguna tanpa kode. Seperti banyak kreasi dan penyesuaian desain canggih lainnya, Anda dapat melakukan banyak hal menakjubkan di situs web Anda dengan mereka.

Sepanjang postingan tutorial ini, kami telah menjelajahi berbagai fitur dan fungsi widget Advanced Accordion di HappyAddons. Kita telah mempelajari cara membuat bagian bergaya akordeon, menambahkan konten dalam setiap item akordeon, dan menyesuaikan tampilan serta perilaku akordeon.

Dengan menerapkan tips dan teknik yang dibagikan dalam postingan blog ini, saya harap Anda dapat menggunakan sendiri widget tersebut. Namun jika Anda menghadapi masalah, kami meminta Anda memberi tahu kami masalahnya melalui kotak komentar atau hubungi tim dukungan kami.