Cara Anda mendesain halaman produk Anda memiliki dampak langsung pada perilaku Anda pengunjung. Desain halaman produk yang dirancang dengan baik dan dipersonalisasi dapat memungkinkan pengunjung untuk memutuskan dengan lebih mudah jika mereka ingin membeli produk Anda. Jika Anda sedang mencari cara untuk membuat halaman produk Anda lebih menarik, Anda mungkin akan menyukai tutorial ini.
Kami akan menunjukkan cara menyertakan kisi manfaat produk dinamis dalam desain Anda menggunakan Divi dan plugin Bidang Kustom Tingkat Lanjut. Kita akan mulai dengan membuat grup lapangan untuk mendapatkan manfaat. Kami kemudian akan mengisi kolom khusus di halaman produk kami dan menyertakan isi dinamis di templat halaman produk kami.
Kemungkinan Hasil
Sebelum kita menyelami tutorialnya, mari kita lihat sekilas hasil pada ukuran layar yang berbeda.
1. Instal plugin ACF dan plugin Field Field Manfaat Produk
Instal plugin Advanced Customs Fields
Untuk menampilkan manfaat produk yang berbeda di backend produk kami, kami akan menggunakan plugin gratis Bidang Kustom Tingkat Lanjut. Akses Anda Backend WordPress> Plugin> Tambah baru> Temukan plugin ACF> Pasang> Aktifkan .
Buka bidang khusus dan tambahkan grup bidang baru
Setelah Anda menginstal dan mengaktifkan plugin ACF, Anda akan dapat mengakses bidang khusus Anda dan menambahkan kelompok bidang baru.
Pengaturan grup bidang
Beri judul pada grup bidang baru Anda dan izinkan untuk muncul hanya di halaman produk.
- "Jenis pesan" sama dengan "Produk"
Tambahkan bidang pertama
Lanjutkan dengan menambahkan bidang baru untuk judul manfaat produk pertama Anda.
- Label Bidang: Judul Manfaat 1
- Jenis bidang: teks
Ulangi langkah tersebut untuk bidang yang tersisa
Lakukan hal yang sama untuk manfaat lain dari produk dan deskripsinya. Semua bidang ini membutuhkan jenis bidang "Teks" yang ditetapkan padanya.
- Judul layanan 1
- Deskripsi manfaat 1
- Judul layanan 2
- Deskripsi manfaat 2
- Judul layanan 3
- Deskripsi manfaat 3
- Judul layanan 4
- Deskripsi manfaat 4
2. Tambahkan manfaat ke produk
Buka atau tambahkan produk baru
Setelah grup bidang dan bidang Anda dibuat, Anda dapat menambahkan manfaat produk ke produk Anda di tingkat individu. Buka produk pilihan Anda atau buat yang baru.
Isi bidang Manfaat Produk
Dan memenuhi manfaat produk.
3. Buat templat halaman produk di Divi Theme Builder
Pergi ke Pembuat Tema Divi dan tambahkan templat baru
Saatnya memulai dengan Divi! Untuk membuat template baru, buka Divi Theme Builder dan klik "Tambahkan template baru".
Gunakan templat pada semua produk
Kami menggunakan template ini di semua produk, tetapi silakan pilih produk dengan kategori atau label tertentu.
Masuk ke editor template tubuh model
Lalu masukkan tubuh model dengan mengklik "Tambahkan tubuh kustom" dan pilih "Buat tubuh kustom".
Edit bagian # 1
Warna latar belakang
Setelah masuk ke dalam editor template, Anda akan melihat bagian. Buka bagian itu dan ubah warna latar belakang menjadi hitam.
- Warna Latar Belakang: # 000000
jarak
Pindah ke tab desain bagian dan tambahkan beberapa padding kustom atas dan bawah.
- Lapisan Atas: 10px
- Bantalan Bawah: 10px
Tambahkan baris baru
Struktur kolom
Mari kita lanjutkan dengan menambahkan baris baru ke bagian yang memiliki struktur berikut:
jarak
Tanpa menambahkan mod apa pun, mari buka pengaturan baris dan lakukan beberapa penyesuaian jarak.
- Pakai Talang yang Dipersonalisasi: Ya
- Lebar selokan: 1
- Lebar: 90%
- Lebar maksimum: 100%
jarak
Hapus semua jarak internal atas dan bawah.
- Margin Internal Tinggi: 0px
- Margin Internal Rendah: 0px
Tambahkan modul Pemberitahuan Woo Cart ke kolom
Konten Dinamis
Satu-satunya modul yang kita butuhkan pada baris dan bagian ini adalah modul Woo Cart Notice. Pastikan "Produk Ini" dipilih di bagian dinamis.
- Produk: Produk Ini
Latar belakang warna
Kemudian buka pengaturan modul dan gunakan latar belakang transparan.
- Warna Latar Belakang: rgba (0,0,0,0)
Pengaturan teks
Beralih ke tab "Desain" dan ubah font teks.
- Font Teks: Karla
Pengaturan tombol
Selesaikan pengaturan plugin dengan menetapkan pengaturan gaya:
- Gunakan Gaya Kustom Untuk Tombol: Ya
- Tombol Ukuran Teks: 20px
- Warna Teks Tombol: # 000000
- Latar Belakang Tombol: # ffd623
- Lebar batas tombol: 0px
- Tombol pembatas bulat: 0px
- Fon tombol: Oswald
- Tombol Font Style: Shift
- Margin Internal Tinggi: 20px
- Margin Internal Rendah: 20px
- Margin Internal Kiri: 50px
- Margin Kanan Internal: 50px
Tambahkan bagian # 2
Latar belakang gradien
Tambahkan bagian reguler lain di bawah yang sebelumnya. Kemudian buka pengaturan dan gunakan latar belakang gradien sebagai berikut:
- Warna 1: # 000000
- Warna 2: #ffffff
- Posisi awal:
- Desktop: 30%
- Tablet: 57%
- Telepon: 54%
- Posisi Akhir:
- Desktop: 30%
- Tablet: 57%
- Telepon: 54%
jarak
Mari pergi ke tab Desain dan tambahkan margin internal yang tinggi.
- Lapisan Atas: 150px
Tambahkan baris baru
Struktur kolom
Lanjutkan dengan menambahkan baris baru dengan struktur yang sama seperti yang ditunjukkan di bawah ini:
perekat
Tanpa menambahkan mod apa pun, kami akan membuka pengaturan dan mengubah spasi sebagai berikut:
- Gunakan talang khusus: Ya
- Ruang selokan: 1
- Lebar: 95%
- Lebar maksimum: 2560px
- Penyelarasan Baris: Tengah
Jarak
Kami akan menghapus margin internal atas juga.
- Lapisan Atas: 0px
Elemen Utama
Dan untuk memusatkannya isi kolom di DeskTop, kita akan menggunakan dua baris kode CSS di elemen utama baris modul.
Desktop:
display: flex; menyelaraskan-item: pusat;
Tablet & Telepon:
display: block;
Tambahkan modul Woo Image ke kolom 1
Konten Dinamis
Saatnya menambahkan modul, kita akan mulai dengan modul Gambar Woo di kolom 1. Pastikan “Produk ini” dipilih.
- Produk: Produk Ini
Efek animasi scrolling vertikal
Kami menambahkan gerakan halus ke gambar menggunakan efek gulir gerakan horizontal di tab lanjutan.
- Aktifkan gerakan vertikal: Ya
- Mulai offset:
- Kantor: -4
- Tablet dan telepon: 0
- Offset rata-rata: 0
- End offset: 0
- Pemicu Efek Gerak: Bagian Tengah Elemen
Tambahkan modul judul Woo ke kolom 2
Konten dinamis
Pada kolom 2, modul pertama yang kita perlukan adalah modul judul Woo. Pastikan “Produk Ini” dipilih di dalam kotak isi dinamis.
- Produk: Produk ini
Pengaturan teks judul
Lalu buka tab desain dan beri gaya teks judul sebagai berikut:
- Font judul: Oswald
- Gaya font judul: huruf besar
- Warna teks judul: # ffd623
- Ukuran teks judul: 80px
jarak
Lengkapi modul judul Woo dengan menambahkan margin kiri dan kanan.
- Margin kiri: 5%
- Margin kanan: 5%
Tambahkan modul deskripsi Woo ke kolom 2
Konten dinamis
Mari beralih ke modul berikutnya, yaitu modul deskripsi Woo. Kami menggunakan konten dinamis berikut untuk ini:
- Produk: Produk ini
- Jenis keterangan: Deskripsi singkat
Pengaturan teks
Beralih ke tab desain modul dan ubah pengaturan teks yang sesuai:
- Font Teks: Karla
- Warna teks: #dbdbdb
- Ukuran teks: 17 px (desktop dan tablet), 15 px (telepon)
- Tinggi baris teks: 1,9 em
perekat
Kemudian ubah lebar pada ukuran layar yang berbeda.
- Lebar: 59% (desktop), 82% (tablet dan telepon)
jarak
Selesaikan modul deskripsi Woo dengan menambahkan nilai margin kustom di pengaturan jarak.
- Margin atas: 50px
- Margin bawah: 100px
- Margin kiri: 5%
- Margin kanan: 5%
Tambahkan modul Blurb ke kolom 2
Konten dinamis
Untuk menampilkan manfaat produk yang kami tambahkan di bagian pertama tutorial ini, kami akan menggunakan modul Blurb. Tambahkan modul Blurb pertama dan gunakan konten dinamis dari manfaat pertama yang dihasilkan untuk judul dan isi.
- Judul: Judul Manfaat 1
- Badan: Uraian Manfaat 1
Upload Gambar
Unggah gambar atau gunakan ikon pilihan Anda berikutnya. Anda dapat menemukan yang kami gunakan di seluruh tutorial ini di folder unduhan yang dapat Anda unduh di awal tutorial ini.
Pengaturan Gambar / Ikon
Pindah ke tab desain modul dan ubah pengaturan gambar / ikon sebagai berikut:
- Penempatan Gambar / Ikon: Atas
- Penjajaran Gambar / Ikon: Kiri
Pengaturan Teks Judul
Kami mengubah pengaturan teks judul selanjutnya.
- Font Judul: Oswald
- Judul Font Style: Huruf Besar
- Judul Ukuran Teks: 25px
Pengaturan Teks Tubuh
Seiring dengan pengaturan teks tubuh.
- Font Tubuh: Karla
- Ukuran teks: 17 px (desktop dan tablet), 15 px (telepon)
- Tinggi garis tubuh: 1,9 em
perekat
Lalu pergi ke pengaturan ukuran dan ubah lebarnya. Penting untuk menggunakan lebar utama kurang dari 50%, ini akan memungkinkan kita untuk menampilkan dua modul Blurb secara berdampingan di langkah berikutnya.
- Lebar Gambar: 25%
- Lebar: 49%
jarak
Kami juga akan menambahkan spasi di sekitar modul Blurb menggunakan nilai padding khusus pada ukuran layar yang berbeda.
- Lapisan atas: 8%
- Bantalan bawah: 8%
- Padding kiri: 8% (desktop dan tablet), 2% (telepon)
- Lapisan kanan: 8% (desktop dan tablet) 2% (telepon)
Elemen utama
Sekarang kita akan memastikan bahwa modul Ringkasan menampilkan teks di samping satu sama lain, dalam dua langkah. Pertama, kita akan memastikan lebar modul kurang dari 50% (seperti yang kita lakukan di langkah sebelumnya). Selanjutnya, kita akan menggunakan properti di baris tersebut. Kami akan menambahkan properti CSS ini pada elemen utama di bagian lanjutan.
display: inline-block;
Kloning modul ringkasan 3 kali
Setelah Anda menyelesaikan mod Blurb pertama, Anda dapat mengkloningnya tiga kali. Anda secara otomatis akan melihat bahwa modul Blurb muncul dalam sebuah grid.
Edit gambar modul Blurb
Edit gambar di setiap pod Blurb duplikat. Anda dapat menemukannya di folder unduhan yang mungkin telah Anda unduh di awal artikel ini.
Ubah konten dinamis dari modul Blurb
Juga modifikasi konten dinamis dari setiap modul Blurb duplikat.
- Judul: Judul layanan (2,3 atau 4)
- Badan: deskripsi keuntungan (2,3 atau 4)
Tambahkan batas ke modul Blurb satu per satu
Blurb pengaturan modul 1 perbatasan
Sekarang, untuk menyelesaikan mendesain grid kita, kita akan menambahkan batas ke modul Blurb pada tingkat individu. Buka mod Blurb pertama dan gunakan garis tepi lurus.
- Lebar batas kanan: 1px
- Warna tepi kanan: # ffd623
Tambahkan juga batas bawah ke modul Blurb pertama.
- Lebar batas bawah: 1px
- Warna batas bawah: # 000000
Blurb pengaturan modul 2 perbatasan
Kemudian buka modul Blurb kedua dan gunakan batas bawah.
- Lebar batas bawah: 1px
- Warna batas bawah: # 000000
Blurb pengaturan modul 3 perbatasan
Lengkapi desain kisi dengan menambahkan garis lurus ke modul Blurb ketiga.
- Lebar batas kanan: 1px
- Warna tepi kanan: # ffd623
Tambahkan Modul Tambahkan ke keranjang di kolom 2
Konten dinamis
Modul terakhir yang kita butuhkan dalam desain kita adalah modul Woo Add to Cart. Pastikan "Produk ini" dipilih di area konten dinamis.
- Produk: Produk ini
Pengaturan bidang
Buka tab desain berikutnya dan ubah pengaturan bidang.
- Warna latar belakang bidang: #ffffff
- Warna teks bidang: # 000000
- Bidang bundar: 0px (semua sudut)
- Lebar batas bawah bidang: 1px
- Warna batas bawah bidang: # 000000
Pengaturan tombol
Kemudian, gaya tombol sesuai:
- Gunakan gaya khusus untuk tombol: Ya
- Ukuran teks tombol: 20 piksel
- Warna teks tombol: # 000000
- Warna latar tombol: # ffd623
- Lebar batas tombol: 0px
- Jari-jari batas tombol: 0px
- Fon tombol: Oswald
- Gaya font tombol: huruf besar
- Lapisan atas: 20px
- Lapisan bawah: 20px
- Padding kiri: 50px
- Padding kanan: 50px
jarak
Dan lengkapi parameter modul dengan menambahkan nilai margin khusus.
- Margin atas: 100px
- Margin kiri: 5%
3. Simpan modifikasi generator tema dan pratinjau hasilnya
Setelah selesai mendesain templat halaman produk, Anda dapat menyimpan semua perubahan Pembangun Tema dan menampilkan hasilnya pada produk Anda!
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
final pikiran
Pada artikel ini, kami telah menunjukkan kepada Anda cara berkreasi dengan templat halaman produk Divi Anda berikutnya. Secara khusus, kami telah menunjukkan kepada Anda cara menyertakan kisi manfaat produk dinamis untuk menambahkan manfaat tambahan ke halaman produk Anda. Kami membuat tutorial ini menggunakan Divi yang dikombinasikan dengan plugin Advanced Custom Fields. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.
