Cara Menambahkan Gambar Produk Lengket ke Templat Halaman Produk Divi Anda

Ketika datang untuk membeli produk secara online, gambar produk yang bagus sangat penting untuk menutup penjualan. Itu sebabnya sebagian besar halaman produk memiliki gambar produk tersebut di bagian atas halaman sehingga pembeli pertama kali melihat. Namun, saat pengguna menggulir halaman ke bawah untuk melihat informasi lebih lanjut tentang produk (deskripsi, ulasan, dll.), gambar produk utama tidak lagi terlihat. Salah satu cara agar gambar produk tersebut tetap terlihat adalah dengan menambahkan gambar produk melekat yang tetap terlihat saat calon pembeli menelusuri info produk Anda.

Dalam tutorial ini, kami akan menunjukkan cara menambahkan gambar produk lengket ke template halaman produk Divi Anda. Untuk melakukan ini, kami dapat mengoptimalkan modul gambar produk WooCommerce Divi untuk ditampilkan dan tetap di bagian atas halaman seperti gambar produk asli yang tidak terlihat.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas desain yang akan kita buat dalam tutorial ini.

Unduh Tata Letaknya GRATIS

Untuk mendapatkan desain dari tutorial ini, 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!

https://youtu.be/vwfPFqyVaNM

Berlangganan Saluran Youtube Kami

Cara Mengunggah Template

Pergi ke Divi Theme Builder

Untuk mengunggah template, navigasikan ke Divi Theme Builder di bagian belakang situs WordPress Anda.

Unggah Templat Situs Web

Kemudian, di sudut kanan atas, Anda akan melihat ikon dengan dua panah. Klik pada ikon.

Arahkan ke tab impor, unggah file JSON yang dapat Anda unduh di posting ini, dan klik 'Impor Template Pembuat Tema Divi'.

Simpan Perubahan Pembuat Tema Divi

Setelah Anda mengunggah file, Anda akan melihat template baru dengan area tubuh baru yang telah ditetapkan ke Semua Postingan. Simpan perubahan Divi Theme Builder segera setelah Anda ingin template diaktifkan.

Mari kita ke tutorialnya agar kita bisa belajar membuat benda ini dari awal, ya?

Cara Menambahkan Gambar Produk Lengket ke Templat Halaman Produk Divi Anda

Mengunggah Template Halaman Produk Paket 5 Pembuat Tema

Untuk memulai, kita akan memulai desain dengan menambahkan salah satu template halaman produk yang sudah jadi. Untuk mengimpor template Pembuat Tema, Anda harus melakukan hal berikut:

1. Navigasikan ke Pembuat Tema Divi
2. Klik ikon portabilitas di kanan atas halaman.
3. Pilih tab Impor di popup Portabilitas.
4. Unduh dan Impor File Templat Produk Divi Divi Theme Builder 5. Setelah Anda mengunduh paket di sini, unzip file dan Anda akan menemukan file "divi-theme-builder-pack-5-product-page-template.json" yang perlu Anda impor.
5. Klik Tombol Impor
6. Setelah template diimpor, klik ikon edit pada area badan kustom template untuk mengedit tata letak template.

Tambahkan Baris Baru

Kami ingin gambar produk ditampilkan setelah pengguna menggulir melewati bagian atas yang sudah menyertakan gambar produk (tidak perlu ditampilkan di sana). Oleh karena itu, kita akan menambahkannya ke bagian baru di bawah bagian atas tata letak.

Silakan dan tambahkan bagian reguler baru di bawah bagian atas.

Buka pengaturan bagian baru dan perbarui padding:

• Padding: 0px atas, 0px bawah

Buka tab lanjutan dan perbarui indeks z:

• Indeks Z: 13

Ini agar gambar (elemen anak dari bagian ini) akan tetap berada di atas bagian/elemen lain pada halaman saat menggulir.

Tambahkan Baris

Selanjutnya, tambahkan baris satu kolom di bagian tersebut.

Buka pengaturan baris dan sesuaikan perataan dan bantalan baris:

• Penjajaran Baris: Kanan
• Padding: 0px atas, 0px bawah

Tambahkan Gambar Produk

Sekarang kita siap untuk menambahkan gambar produk yang pada akhirnya akan menempel di bagian atas halaman pada scroll. Untuk menambahkan gambar produk, salin modul gambar produk yang ada di bagian atas, dan tempel ke baris baru kami.

Pengaturan Gambar Woo

Buka pengaturan untuk modul gambar woo baru dan sesuaikan konten sebagai berikut:

• Tampilkan Gambar Galeri: OFF
• Tampilkan Lencana Penjualan: MATI

(CATATAN: Anda dapat menyimpan gambar galeri jika Anda mau. Berhati-hatilah agar tidak memakan terlalu banyak ruang karena modul gambar ini akan melayang di atas elemen lain pada halaman.)

Di bawah tab desain, perbarui opsi Force Fullwidth ke "YA".

Kemudian perbarui yang berikut ini:

• Lebar Maks: 300px (desktop), 200px (ponsel)
• Penyelarasan Modul: Kanan

Menyesuaikan bantalan:

• Padding: 10px atas, 10px kanan

Di bawah tab lanjutan, perbarui yang berikut ini:

• Indeks Z: 1
• Posisi Lengket: Menempel ke Atas

Ini akan menyebabkan gambar menempel di bagian atas halaman setelah pengguna menggulir melewati gambar itu.

Setelah posisi lengket berada di tempatnya, kembali ke tab desain dan gunakan opsi lengket untuk memperbarui filter opacity sehingga menyembunyikan gambar hingga menjadi lengket. Anda dapat menerapkan opsi gaya lengket dengan mengarahkan kursor ke pengaturan dan mengklik ikon thumbnail.

• Opacity: 0% (desktop), 100% (lengket)

Hapus Spasi Bagian, Baris, dan Kolom

Saat ini, kami memiliki beberapa jarak yang tidak diinginkan yang digunakan gambar produk baru dalam alur tata letak kami. Untuk menghapus spasi itu, yang perlu kita lakukan adalah memberi kolom nilai tinggi khusus yang "0" atau sesuatu yang sangat rendah. Gambar produk akan tetap terlihat/meluap meskipun memiliki kolom tanpa ketinggian sebenarnya.

Buka pengaturan kolom dan tambahkan CSS Kustom berikut ke Elemen Utama:

height: 15px;

Itu dia! Kita semua sudah selesai.

Hasil Akhir

Lihat hasil akhir dengan melihat postingan langsung di situs Anda.

Pikiran Akhir

Menambahkan gambar produk tempel ke templat halaman produk Anda di Divi adalah cara cepat dan mudah untuk menjaga produk Anda tetap terlihat saat pengunjung menjelajahi produk Anda. Dan, Anda juga dapat memilih untuk menempelkan tombol Tambahkan ke Keranjang di sebelahnya juga menggunakan teknik yang sama. Bagaimanapun, mudah-mudahan, ini akan membantu Anda dengan proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!