Cara Membuat Halaman Produk Bersih & Tebal dengan Modul WooCommerce Divi (Unduh Gratis!)

Halaman produk tebal memiliki cara khusus untuk menarik perhatian pengunjung Anda. Dan dengan pembaruan Modul WooCommerce baru Divi, Anda dapat dengan cepat mengubah halaman produk lama Anda menjadi halaman yang bersih dan berani yang akan disukai oleh Anda dan pengunjung Anda. Dalam tutorial hari ini, kami akan membuat ulang halaman produk tebal dari awal dan Anda juga dapat mengunduh file JSON secara gratis! Tutorial ini menunjukkan betapa serbagunanya Modul WooCommerce baru Divi dan bagaimana Anda dapat membuat situs web eCommerce yang sangat profesional dalam waktu singkat.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Unduh Tata Letak Halaman Produk Bersih & Tebal secara GRATIS

Untuk mendapatkan tata letak halaman produk bersih & berani pahlawan gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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

1. Tambahkan/Buka Produk WooCommerce

Rincian Produk

Buka produk yang sudah ada atau buat yang baru. Jika Anda ingin mencapai hasil yang sama persis seperti yang ditunjukkan pada pratinjau posting ini, pastikan Anda menambahkan detail produk berikut:

• Judul
• Deskripsi Singkat
• Deskripsi panjang
• Kategori
• Gambar Unggulan
• Harga

Aktifkan Divi Builder & Ubah Pengaturan Halaman Produk

Setelah Anda menyelesaikan detail produk, aktifkan Divi dan ubah tata letak halaman menjadi 'Lebar Penuh'.

Beralih ke Visual Builder

Lanjutkan dengan beralih ke Visual Builder.

Hapus Bagian Produk Asli di Halaman

Di sana, Anda akan melihat info halaman produk asli disatukan menjadi satu bagian. Kami akan membuat ulang desain kami yang bersih & berani dari awal, jadi silakan hapus bagian ini.

2. Buat Halaman Produk Bersih & Tebal Menggunakan Divi's Visual Builder

Tambahkan Bagian Reguler #1

Jarak

Saatnya mulai membuat halaman produk berani kami! Tambahkan bagian reguler baru dan ubah pengaturan spasi bagian.

• Padding Atas: 200px
• Padding Bawah: 0px

Meluap

Untuk memastikan tidak ada yang melebihi wadah bagian, dan tidak ada pengguliran horizontal yang terjadi pada halaman, sembunyikan kelebihan bagian dalam pengaturan visibilitas.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Menambahkan baris

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah warna latar belakang baris.

• Warna Latar Belakang: #f4f4f4

Perekat

Ubah juga lebar maksimum baris.

• Lebar Maks: 1000px

Jarak

Kemudian, buka pengaturan jarak dan tambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 150px
• Padding Bawah: 150px

Berbatasan

Kami menambahkan radius batas '50px' ke sudut kiri dan kanan atas baris juga.

Meluap

Selesaikan pengaturan baris dengan membuat overflow terlihat.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Tambahkan Modul Woo Breadcrumb ke Kolom

Konten Dinamis

Saatnya mulai menambahkan modul! Modul pertama yang kita butuhkan adalah Modul Woo Breadcrumb.

• Produk: Produk Ini

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Teks Merah
• Berat Font Teks: Tebal
• Gaya Font Teks: Huruf Besar
• Ukuran Teks: 20px
• Spasi Huruf Teks: 4px

Pengaturan Teks Tautan

Membuat beberapa perubahan pada pengaturan teks tautan juga.

• Berat Huruf Tautan: Ringan
• Warna Teks Tautan: #e02b20

Jarak

Kemudian, buka pengaturan spasi dan tambahkan beberapa nilai margin khusus di berbagai ukuran layar.

• Margin Bawah: 80px
• Margin Kiri: 50px (Desktop & Tablet), 20px (Telepon)
• Margin Kanan: 50px (Desktop & Tablet), 20px (Telepon)

Tambahkan Modul Judul Woo ke Kolom

Konten Dinamis

Modul berikutnya dan terakhir yang kita butuhkan di kolom ini adalah Modul Judul Woo.

• Produk: Produk Ini

Pengaturan Teks Judul

Ubah pengaturan teks judul modul sebagai berikut:

• Judul Font: Montserrat
• Judul Font Berat: Berat
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #000000
• Judul Teks Ukuran: 250px (Desktop), 150px (Tablet), 80px (Telepon)
• Tinggi Baris Judul: 0.9em

Jarak

Tingkatkan lebar modul dengan menambahkan beberapa margin kiri dan kanan negatif.

• Margin Kiri: -150px (Desktop), -100px (Tablet), -50px (Telepon)
• Margin Kanan: -150px (Desktop), -100px (Tablet), -50px (Telepon)

Tambahkan Bagian Reguler #2

Jarak

Tambahkan bagian lain tepat di bawah yang sebelumnya. Ubah nilai padding bagian sebagai berikut:

• Padding Atas: 0px
• Padding Bawah: 200px

Menambahkan baris

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah warna latar belakang baris.

• Warna Latar Belakang: #f4f4f4

Perekat

Tingkatkan lebar maksimum baris berikutnya.

• Lebar Maks: 1000px

Jarak

Tambahkan beberapa bantalan bawah kustom juga.

• Padding Bawah: 150px

Berbatasan

Kemudian, masuk ke pengaturan perbatasan dan terapkan radius batas '50px' ke sudut kiri dan kanan bawah.

Meluap

Selesaikan pengaturan baris dengan memastikan luapan terlihat.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Pengaturan Kolom 1

Gambar Latar Belakang Dinamis

Setelah Anda menyelesaikan pengaturan baris umum, buka pengaturan kolom 1 dan tambahkan gambar unggulan produk ke latar belakang menggunakan konten dinamis.

• Gambar Latar Belakang: Gambar Unggulan

Jarak

Tambahkan beberapa padding bawah ke kolom berikutnya. Ini akan memungkinkan gambar latar belakang untuk ditampilkan.

• Padding Bawah: 370px (Desktop), 690px (Tablet), 380px (Ponsel)

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Di kolom 1, satu-satunya modul yang kita butuhkan adalah Modul Teks. Tambahkan beberapa konten pilihan Anda.

Warna latar belakang

Ubah warna latar belakang modul selanjutnya.

• Warna Latar Belakang: #E02B20

Pengaturan Teks

Pindah ke tab desain dan ubah pengaturan teks.

• Font Teks: Montserrat
• Berat Font Teks: Sangat Tebal
• Perataan Teks: Tengah
• Warna Teks: #FFFFFF
• Ukuran Teks: 30px
• Tinggi Baris Teks: 1em

Perekat

Kecilkan ukuran modul di pengaturan ukuran berikutnya.

• Lebar: 280 piksel

Jarak

Dan ubah modul menjadi persegi dengan menambahkan beberapa nilai padding khusus. Kami juga membuat tumpang tindih atas dan kiri menggunakan margin negatif.

• Margin Atas: -120px
• Margin Kiri: -120px
• Padding Atas: 110px
• Padding Bawah: 110px
• Padding Kiri: 50px
• Padding Kanan: 50px

Berbatasan

Untuk mengubah persegi menjadi lingkaran, kita akan menambahkan radius batas '500px' ke setiap sudut modul.

Ubah Putar

Kami akan memutar modul juga.

• Kiri: 330 derajat

Tambahkan Modul Teks ke Kolom 2

Tambahkan Konten H2

Ke kolom kedua! Di sana, modul pertama yang kita butuhkan adalah Modul Teks biasa. Masukkan beberapa konten H2 pilihan Anda.

Pengaturan Teks H2

Pindah ke tab desain dan ubah pengaturan teks H2 sebagai berikut:

• Judul 2 Font: Montserrat
• Judul 2 Ukuran Teks: 35px

Jarak

Tambahkan beberapa nilai margin kustom berikutnya.

• Margin Atas: -70px (Desktop), 100px (Tablet & Ponsel)
• Margin Kiri: 100px (Desktop), 20px (Tablet & Ponsel)
• Margin Kanan: 20px (Tablet & Ponsel)

Tambahkan Modul Deskripsi Woo ke Kolom 2

Konten Dinamis

Modul kedua yang kita butuhkan di kolom 2 adalah Modul Deskripsi Woo.

• Produk: Produk Ini
• Jenis Deskripsi: Deskripsi singkat

Pengaturan Teks

Ubah pengaturan teks modul yang sesuai:

• Font Teks: Teks Merah
• Ukuran Teks: 19px
• Tinggi Baris Teks: 1.8em
• Perataan Teks: Justify

Jarak

Ubah nilai spasi modul berikutnya.

• Margin Bawah: 50px
• Margin Kiri: 100px (Desktop), 20px (Tablet & Ponsel)
• Margin Kanan: -100px (Desktop), 20px (Tablet & Ponsel)

Tambahkan Modul Harga Woo ke Kolom 2

Konten Dinamis

Ke modul berikutnya, yaitu Modul Harga Woo.

• Produk: Produk Ini

Pengaturan Teks Harga

Ubah pengaturan teks harga sebagai berikut:

• Font Harga: Montserrat
• Harga Font Berat: Berat
• Warna Teks Harga: #000000
• Ukuran Teks Harga: 50px

Jarak

Ubah pengaturan spasi berikutnya.

• Margin Bawah: 50px
• Margin Kiri: 100px (Desktop), 20px (Tablet & Ponsel)
• Margin Kanan: 20px (Tablet & Ponsel)

Tambahkan Woo Tambahkan ke Keranjang Modul ke Kolom 2

Konten Dinamis

Modul berikutnya dan terakhir yang kita butuhkan untuk menyelesaikan desain ini adalah Modul Woo Add To Cart.

• Produk: Produk Ini

Pengaturan Teks

Ubah font teks dalam pengaturan teks.

• Font Teks: Montserrat

Pengaturan Bidang

Ubah pengaturan bidang berikutnya.

• Warna Latar Belakang Bidang: #ffffff
• Warna Teks Bidang: #000000
• Padding Atas: 66px
• Padding Bawah: 66px
• Font Bidang: Montserrat
• Berat Font Bidang: Berat

• Semua Sudut: 5px
• Lebar Batas Bidang Bawah: 3px
• Warna Batas Bidang: #e02b20

Pengaturan Tombol

Lanjutkan dengan menata tombol.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #E02B20
• Lebar Batas Tombol: 0px

• Radius Perbatasan Tombol: 5px
• Font Tombol: Montserrat
• Berat Huruf Tombol: Sangat Tebal
• Gaya Font Tombol: Huruf Besar

• Padding Atas: 50px
• Padding Bawah: 50px
• Padding Kiri: 100px (Desktop), 50px (Tablet), 20px (Ponsel)
• Padding Kanan: 100px (Desktop), 50px (Tablet), 20px (Ponsel)
• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba(0,0,0,0.3)

Jarak

Selesaikan desain modul dengan menambahkan beberapa nilai margin kiri dan kanan pada ukuran layar yang lebih kecil dan selesai!

• Margin Kiri: 20px (Tablet & Ponsel)
• Margin Kanan: 20px (Tablet & Ponsel)

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat halaman produk berani yang menakjubkan dengan tampilan dan nuansa yang bersih menggunakan Modul WooCommerce baru Divi. Halaman produk tebal memiliki cara unik untuk menonjolkan produk Anda. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.