Cara Membingkai Produk di Gambar Latar Belakang Anda dengan Opsi Kolom Divi

Dengan modul WooCommerce Divi di luar sana, ada banyak sekali desain yang dapat Anda selesaikan menggunakan Divi. Dalam tutorial Divi hari ini, kami akan mencoba menginspirasi Anda dengan ide desain lain yang dapat Anda capai menggunakan opsi bawaan Divi saja. Lebih khusus lagi, kami akan menunjukkan cara membingkai produk di gambar latar belakang Anda. Hasilnya sepenuhnya tergantung pada gambar latar belakang Anda, tetapi jika Anda mengikuti tutorial ini, Anda akan tahu langkah mana yang harus diambil untuk mempersonalisasi teknik untuk situs web Anda sendiri! Anda juga dapat mengunduh file JSON tutorial secara gratis!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Tata Letak Produk Bingkai GRATIS

Untuk mendapatkan tata letak produk bingkai 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!

1. Siapkan Bagian dengan Gambar Latar Responsif

Tambahkan Bagian Baru

Gambar Latar Belakang Responsif

Langkah pertama untuk membingkai produk di gambar latar belakang Anda adalah menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan unggah gambar latar belakang yang responsif. Anda dapat menemukan kedua gambar yang kami gunakan di folder yang dapat Anda unduh di awal posting ini.

• Gambar latar belakang: Pemandangan
• Ukuran Gambar Latar Belakang: Sesuai
• Posisi Gambar Latar Belakang: Tengah Atas

• Gambar latar belakang: Kotak

Jarak

Pindah ke tab desain dan tambahkan beberapa bantalan atas dan bawah khusus di berbagai ukuran layar.

• Padding Atas: 3vw (Desktop), 0vw (Tablet & Ponsel)
• Padding Bawah: 3vw (Desktop), 7vw (Tablet), 18vw (Telepon)

Berbatasan

Selesaikan pengaturan bagian dengan menambahkan batas.

• Lebar Perbatasan: 2vw
• Warna Perbatasan: #ffffff

2. Tambahkan Elemen Bingkai yang Berbeda ke Kolom

Tambahkan Baris Baru

Struktur Kolom

Sekarang, seperti yang Anda lihat di gambar latar belakang, produk terletak di sisi kanan gambar latar belakang. Kami akan memilih struktur kolom yang cocok untuk baris baru di bagian kami. Dalam hal ini, itulah struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Selesaikan pengaturan baris dengan menambahkan beberapa bantalan kiri dan kanan khusus.

• Padding Kiri: 5vw
• Padding Kanan: 5vw

Tambahkan Modul Teks ke Kolom 2

Biarkan Kotak Konten Kosong

Saatnya mulai menambahkan modul! Untuk memungkinkan produk ditampilkan, kami akan menggunakan Modul Teks kosong.

Jarak

Kami akan menambah tinggi modul di pengaturan jarak berikutnya.

• Padding Atas: 22vw (Desktop), 39vw (Tablet), 35vw (Telepon)
• Padding Bawah: 15vw (Desktop), 39vw (Tablet), 35vw (Telepon)

Berbatasan

Dan kami akan menambahkan perbatasan juga.

• Lebar Perbatasan: 3vw
• Lebar Batas Bawah: 1vw
• Warna Perbatasan: rgba (255,255,255,0.7)

Tambahkan Modul Judul Woo ke Kolom 2

Konten Dinamis

Ke modul berikutnya, yaitu Modul Judul Woo. Pilih produk pilihan Anda.

• Produk: Temukan di Daftar

Warna latar belakang

Gunakan warna latar belakang berikut:

• Warna Latar Belakang: rgba(255,255,255,0.7)

Pengaturan Teks Judul

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

• Judul Judul Level: H3
• Judul Font: Work Sans
• Judul Teks Ukuran: 2.5vw (Desktop), 5vw (Tablet), 6vw (Telepon)

Jarak

Tambahkan beberapa nilai padding khusus juga.

• Padding Atas: 1vw
• Padding Bawah: 1vw
• Padding Kiri: 3vw
• Padding Kanan: 3vw

Tambahkan Modul Deskripsi Woo ke Kolom 2

Konten Dinamis

Modul selanjutnya yang kita butuhkan adalah Modul Deskripsi Woo. Pilih produk pilihan Anda.

• Produk: Temukan di Daftar
• Jenis Deskripsi: Deskripsi Singkat

Warna latar belakang

Ubah warna latar belakang modul yang sesuai:

• Warna Latar Belakang: rgba(255,255,255,0.7)

Pengaturan Teks

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

• Font Teks: Buka Sans
• Ukuran Teks: 0.9vw (Desktop), 2.2vw (Tablet), 2.8vw (Telepon)
• Tinggi Baris Judul: 2.2em

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa nilai padding khusus.

• Padding Atas: 1vw
• Padding Bawah: 1vw
• Padding Kiri: 3vw
• Padding Kanan: 3vw

Tambahkan Modul Teks Harga Woo ke Kolom 2

Konten Dinamis

Selanjutnya, kita memiliki Modul Teks Harga Woo. Pilih produk pilihan Anda.

• Produk: Temukan di Daftar

Warna latar belakang

Ubah warna latar belakang.

• Warna Latar Belakang: rgba(255,255,255,0.7)

Pengaturan Teks Harga

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

• Font Harga: Work Sans
• Warna Teks Harga: #000000
• Harga Teks Ukuran: 2vw (Desktop), 4vw (Tablet), 5vw (Telepon)

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa nilai padding khusus.

• Padding Atas: 2vw
• Padding Bawah: 2vw
• Padding Kiri: 3vw
• Padding Kanan: 3vw

Tambahkan Woo Add To Cart Module ke Kolom 2

Konten Dinamis

Ke modul berikutnya dan terakhir, yaitu Modul Woo Add To Cart! Pilih produk pilihan Anda.

• Produk: Temukan di Daftar

Warna latar belakang

Ubah warna latar belakang.

• Warna Latar Belakang: rgba(255,255,255,0.7)

Pengaturan Bidang

Ubah juga pengaturan bidang modul.

• Warna Latar Belakang Bidang: #ffffff
• Warna Teks Bidang: #000000
• Font Bidang: Buka Sans

• Lebar Batas Bawah Bidang: 1px
• Warna Batas Bawah Bidang: #000000

Pengaturan Tombol

Lanjutkan dengan menata tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1.1vw (Desktop), 2.5vw (Tablet), 3.5vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #000000
• Lebar Batas Tombol: 0px

• Radius Perbatasan Tombol: 10vw
• Font Tombol: Buka Sans

• Padding Atas: 1vw (Desktop), 2vw (Tablet), 4vw (Telepon)
• Padding Bawah: 1vw (Desktop), 2vw (Tablet), 4vw (Telepon)
• Padding Kiri: 4vw (Desktop), 6vw (Tablet), 10vw (Telepon)
• Padding Kanan: 4vw (Desktop), 6vw (Tablet), 10vw (Telepon)

Jarak

Dan selesaikan pengaturan modul dengan menambahkan beberapa nilai margin dan padding khusus.

• Margin Bawah: 2vw
• Padding Atas: 3vw
• Padding Bawah: 3vw
• Padding Kiri: 3vw
• Padding Kanan: 3vw

3. Gaya, Ubah Ukuran & Reposisi Kolom

Ubah Pengaturan Kolom 2

Latar Belakang Gradien

Sekarang, bagian terakhir dari tutorial ini memungkinkan kita untuk menyatukan modul yang berbeda. Buka pengaturan kolom 2 dan gunakan latar belakang gradien berikut untuk itu:

• Warna 1: rgba(43,135,218,0)
• Warna 2: #ffffff
• Tipe Gradien: Linier
• Posisi Awal: 39%

Berbatasan

Tambahkan beberapa sudut membulat juga.

• Semua Sudut: 1vw

Bayangan Kotak

Kami membuat beberapa kedalaman dengan menambahkan bayangan kotak halus juga.

• Kekuatan Buram Bayangan Kotak: 100px
• Warna Bayangan: rgba (0,0,0,0.24)

Ubah Terjemahan

Dan kami akan menyelesaikan pengaturan kolom dengan mengubah nilai translasi transformasi di berbagai ukuran layar. Langkah ini memungkinkan kita untuk memposisikan ulang kolom sesuai keinginan. Saat menggunakan gambar latar belakang Anda sendiri, Anda pasti akan menikmati opsi ini!

• Kanan: 0px (Desktop), 9vw (Tablet & Ponsel)
• Bawah: -5vw (Desktop), 0vw (Tablet & Ponsel)

Pratinjau

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

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membingkai produk di gambar latar belakang Anda menggunakan opsi bawaan Divi dan modul WooCommerce yang disertakan di dalam Divi Builder. Pendekatan yang Anda ambil bergantung pada gambar latar belakang yang Anda gunakan, tetapi melalui tutorial ini akan membantu Anda memahami pendekatan secara keseluruhan. Anda juga dapat mengunduh file JSON tata letak 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.