Cara Membuat Template Halaman Produk yang Menyenangkan untuk Produk Anak dengan Divi

Situs web produk anak-anak memiliki gaya yang unik. Mereka cenderung menyenangkan, penuh warna dan menginspirasi senyum. Toko WooCommerce Anda untuk produk anak-anak sekarang lebih mudah dibuat dengan pembuat tema Divi dan modul woo yang dapat disesuaikan. Mengapa tidak membuatnya sedikit lebih istimewa dengan desain yang unik dan menyenangkan? Dalam posting ini, kami akan menunjukkan cara membuat template halaman produk anak-anak di pembuat tema yang akan berlaku untuk semua produk Anda. Ini akan bekerja paling baik dengan gambar produk yang memiliki latar belakang transparan. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita mulai.

Pratinjau

Sebelum kita mulai membuat ulang desain, mari kita lihat hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Template Produk The Fun Kids secara GRATIS

Untuk mendapatkan template produk anak-anak yang menyenangkan secara 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.

UNDUH

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

1. Persiapan Desain Untuk Template Produk Anak-Anak

Hapus Latar Belakang Dari Foto Produk

Hal pertama yang akan kita lakukan sebelum memulai dengan desain produk anak-anak adalah menyiapkan gambar. Hapus latar belakang dari gambar produk. Anda dapat melakukannya dengan Adobe Photoshop, Adobe Illustrator, atau remove.bg. Sisakan ruang di sekitar produk agar sesuai dengan desain. Ukuran terbaik untuk gambar akhir adalah 600X400 piksel.

Buat Desain Latar Belakang

Langkah kedua adalah membuat desain latar belakang untuk ditempatkan di belakang gambar. Desain dengan bentuk yang tumpang tindih ini mudah dibuat di dalam Adobe Illustrator. Atau, Anda dapat menemukan gambar latar belakang ini di folder yang dapat diunduh di atas. Berikut adalah langkah-langkah yang harus diikuti jika Anda ingin membuat latar belakang:

• Buat (atau sumber) bentuk.
• Berikan bentuk warna yang Anda inginkan.
• Gandakan bentuknya.
• Warnai dengan nada yang mirip dengan aslinya.
• Putar bentuk kedua untuk membuat komposisi yang bagus.
• Tambahkan beberapa transparansi ke kedua bentuk.
• Tambahkan latar belakang dengan warna yang sama dengan latar belakang di desain akhir.
• Simpan sebagai JPG sekitar 1750X1650 px.

2. Buat/Tambah Produk Woocommerce Baru

Data produk

Setelah gambar produk dan desain latar belakang siap, saatnya membuat produk anak-anak. Untuk membuat desain persis seperti milik kita, masukkan informasi berikut.

• Judul: Blok Huruf Kayu
• Deskripsi Panjang: Balok kayu alami ini sangat bagus untuk anak-anak untuk mempelajari huruf dan angka mereka dengan cara yang menyenangkan dan kreatif. Perbatasan dibulatkan untuk jari kelingking dan catnya tidak beracun.
• Harga Jual Lama: 12,99
• Harga Jual Baru: 7,99
• Gambar Unggulan: Potong gambar balok kayu. Ukuran yang disukai: 600 x 400 piksel
• Atribut: Lihat Di Bawah

Di tab atribut, masukkan nilai untuk modul informasi tambahan.

• Bahan: Kayu Pinus Alami
• Cat: Cat Putih Tidak Beracun
• Warna Cat: Putih, Biru, Hijau, Fucsia

3. Buat Template Baru di Pembuat Tema

Buka Divi Theme Builder dan Tambahkan Template Baru

Sekarang saatnya menuju ke pembuat tema Divi. Kami akan membangun desain di sana. Tambahkan template baru.

Mulai Membangun Badan Kustom Untuk Semua Produk

Gunakan template ini pada semua produk dan mulailah membangun tubuh.

Kiat Pro Pembuat Tema:

Saat membuat desain produk di dalam pembuat tema, selalu buka halaman produk di jendela lain untuk memeriksa perubahannya.

4. Buat Ulang Desain Produk Anak-anak

Tambahkan Bagian Baru

Latar belakang

Di dalam pembuat templat tubuh, Anda akan melihat sebuah bagian. Buka bagian itu dan ubah warna latar belakang.

• Warna Latar Belakang: Pink Muda #f9f2f2

Tambahkan Baris Baru

Struktur Kolom

Sekarang, tambahkan baris baru dengan 2 kolom.

Perekat

Kemudian, sesuaikan ukuran baris.

• Lebar Talang Kustom: 2
• Lebar: 90%
• Lebar Maks: 90%

Pengaturan Kolom 1

Latar belakang

Dalam pengaturan untuk kolom 1, tambahkan desain gambar latar belakang yang Anda buat dengan bentuk yang tumpang tindih.

• Gambar latar belakang

Jarak

Kemudian, sesuaikan jaraknya.

• Padding Atas dan Bawah: 5vw
• Padding Kiri dan Kanan
  • Tablet: 2vw
  • Telepon: 0vw

Pengaturan Kolom 2

Jarak

Pindah ke kolom 2 dan sesuaikan nilai spasi sebagai berikut.

• Padding Atas: 1vw
• Bantalan Bawah:
  • Tablet + Telepon: 1vw
• Bantalan Kiri dan Kanan:
  • Desktop: 2vw
  • Tablet dan Telepon: 7vw

Tambahkan Modul Gambar Woo ke Kolom 1

Isi

Sekarang saatnya untuk menambahkan modul. Pertama, di kolom 1, tambahkan modul gambar woo dan pilih produk ini di bawah konten.

• Produk: Produk Ini

Elemen

Kemudian, pilih elemen yang akan ditampilkan pada desain.

• Gambar Unggulan: Ya
• Galeri: Tidak
• Lencana Penjualan: Ya

Teks Lencana Penjualan

Di tab desain, sesuaikan nilai untuk lencana penjualan sebagai berikut.

• Warna Lencana: Transparan
• Font: Nunito
• Berat Huruf: Tebal
• Warna Teks: Merah Muda #f24881
• Ukuran teks:
  • Desktop: 5vw
  • Tablet: 12vw
  • Telepon: 10vw

Perekat

Kemudian, sesuaikan jarak untuk membuat semuanya lebih pas.

• Bantalan Atas:
  • Desktop dan Tablet: 1vw
  • Telepon: 2vw
• Padding Bawah: 0vw
• Padding Kiri dan Kanan: 0vw

Tambahkan Modul Judul Woo ke Kolom 2

Isi

Di kolom kedua, tambahkan modul judul woo dan pilih produk ini di tab konten.

• Produk: Produk Ini

Latar belakang

Berikan modul latar belakang putih.

• Warna Latar Belakang: Putih #ffffff

Teks Judul

Kemudian, gaya teks judul pada tingkat H1.

• Tingkat Pos: H1
• Font: Nunito
• Berat Huruf: Sangat Tebal
• Perataan Teks: Tengah
• Warna Teks: Abu-abu Gelap Kehijauan #314942
• Ukuran teks:
  • Desktop: 2.6vw
  • Tablet dan Telepon: 6.4vw

Jarak

Lanjutkan dengan menyesuaikan jarak dalam modul.

• Padding Atas dan Bawah:
  • Desktop: 1.5vw
  • Tablet dan Telepon: 2.5vw
• Padding Kiri dan Kanan: 2vw

Berbatasan

Terakhir, sesuaikan batas untuk ukuran desktop dan responsif.

• Sudut Bulat:
  • Desktop: 1vw keempat sudut
  • Tablet dan Telepon: 3vw keempat sudut

Tambahkan Modul Deskripsi Woo ke Kolom 2

Isi

Di bawah judul produk, tambahkan modul deskripsi woo. Pilih jenis deskripsi dan produk ini di tab konten.

• Produk: Produk Ini
• Tipe Deskripsi: Deskripsi

Latar belakang

Kemudian, beri modul warna latar belakang.

• Warna Latar Belakang: Putih #ffffff

Teks

Pindah ke tab desain dan gaya teks.

• Font: Nunito
• Warna: Abu-abu Gelap Kehijauan #314942
• Ukuran:
  • Desktop: 1vw
  • Tablet: 2.5vw
  • Telepon: 3vw

Jarak

Kemudian, sesuaikan jarak untuk modul.

• Batas atas:
  • Desktop dan Tablet: -0.5vw
  • Telepon: -3vw
• Padding Atas dan Bawah:
  • Desktop: 1.5vw
  • Tablet dan Telepon: 4vw
• Bantalan Kiri dan Kanan:
  • Desktop: 2vw
  • Tablet dan Telepon: 6vw

Berbatasan

Terakhir, tambahkan sudut membulat.

• Sudut Bulat:
  • Desktop: 1vw keempat sudut
  • Tablet dan Telepon: 3vw keempat sudut

Tambahkan Modul Info Tambahan Woo ke Kolom 2

Isi

Di bawah modul deskripsi, tambahkan modul info tambahan woo. Pilih produk ini di tab konten.

• Produk: Produk Ini

Latar belakang

Kemudian, tambahkan latar belakang putih.

• Warna Latar Belakang: Putih #ffffff

Teks

Di tab desain, mulailah menata berbagai jenis teks. Pertama, teks yang berlaku untuk nilai atribut.

• Font: Nunito
• Gaya: Miring
• Warna: Abu-abu Gelap Kehijauan #314942
• Ukuran:
  • Desktop: 0.8vw
  • Tablet: 1.5vw
  • Telepon: 2vw

Teks Judul

Kedua, gaya teks judul.

• Font: Nunito
• Berat: Ultra Tebal
• Warna: Merah Muda #f24881
• Ukuran:
  • Desktop: 1.7vw
  • Tablet: 3vw
  • Telepon: 3.5vw
• Tinggi Garis: 1em

Teks Atribut

Ketiga, gaya teks atribut.

• Font: Nunito
• Berat: Tebal
• Warna: Abu-abu Gelap Kehijauan #314942
• Ukuran:
  • Desktop: 0.9vw
  • Tablet: 2vw
  • Telepon: 3vw

Jarak

Kemudian, sesuaikan jarak sebagai berikut.

• Batas atas:
  • Desktop dan Tablet: -0.5vw
  • Telepon: -3vw
• Bantalan Atas:
  • Desktop: 1.5vw
  • Tablet: 3vw
  • Telepon: 5vw
• Padding Kiri: 1vw
• Bantalan Kanan:
  • Desktop: 2vw
  • Tablet dan Telepon: 5vw

Berbatasan

Terakhir, tambahkan sudut membulat.

• Sudut Bulat:
  • Desktop: 1vw keempat sudut
  • Tablet dan Telepon: 3vw keempat sudut

Tambahkan Modul Harga Woo ke Kolom 2

Isi

Tambahkan modul harga woo dan pilih produk ini di tab konten.

• Produk: Produk Ini

Latar belakang

Juga, tambahkan latar belakang merah muda ke modul untuk membuatnya menonjol.

• Warna Latar Belakang: Merah Muda #f24881

Dijual Teks Harga Lama

Pindah ke tab desain dan gaya harga lama obral.

* Saat Anda menambahkan harga jual baru dan lama ke suatu produk, modul harga woo tidak akan menampilkan keduanya di pembuat tema. Periksa halaman produk yang sebenarnya untuk melihat bagaimana desain akhir terlihat.

• Font: Nunito
• Warna: Putih #ffffff
• Ukuran:
  • Desktop: 1.5vw
  • Tablet: 2.5vw
  • Telepon: 3vvw

Dijual Teks Harga Baru

Lanjutkan dengan menata harga baru.

• Font: Nunito
• Berat: Tebal
• Warna: Putih #ffffff
• Ukuran:
  • Desktop: 2vw
  • Tablet: 2vw
  • Telepon: 4vw
• Spasi Huruf: 1px

Jarak

Kemudian, sesuaikan jarak modul.

• Batas atas:
  • Desktop dan Tablet: -0.5vw
  • Telepon: -3vw
• Padding Atas dan Bawah:
  • Desktop: 1.5vw
  • Tablet dan Telepon:
• Bantalan Kiri dan Kanan:
  • Desktop: 2vw
  • Tablet dan Telepon: 5vw

Berbatasan

Terakhir, tambahkan sudut membulat.

• Sudut Bulat:
  • Desktop: 1vw keempat sudut
  • Tablet dan Telepon: 3vw keempat sudut

Desain Akhir

Seperti inilah tampilan desain pada produk sebenarnya vs tampilannya di pembuat tema.

Tambahkan Woo Tambahkan ke Keranjang Modul ke Kolom 2

Isi

Di bawah modul harga, tempatkan modul woo add to cart. Pilih produk ini di tab konten.

* Saat Anda menambahkan modul woo add to cart, Anda akan melihat bahwa di bagian atas modul ini memiliki menu tarik-turun untuk opsi warna. Jika Anda tidak menentukan ini di halaman produk Anda, itu tidak akan muncul di desain akhir Anda. Anda dapat memastikan dengan memeriksa produk langsung saat Anda membangun di dalam pembuat tema.

• Produk: Produk Ini

Elemen

Pindah, pilih elemen yang akan ditampilkan di modul.

• Bidang Kuantitas: Mati
• Stok: Mati

Latar belakang

Kemudian, tambahkan warna latar belakang putih.

• Warna Latar Belakang: Putih #ffffff

Tombol

Sekarang saatnya untuk tombol gaya. Tambahkan nilai sebagai berikut.

• Ukuran teks:
  • Desktop: 2vw
  • Tablet: 3vw
  • Telepon: 5vw
• Warna Teks: Merah Muda #f24881
• Warna Latar Belakang: Putih #ffffff
• Spasi Huruf: 1px
• Font: Nunito
• Berat: Berat
• Margin Atas dan Bawah: -0,3vw

Jarak

Kemudian, sesuaikan jarak modul.

• Batas atas:
  • Desktop dan Tablet: -0.5vw
  • Tablet: -3vw
• Padding Atas dan Bawah: 0vw
• Margin Kiri dan Kanan: 0vw

Berbatasan

Terakhir, tambahkan perbatasan bulat.

• Sudut Bulat:
  • Desktop: 1vw keempat sudut
  • Tablet dan Telepon: 3vw keempat sudut

Pratinjau

Mari kita lihat akhir pada desain yang telah selesai di berbagai ukuran layar. Template desain produk anak-anak sekarang akan berlaku untuk semua produk di toko Anda. Pastikan Anda kembali untuk memeriksa ukuran gambar untuk memastikan semuanya pas.

Desktop

Seluler

Ini Bungkus di Halaman Produk Anak-Anak!

Dalam posting ini, kami menunjukkan cara membuat ulang desain untuk halaman produk anak-anak. Desain dengan tepi yang lembut, desain latar belakang yang menyenangkan, dan warna yang ceria ini akan membuat semua produk Anda terlihat menarik dan siap untuk dibeli. Kami harap Anda menyukai desain ini dan akan menggunakannya untuk menginspirasi kreasi Divi Anda sendiri. Tinggalkan kami pemikiran Anda di komentar!