Saat membuat halaman produk di Divi, kita dapat menggunakan modul akordeon untuk menampilkan informasi produk menggunakan konten dinamis. Ini akan memberi Anda desain unik untuk halaman produk, sekaligus menjaga ruang berharga di halaman.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara menggunakan fitur konten dinamis Divi untuk membuat akordeon informasi produk, serta cara mendesain akordeon (dan kontennya) menggunakan Divi Visual Builder.

Mari kita mulai.

penelitian

Berikut adalah pratinjau desain yang akan kami buat dalam tutorial ini.

Desain akordeon Divi

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

Commencer

Untuk memulai, Anda perlu melakukan hal berikut:

  • Jika Anda belum melakukannya, instal dan aktifkan Tema Divi diinstal (atau plugin Divi Builder jika Anda tidak menggunakan Tema Divi).
  • Instal dan aktifkan plugin WooCommerce. Jika Anda mengonfigurasi WooCommerce untuk pertama kalinya, Anda perlu menjalankan wizard pengaturan dasar untuk menyiapkan toko Anda. Setelah selesai, Anda siap untuk menambahkan produk baru Anda.
  • Buat produk baru seperti yang ditunjukkan di bawah ini.

Menyiapkan produk sampel

Untuk mengkonfigurasi produk sampel untuk tutorial ini, buka Products> Add New. Beri produk judul "Pijat (sesi tunggal)" dan klik untuk menggunakan Divi Builder.

Buat produk woocommerce divi 1

Kemudian perbarui pengaturan halaman produk berikut dan informasi produk:

1. Di bawah Pengaturan Halaman Divi, pilih tata letak No Sidebar.

2. Tambah / pilih kategori produk

3. Tambahkan gambar produk

4. Tambahkan konten deskripsi.

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

6. Tambahkan atribut bernama "Type" dengan nilai berikut: Swedish | Batu panas | Aromaterapi | Jaringan dalam. Pastikan untuk memilih "Digunakan untuk variasi".

Model divi lebar penuh

7. Kemudian di tab Variations di bawah toggle of données produk, gunakan entri drop-down untuk membuat variasi dari semua atribut.

Buat variasi woocommerce
Variasi produk Woocommerce

8. Pilih "Tetapkan Harga Reguler" dari menu drop-down untuk menetapkan harga reguler untuk ketiga variabel.

Tentukan variasi harga reguler woocommerce

9. Di kotak dialog, masukkan nilai "50" dan pilih OK.

Tetapkan nilai harga woocommerce

10. sebuah Setelah selesai, simpan atau terbitkan produk.

Anda sekarang siap untuk mulai merancang tata letak Anda dengan Akordeon Produk khusus.

Pembuatan akordeon Info Produk dengan konten dinamis di Divi

Tata letak produk default menampilkan informasi produk menggunakan berbagai modul Woo. Untuk contoh ini, kami ingin menggunakan akordeon untuk menampilkan tiga informasi utama tentang produk: deskripsi produk, informasi produk tambahan, dan ulasan produk. Ketiga konten ini saat ini ditampilkan di modul tab woo. Yang harus kita lakukan adalah menghapus modul tab woo dan menggantinya dengan modul akordeon dengan informasi yang sama yang diperkenalkan melalui konten dinamis.

Inilah cara melakukannya.

Pertama, klik untuk menggunakan Divi pada sistem front-end untuk menggunakan generator visual. Kemudian hapus modul Woo Tabs.

Hapus modul woocommerce

Kemudian tambahkan modul Accordion baru untuk mengganti tab.

Woocommerce akordeon

Di jendela pop-up Pengaturan Akordeon, klik ikon roda gigi pada akordeon pertama untuk membuka pengaturan akordeon individu.

Parameter accordeon dan divi

Masukkan judul "Tentang produk".

Kemudian arahkan kursor ke kotak entri konten tubuh dan klik ikon konten dinamis.

Gunakan konten woocommerce wordpress dinamis

Pilih "Deskripsi Produk" dari daftar konten dinamis.

Deskripsi Produk woocommerce

Ini akan menampilkan deskripsi panjang produk yang telah kami tetapkan untuk produk di backend.

Deskripsi produk woocommerce

Setelah konten akordeon pertama tersedia, buka pengaturan akordeon kedua dan perbarui yang berikut:

  • Judul: Spesifikasi

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

Bagian tambahan

Setelah konten akordeon kedua siap, tambahkan elemen akordeon baru dan perbarui pengaturan akordeon sebagai berikut:

  • Judul: Informasi Tambahan

Kemudian tambahkan konten dinamis "Review Produk" ke body untuk menyematkan item / konten review produk.

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

Desain produk dan perjanjian konten dengan Divi

Sekarang akordeon informasi produk kami memiliki konten dinamis untuk menampilkan informasi produk, kami siap untuk menyesuaikannya menggunakan pengaturan modul akordeon bawaan.

Buka pengaturan modul Accordion dan perbarui yang berikut:

  • Warna Ikon: # ff9375
  • Gunakan ukuran font ikon: YA
  • Ikon Ukuran Huruf: 26px
Konfigurasi ikon font akordeon
  • Alihkan warna latar belakang: #ffffff
  • Buka judul teks Warna: #ff9375
  • Judul Teks: #222222
  • Font Judul: Lato
  • Font Judul: Tebal
  • Judul Font Style: TT
  • Ukuran Judul Teks: 20px
  • Spasi huruf judul: 0.2em
  • Tinggi baris judul: 2em
Konfigurasi panel Woocommerce
  • Font Tubuh: Lato
  • Ukuran teks isi: 16px
  • Tinggi badan: 1.8em
Konfigurasi font tubuh akordeon Woocommerce
  • Tautan warna teks: #ff9375

Ini akan menargetkan semua tautan yang Anda miliki di konten dinamis untuk setiap akordeon, seperti peringkat bintang.

Konfigurasi warna tautan Woocommerce
  • Warna teks dari daftar tidak berurutan: # ff9375
  • Jenis gaya daftar tidak berurutan: Lingkaran
  • Indentasi item daftar tidak berurutan: 5%
  • Lebar perbatasan: 0px
  • Lebar batas atas: 1px
  • Warna batas atas: #222222
Konfigurasi perbatasan akordeon divi woocommerce

Dan untuk langkah terakhir, mari kita tambahkan ekstrak css kecil untuk mengekstrak margin default antara skala akordeon.

Pada tab Advanced, tambahkan CSS berikut ke elemen Toggle:

margin-bottom: 0px;

Sekarang mari kita lihat desain akhir akordeon info produk.

Informasi produk divi akordeon

Penyesuaian akhir untuk tata letak

Beberapa penyesuaian dapat dilakukan pada tata letak agar sesuai dengan desain akordeon. Misalnya, kita dapat menyesuaikan font dari masing-masing modul ke Lato, menambahkan batas khusus dan radius batas di sekitar daftar drop-down variabel, dan memperbarui tombol Tambahkan ke Keranjang dengan warna latar belakang solid yang cocok untuknya.

Setelah selesai, inilah hasil akhirnya.

Informasi produk divi akordeon

Saya telah menyertakan desain ini sebagai unduhan gratis di atas. Silakan memeriksanya sendiri. Perhatikan bahwa Anda harus memiliki konfigurasi produk yang dijelaskan dalam tutorial ini untuk mendapatkan hasil yang sama.

CATATAN: Warna default untuk sebagian besar item WooCommerce produk di Divi diwarisi dari nilai warna sekunder dari pengaturan penyesuaian tema. Mungkin lebih mudah untuk memperbarui warna sekunder ini setelah modul warna oleh woo.

final pikiran

Seperti yang telah kita pelajari, Woo Mod bukanlah satu-satunya hal yang dapat digunakan untuk mengekstrak informasi produk dinamis. Akordeon Informasi Produk adalah contoh yang bagus tentang bagaimana Anda dapat menggunakan modul Divi apa pun untuk menampilkan informasi 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 rocker alih-alih akordeon untuk mendapatkan hasil yang serupa.