Cara Membuat Template Halaman Produk Terinspirasi Estetika Jepang dengan Divi

Diterbitkan: 2019-11-21

Apakah Anda mencari desain halaman produk yang bersih dan minimal untuk toko online Anda? Hari ini kami memiliki desain yang terinspirasi oleh estetika Jepang. Ini adalah gaya umum untuk majalah dan situs web Jepang minimal. Itu membuatnya mudah untuk membaca teks, melihat produk dan tidak terganggu. Ikuti tutorial di bawah ini untuk membuat ulang template ini untuk produk Anda sendiri. Anda juga dapat mengunduh file template JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita mulai, mari kita lihat bagaimana desain terlihat di berbagai perangkat.

Desktop

Seluler

Unduh Template Halaman Produk GRATIS

Untuk mendapatkan template halaman produk gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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.

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Tambahkan/Buka Produk Woocommerce

Data produk

Buka atau buat Produk WooCommerce baru. Untuk membuat ulang desain produk yang terinspirasi estetika Jepang ini, Anda harus mengisi detail berikut:

Judul: Set Kaligrafi
Deskripsi: Kaligrafi Jepang dengan semua alat yang Anda butuhkan untuk membuat seni huruf yang indah. Tinta India hitam, sikat bulu kuda, pemberat batu, mangkuk pencampur, gunting Jepang, dan kertas non-bleed.
Harga: 31
Kategori: Perlengkapan Seni
Gambar Unggulan: Gambar lanskap produk.
Galeri: 4 gambar lanskap dalam dimensi yang sama
Atribut: Lihat di bawah

Tab atribut menyimpan informasi untuk modul informasi tambahan woo. Untuk menambahkan informasi ini, pilih tab atribut dan buat satu atribut khusus sebagai berikut:

Apa yang Termasuk:
- 1 Kuas
- 1 mangkuk
- 1 Botol Tinta
- 1 pasang gunting
- 1 Batu Sungai
- 1 Rim Kertas

Aktifkan Divi Builder & Ubah Pengaturan Halaman

Ketika semua data produk sudah siap, aktifkan Divi Builder dan ubah tata letak halaman menjadi 'lebar penuh'.

Beralih ke Pembuat Visual

Sekarang, beralihlah ke pembuat visual. Klik tombol yang bertuliskan 'build on the front end'.

Hapus Bagian Produk Default

Karena kami ingin mendesain halaman produk ini dari awal, hapus seluruh bagian default. Ini akan memberi Anda kanvas kosong untuk dikerjakan.

2. Buat Ulang Desain Gaya Jepang

Tambahkan Bagian Baru

Mari mulai membuat ulang halaman produk estetika Jepang! Tambahkan bagian reguler baru.

Latar belakang

Buka pengaturan bagian dan ubah warna latar belakang.

Warna Latar Belakang: Abu-abu Sangat Terang #f2f2f2

Perekat

Selanjutnya, sesuaikan ukurannya.

Lebar: 100%
Lebar Maks: 100%

Jarak

Kemudian, nilai spasi sebagai berikut:

Bantalan Atas:
- Desktop: 0vw
- Tablet + Telepon: 2vw
Bantalan Bawah:
- Desktop + Tablet: 2vw

Tambahkan Baris Pertama

Struktur Kolom

Tambahkan baris baru dan pilih struktur kolom berikut:

Perekat

Sebelum menambahkan modul apa pun, sesuaikan pengaturan ukuran baris sebagai berikut:

Lebar:
- Desktop: 80%
- Tablet + Telepon: 63%

Jarak

Juga, sesuaikan nilai spasi.

Margin Atas + Bawah: 0vw
Padding Atas + Bawah: 0vw

Tambahkan Modul Breadcrumb Woo

Isi

Sekarang, tambahkan modul pertama; remah roti woo.

Produk: Produk Ini

Teks

Di tab desain, gaya teks sebagai berikut:

Font: Duru Sans
Gaya Huruf: TT
Warna: Hitam #000000
Ukuran:
- Desktop: 0.7vw
- Tablet: 1.5vw
- Telepon: 1.7vw
Spasi Huruf: 2px

Perekat

Kemudian, sesuaikan ukurannya.

Lebar: 100%

Jarak

Terakhir, sesuaikan jarak.

Batas atas:
- Desktop: 3em
- Tablet + Telepon: 0em
Margin Bawah:
- Desktop + Tablet: 1em
- Telepon: 0em
Padding Atas + Bawah: 1em
Padding Kiri: 2em

Tambahkan Baris ke-2

Struktur Kolom

Tambahkan baris kedua menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris dan ubah lebar di berbagai ukuran layar.

Lebar:
- Desktop: 80%
- Tablet + Telepon: 65%

Jarak

Sesuaikan juga jaraknya.

Padding Atas: 0vw

Kolom 1 + 2 Pengaturan

Latar belakang

Lanjutkan dengan pengaturan kolom. Kedua kolom 1 dan 2 memiliki gaya yang sama. Mulailah dengan latar belakang.

Warna: Putih #ffffff

Berbatasan

Dan tambahkan gaya batas ke kedua kolom juga.

Gaya Perbatasan: Keempat sisi
Lebar Perbatasan: 4px
Warna: #333333

Tambahkan Modul Gambar Woo ke Kolom 1

Isi

Saatnya mulai menambahkan modul! Kita membutuhkan modul gambar woo di kolom 1.

Produk: Produk Ini

Elemen

Sesuaikan sakelar di tab elemen sebagai berikut:

Gambar Unggulan: Aktif
Tampilkan Gambar Galeri: OFF
Tampilkan Lencana Penjualan: MATI

Tambahkan Modul Judul Woo ke Kolom 1

Isi

Di bawah gambar, tambahkan modul judul woo. Pilih konten.

Produk: Produk Ini

Teks Judul

Di tab desain, beri gaya teks.

Judul Judul Level: H1
Font H1: Droid Sans
Gaya Huruf H1: TT
H1 Warna: Abu-abu Sangat Gelap #333333
Spasi Huruf: 5px
Tinggi Garis: 1em

Jarak

Kemudian, sesuaikan nilai spasi.

Batas atas:
- Tablet + Telepon: 0vw
Padding Atas: 0vw
Bantalan Bawah:
- Desktop: 1.5vw
- Tablet: 3.5vw
- Telepon: 6vw
Bantalan Kiri:
- Desktop: 2vw
- Tablet + Telepon: 5vw
Bantalan Kanan:
- Desktop + Tablet: 0vw

Berbatasan

Selesaikan pengaturan modul dengan menambahkan batas.

Gaya Perbatasan: Batas Bawah
Lebar: 4px
Warna: Abu-abu Sangat Gelap #333333

Tambahkan Modul Deskripsi Woo ke Kolom 1

Isi

Selanjutnya, tambahkan modul deskripsi woo. Pilih konten dan jenis deskripsi.

Produk: Produk Ini
Tipe Deskripsi: Deskripsi

Teks

Kemudian, gaya teks sebagai berikut:

Font: Duru Sans
Gaya Huruf: TT
Warna: Abu-abu Sangat Gelap #333333
Ukuran:
- Desktop: 0.8vw
- Tablet: 1.4vw
- Telepon: 1.8vw
Spasi Huruf: 3px
Tinggi Garis: 2em

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa bantalan khusus di berbagai ukuran layar.

Padding Atas + Bawah: 0vw
Bantalan Kiri + Kanan:
- Desktop: 2vw
- Tablet + Telepon: 5vw

Tambahkan Modul Harga Woo ke Kolom 1

Isi

Selanjutnya, tambahkan modul harga woo ke kolom dan pilih produk.

Produk: Produk Ini

Teks Harga

Gaya teks harga sebagai berikut:

Font: Duru Sans
Warna: Abu-abu Sangat Gelap #333333
Ukuran:
- Desktop: 1.5vw
- Tablet: 3.2vw
- Telepon: 4vw
Spasi Huruf: 3px
Tinggi Garis: 1em

Jarak

Sesuaikan pengaturan spasi juga.

Margin Bawah:
- Desktop: 1vw
- Tablet: 3vw
- Telepon: 4vw
Bantalan Atas:
- Desktop: 1vw
- Tablet: 3.3vw
- Telepon: 5vw
Padding Bawah: 0vw
Bantalan Kiri:
- Tablet + Telepon: 5vw
Bantalan Kanan:
- Desktop: 2vw
- Tablet + Telepon: 3vw

Berbatasan

Terakhir, tambahkan perbatasan.

Gaya Perbatasan: Batas Atas
Lebar Perbatasan: 4px
Warna: Abu-abu Sangat Gelap #333333

Tambahkan Woo Tambahkan ke Keranjang Modul ke Kolom 1

Isi

Di bawah harga, tambahkan modul add to cart dan pilih produk.

Produk: Produk Ini

Elemen

Alihkan elemen sebagai berikut:

Tampilkan Bidang Kuantitas: OFF
Tampilkan Stok: ON

Latar belakang

Tambahkan juga warna latar belakang.

Warna Latar Belakang: Abu-abu Sangat Gelap #333333

Tombol

Di tab desain, gaya tombol sebagai berikut:

Ukuran teks:
- Desktop: 1vw
- Tablet: 2.6vw
- Telepon: 3.1vw
Warna: Putih #ffffff
Lebar Perbatasan: 0px
Spasi Huruf: 3px
Font: Duru Sans
Font: TT

Jarak

Selanjutnya, sesuaikan jarak.

Padding Atas + Bawah: 0.5vw
Padding Kiri: 1vw

Berbatasan

Terakhir, tambahkan perbatasan.

Gaya Perbatasan: Batas Atas
Lebar: 4px
Warna: Abu-abu Sangat Gelap #333333

Tambahkan Modul Info Tambahan Woo ke Kolom 2

Isi

Pindah ke kolom kedua dan tambahkan modul info tambahan woo. Pilih produk.

Produk: Produk Ini

Elemen

Alihkan pengaturan elemen sebagai berikut:

Judul Acara: ON

Teks

Di tab desain, beri gaya teks.

Font: Duru Sans
Gaya Font: I + TT
Warna: Abu-abu Sangat Gelap #333333
Ukuran:
- Desktop: 0.7vw
- Tablet: 1.5vw
- Telepon: 2.4vw
Spasi Huruf: 2px
Tinggi Garis: 1.5em

Teks Judul

Gaya teks judul berikutnya.

Font: Duru Sans
Gaya Huruf: TT
Warna: Abu-abu Sangat Gelap #333333
Ukuran:
- Desktop: 1vw
- Tablet: 2vw
- Telepon: 2.2vw
Spasi Huruf: 3px
Tinggi Garis: 1.5em

Teks Atribut

Jangan lupa untuk memberi style pada teks atribut juga.

Font: Duru Sans
Gaya Huruf: TT
Warna: Abu-abu Sangat Gelap #333333
Ukuran:
- Desktop: 0.7vw
- Tablet: 2vw
- Telepon: 2.4vw
Spasi Huruf: 2px

Jarak

Kemudian, sesuaikan jaraknya.

Bantalan Atas:
- Desktop: 1vw
- Tablet + Telepon: 3vw
Bantalan Bawah:
- Desktop + Tablet: 1vw
Bantalan Kiri:
- Desktop: 2vw
- Tablet + Telepon: 5vw
Bantalan Kanan:
- Telepon: 3vw

Tambahkan Modul Galeri Woo ke Kolom 2

Isi

Modul terakhir yang kita butuhkan untuk menyelesaikan desain adalah modul galeri woo. Pilih produk.

Produk: Produk Ini

Tata Letak

Pindah ke tab desain dan ubah tata letak.

Tata Letak: Penggeser

Jarak

Kemudian, sesuaikan pengaturan spasi sebagai berikut:

Batas atas:
- Desktop: -2vw
- Tablet: -4vw
- Telepon: -6vw
Padding Atas: 0vw

Berbatasan

Terakhir, tambahkan perbatasan.

Gaya Perbatasan: Batas Atas
Lebar: 4px
Warna: Abu-abu Sangat Gelap #333333

3. Konversi ke Template untuk Divi Theme Builder

Simpan ke Perpustakaan Divi

Sekarang setelah kami menyelesaikan desain, saatnya untuk menyimpan tata letak halaman produk kami ke Perpustakaan Divi. Jika Anda tidak memiliki kategori untuk tata letak produk Anda, buatlah satu.

Simpan Sebagai: Tata Letak
Nama: Master Produk Gaya Jepang
Kategori: Tata Letak Produk.

Buka Divi Theme Builder dan Buat Template Baru

Untuk menggunakan desain ini di semua halaman produk Anda, Anda perlu membuat template untuk itu di pembuat tema. Di dalam halaman pembuat tema, tambahkan template baru. Pilih 'semua produk' dari menu tarik-turun. Jika Anda ingin menggunakan desain ini hanya untuk beberapa produk Anda, Anda dapat menyesuaikan pengaturannya.

Tambahkan Badan Kustom Dari Perpustakaan Divi

Klik 'tambahkan badan khusus' dan pilih 'tambahkan dari perpustakaan' di menu tarik-turun.

Temukan Tata Letak di Tata Letak Tersimpan dan Terapkan

Di jendela tata letak, klik tata letak yang disimpan dan cari yang baru saja kita buat.

Simpan Perubahan ke Pembuat Tema

Jangan lupa untuk menyimpan perubahan ke pembuat tema.

Pratinjau

Template sekarang akan berlaku untuk semua produk di situs web Anda. Mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Ini adalah Bungkus!

Dalam posting ini, kami menunjukkan cara membuat halaman produk yang terinspirasi estetika Jepang. Gayanya rapi dan minimal, cocok untuk memamerkan produk halus atau buatan tangan. Kami juga menunjukkan cara mengubah tata letak menjadi template dengan pembuat tema Divi. Cobalah desain ini dengan proyek Divi + WooCommerce baru Anda dan beri tahu kami pendapat Anda.