Cara Menggunakan Konten Dinamis untuk Membuat Akordeon Info Produk WooCommerce di Divi

Saat membuat halaman produk di Divi, kita dapat memanfaatkan modul akordeon untuk menampilkan info produk menggunakan konten dinamis. Ini akan memberi Anda halaman produk desain yang unik serta menjaga ruang berharga di halaman tersebut.

Dalam tutorial ini, kami akan menunjukkan cara menggunakan fungsionalitas konten dinamis Divi untuk membuat info produk akordeon dan juga cara mendesain akordeon (dan kontennya) menggunakan Divi Visual Builder.

Mari kita mulai.

Sneak Peek

Berikut adalah sekilas desain yang akan kita buat dalam tutorial ini.

Unduh Info Produk Tata Letak Akordeon GRATIS

Untuk mendapatkan desain tata letak dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Berlangganan Saluran Youtube Kami

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Ingatlah bahwa Anda harus memiliki pengaturan produk seperti yang dijelaskan dalam tutorial ini untuk melihat hasil yang sama.

Langsung saja ke tutorialnya ya?

Mulai

Untuk memulai, Anda perlu melakukan hal berikut:

Menyiapkan Produk Contoh

Untuk menyiapkan produk contoh untuk tutorial ini, navigasikan ke Produk > Tambah Baru. Beri produk judul, "Pijat (sesi tunggal)", dan klik untuk menggunakan Divi Builder.

Selanjutnya, perbarui pengaturan halaman Produk dan informasi produk berikut:

1. Di bawah Pengaturan Halaman Divi, pilih tata letak Halaman Tanpa Bilah Sisi.

2. Tambahkan/pilih Kategori Produk

3. Tambahkan Gambar Produk

4. Tambahkan konten deskripsi panjang produk berikut:

<h3>Quality Massage</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

<ul>
 	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
 	<li>Vestibulum sagittis orci ac odio dictum tincidunt.</li>
 	<li>Donec ut metus leo.</li>
</ul>

<h3>Our Gaurantee</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis orci ac odio dictum tincidunt. Donec ut metus leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

5. Di bawah Data Produk, ubah jenis produk menjadi Produk Variabel.

6. Tambahkan Atribut bernama "Jenis" dengan Nilai berikut: Swedia | Batu panas | Aromaterapi | Jaringan dalam. Pastikan untuk memilih "Digunakan untuk variasi".

7. Kemudian pada tab variasi di bawah toggle data produk, gunakan input dropdown untuk membuat variasi dari semua atribut.

8. Pilih “Tetapkan harga reguler” dari dropdown untuk menetapkan harga reguler untuk ketiga variabel.

9. Pada kotak popup, masukkan nilai “50” dan pilih OK.

10. Setelah selesai, simpan atau publish produk.

Sekarang Anda siap untuk mulai mendesain tata letak Anda dengan Accordion info produk khusus.

Membuat Akordeon Info Produk dengan Konten Dinamis di Divi

Tata letak produk default menampilkan info produk menggunakan berbagai Modul Woo di seluruh. Untuk contoh ini, kami ingin menggunakan akordeon untuk menampilkan tiga bagian utama dari info produk: deskripsi produk, informasi tambahan produk, dan ulasan produk. Ketiga bagian konten ini saat ini sedang ditampilkan di dalam modul tab woo. Yang perlu kita lakukan adalah menghapus modul tab woo dan menggantinya dengan modul akordeon dengan info yang sama yang ditarik melalui konten dinamis.

Berikut cara melakukannya.

Pertama, klik untuk menggunakan Divi di ujung depan untuk menerapkan pembuat visual. Kemudian hapus Modul Tab Woo.

Kemudian tambahkan Modul Accordion baru untuk menggantikan tab.

Di sembulan Pengaturan Akordeon, klik ikon roda gigi pada akordeon pertama, buka pengaturan akordeon individual.

Masukkan judul, “Tentang Produk”.

Kemudian arahkan kursor ke kotak input konten isi dan klik ikon konten dinamis.

Pilih "Deskripsi Produk" dari daftar konten dinamis.

Ini akan menarik deskripsi panjang produk yang telah kami tetapkan untuk produk di bagian belakang.

Setelah Anda memiliki konten akordeon pertama, buka pengaturan untuk akordeon kedua dan perbarui yang berikut:

• Judul: Spesifikasi

Kemudian tambahkan konten dinamis "Informasi Tambahan Produk" ke badan.

Setelah konten akordeon kedua siap, tambahkan item akordeon baru dan perbarui pengaturan untuk akordeon itu sebagai berikut:

• Judul: Ulasan

Kemudian tambahkan konten dinamis “Ulasan Produk” ke badan untuk menarik elemen/konten ulasan produk.

CATATAN: Pastikan Anda telah menambahkan setidaknya satu ulasan ke produk untuk melihat konten di halaman langsung.

Mendesain Akordeon dan Konten Info Produk dengan Divi

Sekarang info produk kami akordeon memiliki konten dinamis yang diperlukan untuk menampilkan informasi produk, kami siap untuk menata akordeon menggunakan pengaturan modul akordeon bawaan.

Buka pengaturan Modul Akordeon, dan perbarui yang berikut ini:

• Warna Ikon: #ff9375
• Gunakan Ukuran Font Ikon: YA
• Ukuran Font Ikon: 26px

• Warna Latar Toggle Tertutup: #ffffff
• Buka Warna Teks Judul: #ff9375
• Warna Teks Judul: #222222
• Judul Font: Lato
• Judul Font Berat: Tebal
• Judul Font Gaya: TT
• Ukuran Teks Judul: 20px
• Spasi Surat Judul: 0.2em
• Tinggi Baris Judul: 2em

• Font Tubuh: Lato
• Ukuran Teks Tubuh: 16px
• Tinggi Garis Tubuh: 1.8em

• Warna Teks Tautan: #ff9375

Ini akan menargetkan tautan apa pun yang Anda miliki di dalam konten dinamis untuk setiap akordeon termasuk hal-hal seperti peringkat bintang ulasan.

• Warna teks daftar tidak berurutan: #ff9375
• Tipe Gaya Daftar Tidak Terurut: Lingkaran
• Indentasi Item Daftar Tidak Terurut: 5%

• Lebar Perbatasan: 0px
• Lebar Batas Atas: 1px
• Warna Batas Atas: #222222

Dan untuk satu langkah terakhir, mari tambahkan potongan kecil css untuk menghilangkan margin default antara sakelar akordeon.

Di bawah tab lanjutan, tambahkan CSS berikut ke elemen Toggle:

margin-bottom: 0px;

Sekarang mari kita lihat desain akhir dari info produk akordeon.

Penyesuaian Akhir pada Tata Letak

Ada beberapa penyesuaian yang bisa kita lakukan pada tata letak agar sesuai dengan desain akordeon. Misalnya, kita dapat menyesuaikan font untuk setiap modul ke Lato, menambahkan batas kustom dan radius batas di sekitar dropdown variabel, dan memperbarui tombol tambahkan ke troli dengan warna latar belakang yang solid agar sesuai.

Setelah selesai, inilah hasil akhirnya.

Saya telah menyertakan desain tata letak ini sebagai unduhan gratis di atas. Jangan ragu untuk memeriksanya sendiri. Ingatlah bahwa Anda harus memiliki pengaturan produk seperti yang dijelaskan dalam tutorial ini untuk melihat hasil yang sama.

CATATAN: Warna default untuk banyak elemen WooCommerce untuk produk di Divi diwarisi dari nilai warna sekunder dari Pengaturan Penyesuai Tema. Mungkin lebih mudah untuk memperbarui warna sekunder ini sekali daripada memperbarui warna per modul woo.

Pikiran Akhir

Seperti yang telah kita pelajari, Modul Woo bukan satu-satunya elemen yang dapat digunakan untuk menarik info produk dinamis. Akordeon info produk adalah contoh yang bagus tentang bagaimana Anda dapat menggunakan modul Divi apa pun untuk menampilkan info produk dengan cara yang unik dan ringkas. Jangan ragu untuk menjelajahi desain akordeon baru dan menarik untuk halaman produk Anda. Dan, tentu saja, Anda dapat menggunakan beberapa modul sakelar alih-alih akordeon untuk mencapai hasil yang serupa.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!