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.
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.
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".
7. Kemudian di tab Variations di bawah toggle of données produk, gunakan entri drop-down untuk membuat variasi dari semua atribut.
8. Pilih "Tetapkan Harga Reguler" dari menu drop-down untuk menetapkan harga reguler untuk ketiga variabel.
9. Di kotak dialog, masukkan nilai "50" dan pilih OK.
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.
Kemudian tambahkan modul Accordion baru untuk mengganti tab.
Di jendela pop-up Pengaturan Akordeon, klik ikon roda gigi pada akordeon pertama untuk membuka pengaturan akordeon individu.
Masukkan judul "Tentang produk".
Kemudian arahkan kursor ke kotak entri konten tubuh dan klik ikon konten dinamis.
Pilih "Deskripsi Produk" dari daftar konten dinamis.
Ini akan menampilkan deskripsi panjang produk yang telah kami tetapkan untuk produk di backend.
Setelah konten akordeon pertama tersedia, buka pengaturan akordeon kedua dan perbarui yang berikut:
- Judul: Spesifikasi
Kemudian tambahkan konten dinamis "Informasi Produk Tambahan" ke tubuh.
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
- 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
- Font Tubuh: Lato
- Ukuran teks isi: 16px
- Tinggi badan: 1.8em
- Tautan warna teks: #ff9375
Ini akan menargetkan semua tautan yang Anda miliki di konten dinamis untuk setiap akordeon, seperti peringkat bintang.
- 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
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.
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.
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.