Dengan mod WooCommerce di Divi, ada banyak sekali desain yang bisa Anda buat. Dalam tutorial ini Divi, kami akan mencoba menginspirasi Anda dengan ide desain lain yang dapat Anda capai hanya dengan menggunakan opsi bawaan Divi. Secara khusus, kami akan menunjukkan cara membingkai produk di gambar latar belakang Anda. Hasilnya bergantung sepenuhnya pada gambar latar belakang Anda, tetapi jika Anda mengikuti tutorial ini, Anda akan mengetahui langkah-langkah apa yang harus diambil untuk menyesuaikan teknik ini sesuai keinginan Anda. situs jaringan! Anda juga dapat mengunduh file JSON tutorial secara gratis!
penelitian
Sebelum kita menyelami tutorialnya, mari kita lihat hasilnya pada ukuran layar yang berbeda.
1. Konfigurasi bagian dengan gambar latar yang responsif
Tambahkan bagian baru
Gambar latar adaptif
Langkah pertama untuk membingkai produk di gambar latar belakang Anda adalah menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan unduh gambar latar belakang responsif. Anda dapat menemukan dua gambar yang kami gunakan di folder yang dapat Anda unduh di awal artikel ini.
- Gambar latar belakang: lansekap
- Ukuran Gambar Latar Belakang: Fit
- Posisi gambar latar: tengah atas
- Gambar latar: persegi
jarak
Buka tab desain dan tambahkan bantalan atas dan bawah khusus pada ukuran layar yang berbeda.
- Lapisan atas: 3vw (desktop), 0vw (tablet dan telepon)
- Lapisan bawah: 3vw (meja), 7vw (tablet), 18vw (telepon)
Batas
Lengkapi parameter bagian dengan menambahkan perbatasan.
- Lebar perbatasan: 2vw
- Warna perbatasan: #ffffff
2. Tambahkan elemen bingkai yang berbeda ke kolom
Tambahkan baris baru
Struktur kolom
Sekarang, seperti yang Anda lihat pada gambar latar belakang, produk terletak di sisi kanan gambar latar belakang. Kami akan memilih struktur kolom yang sesuai untuk baris baru di bagian kami. Dalam hal ini, itu adalah struktur kolom berikut:
perekat
Tanpa menambahkan modul, buka parameter garis dan modifikasi parameter dimensi sesuai:
- Gunakan lebar selokan khusus: Ya
- Lebar selokan: 1
- Menyamakan ketinggian kolom: Ya
- Lebar: 100%
- Lebar maks: 100%
jarak
Lengkapi parameter garis dengan menambahkan lapisan kiri dan kanan khusus.
- Padding kiri: 5vw
- Padding kanan: 5vw
Tambahkan modul teks ke kolom 2
Biarkan area konten kosong
Saatnya mulai menambahkan modul! Untuk memungkinkan produk ditampilkan, kami akan menggunakan modul teks kosong.
jarak
Kami kemudian akan meningkatkan tinggi modul dalam pengaturan jarak.
- Lapisan atas: 22vw (desktop), 39vw (tablet), 35vw (telepon)
- Lapisan bawah: 15vw (meja), 39vw (tablet), 35vw (telepon)
Batas
Dan kami juga akan menambahkan perbatasan.
- Lebar perbatasan: 3vw
- Lebar batas bawah: 1vw
- Warna perbatasan: rgba (255,255,255,0,7)
Tambahkan modul judul Woo ke kolom 2
Konten dinamis
Mari beralih ke modul berikutnya, yaitu modul judul Woo. Pilih produk pilihan Anda.
- Produk: Cari daftar
Warna latar belakang
Gunakan warna latar belakang berikut:
- Warna latar: rgba (255,255,255,0,7)
Pengaturan teks judul
Beralih ke tab desain modul dan ubah pengaturan teks H3 sesuai:
- Tingkat judul: H3
- Jenis huruf: Work Sans
- Ukuran teks judul: 2.5vw (desktop), 5vw (tablet), 6vw (telepon)
jarak
Juga tambahkan nilai isian khusus.
- Lapisan atas: 1vw
- Lapisan 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: Cari daftar
- Jenis keterangan: Deskripsi singkat
Warna latar belakang
Ubah warna latar belakang modul sesuai:
- Warna latar: rgba (255,255,255,0,7)
Pengaturan teks
Buka 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,2 em
jarak
Lengkapi parameter modul dengan menambahkan nilai isian khusus.
- Lapisan atas: 1vw
- Lapisan bawah: 1vw
- Padding kiri: 3vw
- Padding kanan: 3vw
Tambahkan modul teks Harga Woo ke kolom 2
Konten dinamis
Selanjutnya, kami memiliki modul teks harga Woo. Pilih produk pilihan Anda.
- Produk: Cari daftar
Warna latar belakang
Ubah warna latar belakang.
- Warna latar: rgba (255,255,255,0,7)
Pengaturan teks harga
Beralih ke tab desain modul dan ubah pengaturan teks harga sesuai:
- Kebijakan harga: Work Sans
- Warna teks harga: # 000000
- Harga Ukuran teks: 2vw (desktop), 4vw (tablet), 5vw (telepon)
jarak
Lengkapi parameter modul dengan menambahkan nilai isian khusus.
- Lapisan atas: 2vw
- Lapisan bawah: 2vw
- Padding kiri: 3vw
- Padding kanan: 3vw
Tambahkan Modul Tambahkan ke keranjang di kolom 2
Konten dinamis
Mari beralih ke modul berikutnya dan terakhir, yaitu modul Woo Add To Cart! Pilih produk pilihan Anda.
- Produk: Cari daftar
Warna latar belakang
Ubah warna latar belakang.
- Warna latar: rgba (255,255,255,0,7)
Pengaturan bidang
Juga modifikasi parameter bidang modul.
- Warna latar belakang bidang: #ffffff
- Warna teks bidang: # 000000
- Fon bidang: Buka Sans
- Lebar batas bawah bidang: 1px
- Warna batas bawah bidang: # 000000
Pengaturan tombol
Lanjutkan dengan menata tombol sebagai berikut:
- Gunakan gaya khusus 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
- Jari-jari batas tombol: 10vw
- Font tombol: Buka tanpa
- Lapisan atas: 1vw (desktop), 2vw (tablet), 4vw (telepon)
- Lapisan bawah: 1vw (meja), 2vw (tablet), 4vw (telepon)
- Padding kiri: 4vw (desktop), 6vw (tablet), 10vw (ponsel)
- Padding kanan: 4vw (meja), 6vw (tablet), 10vw (telepon)
jarak
Dan lengkapi parameter modul dengan menambahkan margin kustom dan nilai padding.
- Margin bawah: 2vw
- Lapisan atas: 3vw
- Lapisan bawah: 3vw
- Padding kiri: 3vw
- Padding kanan: 3vw
3. Gaya, mengubah ukuran dan memposisikan ulang kolom
Ubah parameter kolom 2
Latar belakang gradien
Sekarang, bagian terakhir dari tutorial ini memungkinkan kita untuk menyatukan modul yang berbeda. Buka pengaturan untuk kolom 2 dan gunakan latar belakang gradien berikut:
- Warna 1: rgba (43,135,218,0)
- Warna 2: #ffffff
- Jenis gradien: linier
- Posisi awal: 39%
Batas
Tambahkan juga sudut membulat.
- Semua sudut: 1vw
Kotak bayangan
Kami menciptakan kedalaman dengan menambahkan bayangan kotak halus.
- Kekuatan Box Shadow Blur: 100px
- Warna bayangan: rgba (0,0,0,0,24)
Terjemahan Transformer
Dan kami akan menyelesaikan pengaturan kolom dengan mengubah nilai konversi transformasi pada ukuran layar yang berbeda. Langkah ini memungkinkan kita untuk memposisikan ulang kolom sesuai keinginan. Saat menggunakan gambar latar belakang Anda sendiri, Anda pasti akan menghargai opsi ini!
- Kanan: 0px (kantor), 9vw (tablet dan telepon)
- Bawah: -5vw (kantor), 0vw (tablet dan telepon)
penelitian
Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.
final pikiran
Dalam artikel ini, kami menunjukkan kepada Anda cara membingkai produk di gambar latar belakang Anda menggunakan opsi dan modul bawaan Divi. WooCommerce termasuk dalam Divi Builder. Pendekatan yang Anda ambil bergantung pada gambar latar belakang yang Anda gunakan, tetapi membaca tutorial ini akan membantu Anda memahami pendekatan secara keseluruhan. Anda juga dapat mengunduh file JSON dari tata letak secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.
