Cara Menumpuk Gambar Galeri Woo Secara Vertikal Di Dalam Templat Halaman Produk Divi Anda

Secara default, segera setelah Anda menambahkan gambar galeri ke produk WooCommerce Anda, gambar tersebut akan muncul secara horizontal di bawah gambar unggulan produk Anda di bagian depan desain halaman produk Anda. Dalam beberapa desain tertentu, menumpuk gambar galeri woo ini secara vertikal mungkin lebih nyaman, misalnya dalam desain halaman produk layar penuh. Jika Anda mencari cara cepat untuk menumpuk gambar galeri woo secara vertikal di dalam templat halaman produk yang Anda buat dengan Pembuat Tema Divi, Anda akan menyukai tutorial ini. Kami akan menunjukkan kepada Anda langkah demi langkah bagaimana menuju ke sana. Kami akan menyertai pendekatan ini dengan dan template halaman produk minimal yang dapat Anda unduh secara gratis juga! Tutorial ini berfungsi paling baik pada halaman produk yang menggunakan gambar dengan rasio 1:1.

Mari kita lakukan.

Pratinjau

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

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.

UNDUH

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

Bangun Templat Halaman Produk Di Dalam Divi Theme Builder

Buka Divi Theme Builder & Tambahkan Template Baru

Mulailah dengan pergi ke Divi Theme Builder dan klik 'Add New Template'.

Gunakan Template di Semua Produk

Kami akan menggunakan template ini di semua produk, tetapi jangan ragu untuk mengubah ketentuan sesuai keinginan Anda.

Masukkan Editor Template Tubuh Template

Setelah Anda membuat template, klik 'Add Custom Body' dan lanjutkan dengan memilih 'Build Custom Body' untuk diarahkan ke editor template.

Mulai Membangun Badan Templat Halaman Kategori

Ubah Bagian #1

Warna latar belakang

Di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan tambahkan warna latar belakang putih.

• Warna Latar Belakang: #ffffff

Jarak

Pindah ke tab desain dan hapus semua padding atas dan bawah default berikutnya.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris, lanjutkan ke tab desain dan ubah pengaturan ukuran yang sesuai:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 95%
• Lebar Maks: 2560px
• Penjajaran Baris: Pusat

Jarak

Kami akan menggunakan beberapa bantalan atas dan bawah khusus pada ukuran layar yang lebih kecil juga.

• Padding Atas: 100px (Hanya Tablet & Ponsel)
• Padding Bawah: 100px (Hanya Tablet & Ponsel)

Elemen Utama CSS

Untuk menyelaraskan konten kolom di desktop, kita akan menggunakan dua baris Kode CSS di elemen utama baris. Kami akan mengembalikan properti tampilan di tablet dan ponsel.

Desktop:

display: flex;
align-items: center;

Tablet & Telepon:

display: block;

Kolom 2 Latar Belakang Gradien

Setelah pengaturan baris umum selesai, buka pengaturan kolom kedua dan terapkan latar belakang gradien radial.

• Warna 1: #f7f2ef
• Warna 2: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 20%
• Posisi Akhir: 20%

Spasi Kolom 2

Pindah ke tab desain kolom dan ubah nilai padding khusus di berbagai ukuran layar.

• Padding Atas: 30% (Desktop), 10% (Tablet & Ponsel)
• Padding Bawah: 10%
• Padding Kiri: 5%
• Padding Kanan: 5%

Tambahkan Modul Gambar Woo ke Kolom 1

Konten Dinamis

Saatnya menambahkan modul! Modul pertama yang kita butuhkan di kolom 1 adalah Modul Gambar Woo. Tutorial ini berfungsi paling baik jika Anda menggunakan gambar unggulan dan gambar galeri dengan rasio 1:1. Dengan begitu, kita dapat mengubah gambar menjadi lingkaran dalam langkah-langkah berikutnya. Setelah Anda menambahkan Modul Gambar Woo, pastikan konten dinamis diatur ke 'Produk Ini'.

• Produk: Produk Ini

Tambahkan Modul Kode ke Kolom 1

Tambahkan Kode CSS

Tepat di bawah Modul Gambar Woo, kita akan menambahkan Modul Kode. Kode CSS yang kita masukkan dalam Modul Kode ini akan membantu kita menumpuk gambar galeri woo secara vertikal di sisi kiri kolom kita.

<style>

.single-product div.product .woocommerce-product-gallery .flex-viewport{
width: 80% !important;
float: right;
border-radius: 100vw;
}

.woocommerce-product-gallery__image.flex-active-slide {
width: 12.5% !important;
}

.single-product div.product .woocommerce-product-gallery .flex-viewport img {
width: 100%;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav {
width: 15% !important;
float: left;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li {
width: 100%;
float: none;
}

.et_pb_wc_images div.images ol.flex-control-thumbs.flex-control-nav li img {
border-radius: 100vw;
}

</style>

Tambahkan Modul Judul Woo ke Kolom 2

Konten Dinamis

Ke kolom berikutnya. Di sana, modul pertama 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: PT Sans
• Judul Font Berat: Tebal
• Warna Teks Judul: #000000
• Judul Teks Ukuran: 84px (Desktop), 60px (Tablet), 45px (Telepon)

Tambahkan Modul Deskripsi Woo ke Kolom 2

Konten Dinamis

Ke modul berikutnya, yaitu Modul Deskripsi Woo.

• Produk: Produk Ini
• Jenis Deskripsi: Deskripsi Singkat

Pengaturan Teks

Ubah pengaturan teks modul yang sesuai:

• Font Teks: Karla
• Ukuran Teks: 17px (Desktop& Tablet), 15px (Telepon)
• Tinggi Baris Teks: 1.9em

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa margin atas dan bawah.

• Margin Atas: 5%
• Margin Bawah: 5%

Tambahkan Modul Harga Woo ke Kolom 2

Konten Dinamis

Tambahkan Modul Harga Woo tepat di bawah Modul Deskripsi Woo.

• Produk: Produk Ini

Pengaturan Teks Harga

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

• Harga Font: PT Sans
• Harga Font Berat: Tebal
• Warna Teks Harga: #ce8654
• Ukuran Teks Harga: 27px

Tambahkan Woo Tambahkan ke Keranjang Modul ke Kolom 2

Konten Dinamis

Modul berikutnya dan terakhir yang kita butuhkan untuk menyelesaikan tutorial ini adalah Modul Woo Add to Cart.

• Produk: Produk Ini

Pengaturan Bidang

Pindah ke tab desain dan ubah pengaturan bidang sebagai berikut:

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

• Semua Sudut: 0px
• Lebar Batas Bawah Bidang: 1px
• Warna Batas Bawah Bidang: #ce8654

Pengaturan Tombol

Kemudian, gaya tombol di pengaturan tombol.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #0a0201
• Lebar Batas Tombol: 0px
• Radius Batas Tombol: 100px

• Font Tombol: PT Sans
• Berat Huruf Tombol: Tebal

• Padding Atas Tombol: 20px
• Tombol Bawah Padding: 20px
• Tombol Kiri Padding: 50px
• Tombol Padding Kanan: 50px

Jarak

Dan selesaikan pengaturan modul, dan tutorial ini, dengan menambahkan beberapa margin atas ke Modul Woo Add to Cart. Setelah Anda selesai memodifikasi templat halaman produk, pastikan Anda menyimpan semua perubahan Pembuat Tema sebelum melihat hasilnya di halaman produk Anda!

• Margin Atas: 5%

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 berkreasi dengan halaman produk yang Anda buat menggunakan Divi's Theme Builder dan modul WooCommerce. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menumpuk gambar galeri woo secara vertikal. Pendekatan ini berjalan dengan baik dengan desain halaman produk layar penuh, tetapi dapat berguna untuk semua jenis template halaman produk yang Anda buat. Anda juga dapat mengunduh file JSON 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.