Loncat ke Konten Utama

Pembuatan kisi manfaat dinamis untuk produk WooCommerce

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Cara Anda mendesain halaman produk berdampak langsung pada perilaku pengunjung Anda. Desain halaman produk yang dibuat dengan baik dan dipersonalisasi dapat memudahkan pengunjung untuk memutuskan apakah mereka ingin membeli produk Anda. Jika Anda 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 Lanjutan. Kami akan mulai dengan membuat sekelompok bidang untuk keuntungan. Kami kemudian akan mengisi kolom kustom di halaman produk kami dan menyertakan konten dinamis di template halaman produk kami. 

Kemungkinan Hasil

Sebelum kita menyelami tutorialnya, mari kita lihat sekilas hasil pada ukuran layar yang berbeda.

Hasil yang mungkin divi

1. Instal plugin ACF dan plugin Field Field Manfaat Produk

Instal plugin Advanced Customs Fields

Untuk menampilkan berbagai manfaat produk di backend produk kami, kami akan menggunakan plugin Advanced Custom Fields gratis. Akses Anda Backend WordPress> Plugin> Tambah baru> Temukan plugin ACF> Pasang> Aktifkan .

Instal plugin bidang kustom lanjutan

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.

Buat bidang acf

Pengaturan grup bidang

Beri judul pada grup bidang baru Anda dan izinkan untuk muncul hanya di halaman produk.

  • "Jenis pesan" sama dengan "Produk"
Tambahkan aturan

Tambahkan bidang pertama

Lanjutkan dengan menambahkan bidang baru untuk judul manfaat produk pertama Anda.

  • Label Bidang: Judul Manfaat 1
  • Jenis bidang: teks
Tambahkan bidang ac
Kustomisasi bidang Divi

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
Konfigurasikan bidang acf

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.

Kreasi produk Divi

Isi bidang Manfaat Produk

Dan memenuhi manfaat produk.

Isi bidang keuntungan divi

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".

Pembangun tema Divi

Gunakan templat pada semua produk

Kami menggunakan template ini di semua produk, tetapi silakan pilih produk dengan kategori atau label tertentu.

Tambahkan semua produk woocommerce

Masuk ke editor template tubuh model

Lalu masukkan tubuh model dengan mengklik "Tambahkan tubuh kustom" dan pilih "Buat tubuh kustom".

Membangun tubuh divi

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
Konfigurasi latar belakang bagian Divi

jarak

Pindah ke tab desain bagian dan tambahkan beberapa padding kustom atas dan bawah.

  • Lapisan Atas: 10px
  • Bantalan Bawah: 10px
Konfigurasi jarak bagian Divi

Tambahkan baris baru

Struktur kolom

Mari kita lanjutkan dengan menambahkan baris baru ke bagian yang memiliki struktur berikut:

Konfigurasi tata letak modul baris

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%
Pengaturan jarak modul baris

jarak

Hapus semua jarak internal atas dan bawah.

  • Margin Internal Tinggi: 0px
  • Margin Internal Rendah: 0px
Pengaturan jarak modul garis Divi

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.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

  • Produk: Produk Ini
Pengaturan woo cart pemberitahuan modul divi

Latar belakang warna

Kemudian buka pengaturan modul dan gunakan latar belakang transparan.

  • Warna Latar Belakang: rgba (0,0,0,0)
Woo cart module pengaturan divi

Pengaturan teks

Beralih ke tab "Desain" dan ubah font teks.

  • Font Teks: Karla
Pengaturan font modul Divi

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
Pengaturan warna modul pemberitahuan gerobak Woo
  • Fon tombol: Oswald
  • Tombol Font Style: Shift
Penyesuaian desain warna modul pemberitahuan gerobak Woo
  • Margin Internal Tinggi: 20px
  • Margin Internal Rendah: 20px
  • Margin Internal Kiri: 50px
  • Margin Kanan Internal: 50px
Modul desain konfigurasi woo cart pemberitahuan

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%
Penyesuaian belakang modul garis Divi

jarak

Mari pergi ke tab Desain dan tambahkan margin internal yang tinggi.

  • Lapisan Atas: 150px
Konfigurasi jarak modul garis Divi

Tambahkan baris baru

Struktur kolom

Lanjutkan dengan menambahkan baris baru dengan struktur yang sama seperti yang ditunjukkan di bawah ini:

Konfigurasi gaya garis Divi

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
Modul divi konfigurasi talang

Jarak

Kami akan menghapus margin internal atas juga.

  • Lapisan Atas: 0px
Konfigurasi jarak modul Divi

Elemen Utama

Dan untuk memusatkan konten kolom di Desktop, kita akan menggunakan dua baris kode CSS di elemen utama modul baris.

Desktop:

display: flex; menyelaraskan-item: pusat;

Tablet & Telepon:

display: block;
Pengaturan gaya modul garis Divi

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
Pengaturan modul gambar produk Woocommerce

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
Penyesuaian modul gambar Divi

Tambahkan modul judul Woo ke kolom 2

Konten dinamis

Di kolom 2, mod pertama yang kita butuhkan adalah mod judul Woo. Pastikan "Produk ini" dipilih di area konten dinamis.

  • Produk: Produk ini
kotak manfaat produk

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
Penyesuaian desain modul judul Divi

jarak

Lengkapi modul judul Woo dengan menambahkan margin kiri dan kanan.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

  • Margin kiri: 5%
  • Margin kanan: 5%
Pengaturan modul judul Divi

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 modul deskripsi produk

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
Deskripsi modul penyesuaian warna divi

perekat

Kemudian ubah lebar pada ukuran layar yang berbeda.

  • Lebar: 59% (desktop), 82% (tablet dan telepon)
Penyesuaian lebar modul ringkasan Divi

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%
Modul deskripsi produk Divi

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
Pengaturan teks modul ringkasan Divi

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.

Konfigurasi divi ringkasan modul gambar

Pengaturan Gambar / Ikon

Pindah ke tab desain modul dan ubah pengaturan gambar / ikon sebagai berikut:

  • Penempatan Gambar / Ikon: Atas
  • Penjajaran Gambar / Ikon: Kiri
Modul penyesuaian Divi

Pengaturan Teks Judul

Kami mengubah pengaturan teks judul selanjutnya.

  • Font Judul: Oswald
  • Judul Font Style: Huruf Besar
  • Judul Ukuran Teks: 25px
Konfigurasikan font modul ringkasan divi

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
Mengonfigurasi div ringkasan modul teks i

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%
Konfigurasikan ukuran modul ringkasan divi

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)
Konfigurasikan jarak modul ringkasan divi

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;
Tambahkan modul divi kode css

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.

Bagian divi nama produk

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.

Gambar modul ringkasan Divi

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)
Aturan modul ringkasan Divi

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
Modul ringkasan konfigurasi perbatasan bulat

Tambahkan juga batas bawah ke modul Blurb pertama.

  • Lebar batas bawah: 1px
  • Warna batas bawah: # 000000
Konfigurasikan margin bawah divi
Blurb pengaturan modul 2 perbatasan

Kemudian buka modul Blurb kedua dan gunakan batas bawah.

  • Lebar batas bawah: 1px
  • Warna batas bawah: # 000000
Ringkasan modul batas konfigurasi
Blurb pengaturan modul 3 perbatasan

Lengkapi desain kisi dengan menambahkan garis lurus ke modul Blurb ketiga.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

  • Lebar batas kanan: 1px
  • Warna tepi kanan: # ffd623
kotak manfaat produk

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
Tambahkan ke pengaturan modul kartu divi

Pengaturan bidang

Buka tab desain berikutnya dan ubah pengaturan bidang.

  • Warna latar belakang bidang: #ffffff
  • Warna teks bidang: # 000000
Konfigurasi modul warna gaya tambahkan ke keranjang divi
  • Bidang bundar: 0px (semua sudut)
  • Lebar batas bawah bidang: 1px
  • Warna batas bawah bidang: # 000000
Konfigurasi spasi bagian divi

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
Konfigurasi desain tombol divi
  • Fon tombol: Oswald
  • Gaya font tombol: huruf besar
Konfigurasi tombol divi
  • Lapisan atas: 20px
  • Lapisan bawah: 20px
  • Padding kiri: 50px
  • Padding kanan: 50px
Konfigurasikan ukuran modul divi

jarak

Dan lengkapi parameter modul dengan menambahkan nilai margin khusus.

  • Margin atas: 100px
  • Margin kiri: 5%
Konfigurasi jarak divi

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!

Simpan desain divi
Simpan modifikasi divi

penelitian

Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.

Hasil demo

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.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
0 saham
saham
menciak
Register