Unduh Halaman Produk Layar Penuh yang Cantik untuk Divi

Karena Modul WooCommerce telah menjadi bagian dari Divi, kami telah menunjukkan kepada Anda beberapa desain halaman produk yang dapat Anda buat menggunakan opsi bawaan Divi. Hari ini, kami menambahkan tutorial baru ke daftar itu dengan menunjukkan cara membuat halaman produk layar penuh yang indah. Kami memasang semua konten produk dalam satu bagian sekaligus menciptakan desain yang menakjubkan. Meskipun kami membatasi pengguliran vertikal yang diperlukan pada halaman produk, desainnya tidak terlihat berlebihan. Kami juga telah memastikan desain tetap cantik dan responsif di seluruh ukuran layar kecil. Anda juga dapat mengunduh file JSON 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 Layar Penuh GRATIS

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

Berlangganan Saluran Youtube Kami

Mari Mulai Berkreasi!

Buka Halaman Produk yang Ada

Hal pertama yang perlu Anda lakukan adalah membuka halaman produk yang sudah ada atau membuat yang baru. Untuk tata letak khusus ini, kami telah menambahkan elemen berikut ke halaman produk kami:

• Judul produk
• Gambar unggulan
• Deskripsi Singkat
• Keterangan
• Harga

Aktifkan Divi & Ubah Pengaturan Halaman

Lanjutkan dengan mengaktifkan Divi dan mengubah tata letak halaman di pengaturan halaman.

Beralih ke Visual Builder

Setelah selesai, Anda dapat beralih ke Visual Builder.

Hapus Bagian yang Ada

Di dalam Visual Builder, Anda akan melihat bagian dengan item halaman produk default. Anda dapat melanjutkan dan menghapus seluruh bagian ini. Pada langkah selanjutnya dari posting ini, kita akan membuat ulang desain alternatif kita sendiri.

Tambahkan Bagian Baru

Jarak

Saatnya mulai berkreasi! Tambahkan bagian baru, buka pengaturan bagian dan ubah nilai padding atas dan bawah.

• Padding Atas: 5vw
• Padding Bawah: 5vw

Meluap

Sembunyikan juga bagian yang meluap.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan sesuaikan pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

kolom 1

Indeks Z

Kami juga meningkatkan indeks z kolom pertama dalam pengaturan visibilitas.

• Indeks Z: 10

Kolom 2

Latar Belakang Gradien

Buka pengaturan kolom 2 berikutnya dan tambahkan latar belakang gradien di berbagai ukuran layar:

• Warna 1: #ffcb49
• Warna 2: #ffffff
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 66% (Desktop), 50% (Tablet & Ponsel)
• Posisi Akhir: 66% (Desktop), 50% (Tablet & Ponsel)

Tambahkan Modul Judul Woo ke Kolom 1

Konten Dinamis

Saatnya mulai menambahkan modul! Di kolom 1, satu-satunya modul yang kita butuhkan adalah Modul Judul Woo.

• Produk: Produk Ini

Pengaturan Teks Judul

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

• Judul Font: Montserrat
• Judul Font Berat: Ultra Ringan
• Perataan Teks Judul: Kiri (Desktop), Tengah (Tablet & Ponsel)
• Ukuran Teks Judul: 9vw

Perekat

Ubah ukuran modul juga.

• Lebar: 50vw (Desktop), 100% (Tablet & Ponsel)

Jarak

Seiring dengan pengaturan spasi.

• Margin Atas: 14vw (Desktop), 0vw (Tablet & Ponsel)
• Margin Bawah: 5vw (Tablet & Ponsel)
• Margin Kiri: -11vw (Desktop), 2vw (Tablet & Telepon)
• Margin Kanan: 2vw (Tablet & Ponsel)

Ubah Putar

Last but not least, putar seluruh modul dalam pengaturan transformasi.

• Kiri: 270 derajat (Desktop), 0 derajat (Tablet & Ponsel)

Tambahkan Modul Gambar Woo ke Kolom 2

Konten Dinamis

Ke modul kedua! Di sana, satu-satunya modul yang kita butuhkan adalah Modul Gambar Woo.

• Produk: Produk Ini

Pengaturan Gambar

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

• Sudut Bulat Gambar: 1vw (Semua Sudut)

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba(0,0,0,0.3)

Perekat

Selesaikan pengaturan Modul Gambar Woo dengan mengubah lebar dan perataan modul dalam pengaturan ukuran.

• Lebar: 35vw
• Penyelarasan Modul: Pusat

Tambahkan Modul Deskripsi Woo #1 ke Kolom 3

Konten Dinamis

Ke kolom terakhir! Di sana, modul pertama yang kita butuhkan adalah Modul Deskripsi Woo.

• Produk: Produk Ini
• Jenis Deskripsi: Deskripsi Singkat

Pengaturan Teks

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

• Font Teks: Montserrat
• Gaya Font Teks: Huruf Besar
• Ukuran Teks: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Spasi Surat Teks: -0,07vw
• Tinggi Baris Teks: 1.8em

Jarak

Ubah juga pengaturan spasi.

• Margin Atas: 9vw
• Padding Kiri: 2vw (Desktop), 5vw (Tablet & Ponsel)
• Padding Kanan: 5vw

Tambahkan Modul Harga Woo ke Kolom 3

Konten Dinamis

Ke modul berikutnya, yaitu Modul Harga Woo.

• Produk: Produk Ini

Pengaturan Teks Harga

Ubah pengaturan teks harga modul sebagai berikut:

• Font Harga: Montserrat
• Warna Teks Harga: #333333
• Harga Teks Ukuran: 3vw (Desktop), 7vw (Tablet), 10vw (Telepon)
• Garis Harga Tinggi: 1.8em

Jarak

Ubah juga pengaturan spasi.

• Margin Atas: 4vw
• Padding Kiri: 2vw (Desktop), 5vw (Tablet & Ponsel)
• Padding Kanan: 2vw (Desktop), 5vw (Tablet & Ponsel)

Tambahkan Woo Add To Cart Module ke Kolom 3

Konten Dinamis

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

• Produk: Produk Ini

Pengaturan Bidang

Ubah pengaturan bidang modul sebagai berikut:

• Warna Latar Belakang Bidang: #0a0900
• Warna Teks Bidang: #ffffff
• Font Bidang: Montserrat

• Ukuran Teks Bidang: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Sudut Bulat Bidang: 50vw (Semua Sudut)

Pengaturan Tombol

Bermain-main dengan pengaturan tombol juga.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 1vw (Desktop), 2vw (Tablet), 3vw (Telepon)
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #ffcb49
• Lebar Batas Tombol: 0px

• Font Tombol: Montserrat

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

Jarak

Dan selesaikan pengaturan modul dengan menambahkan beberapa nilai spasi khusus di berbagai ukuran layar.

• Margin Atas: 2vw
• Margin Kiri: -3vw (Desktop), 5vw (Tablet & Telepon)
• Margin Kanan: 5vw (Tablet & Ponsel)

Ubah Halaman Produk Menjadi Template

Simpan Tata Letak Halaman ke Perpustakaan Divi

Setelah Anda menyelesaikan halaman produk layar penuh, Anda dapat menggunakannya untuk setiap produk Anda menggunakan Pembuat Tema Divi. Untuk melakukannya, simpan tata letak yang baru saja Anda buat di Perpustakaan Divi Anda.

Tambahkan Template Baru ke Pembuat Tema

Pindah ke Pembuat Tema di pengaturan Divi Anda dan tambahkan template baru.

Pilih halaman produk yang Anda inginkan untuk menampilkan tata letak ini.

Unggah Tata Letak ke Badan Template

Kemudian, klik 'Add Global Body' dan pilih 'Add From Library'.

Pilih tata letak Anda di tab 'Tata Letak Tersimpan Anda'.

Dan simpan semua perubahan Anda!

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 membuat ulang halaman produk layar penuh yang indah yang dapat Anda gunakan untuk semua jenis situs web eCommerce yang Anda siapkan. Kami telah mencocokkan pengaturan berbagai modul woo untuk menciptakan hasil yang menakjubkan dan membatasi pengguliran vertikal yang diperlukan. Kami berharap desain ini menginspirasi Anda untuk membuat halaman produk layar penuh Anda sendiri juga! Jika Anda memiliki pertanyaan, 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.