Mengubah Modul Toko Divi menjadi Kartu Gesek Produk Dinamis di Seluler

Saat membuat halaman arahan untuk produk tertentu, apakah itu peluncuran baru atau penjualan yang sedang Anda persiapkan, kemungkinan besar Anda akan menggunakan Modul Toko di beberapa titik. Modul Toko Divi memungkinkan Anda untuk secara dinamis menarik produk dari plugin WooCommerce dan menata produk menggunakan opsi bawaan Divi. Sekarang, secara default, modul toko hadir dengan beberapa struktur kolom yang semuanya diterjemahkan menjadi dua kolom pada ukuran layar yang lebih kecil. Ini berarti bahwa semakin banyak produk yang Anda pilih untuk ditampilkan, semakin banyak pengguliran vertikal yang diperlukan untuk sampai ke bagian selanjutnya dari halaman arahan Anda.

Dalam desain web modern, teknik yang sering digunakan untuk membatasi pengguliran vertikal dan menampilkan item berdasarkan preferensi pengunjung Anda adalah menggunakan kartu gesek. Dalam tutorial ini, kami akan menunjukkan cara mengubah Modul Divi Shop menjadi kartu gesek produk dinamis pada ukuran layar yang lebih kecil tanpa menggunakan plugin. Kami akan mulai dengan menyiapkan elemen yang berbeda di bagian produk kami dan menggunakan sedikit kode CSS untuk mengaktifkan efek gesek. Ini adalah cara yang bagus untuk menampilkan berbagai macam produk dalam halaman arahan Anda tanpa membebani pengunjung Anda. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat dulu hasilnya. Kami hanya mengaktifkan kartu gesek produk di tablet dan seluler. Di desktop, kami menyimpan struktur kolom yang kami tentukan di dalam Modul Toko.

Seluler

Desktop

Unduh Tata Letak Kartu Gesek Produk GRATIS

Untuk mendapatkan tata letak kartu gesek 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!

1. Siapkan WooCommerce & Halaman Produk

Sebelum masuk ke bagian Divi dari tutorial ini, penting untuk menginstal dan mengaktifkan plugin WooCommerce di situs web Anda. Jika Anda belum melakukannya, tambahkan beberapa produk, tergantung pada berapa banyak produk yang ingin Anda tampilkan di Modul Toko Anda.

2. Buat Halaman Baru & Unggah Tata Letak Halaman Landing Stationery

Buat Halaman Baru

Setelah Anda memiliki produk, tambahkan halaman baru di dalam backend WordPress Anda. Beri judul pada halaman Anda, publikasikan halaman dan aktifkan Divi's Visual Builder.

Unggah Tata Letak Halaman Arahan Alat Tulis

Setelah masuk ke halaman baru Anda, navigasikan ke tata letak yang telah dibuat sebelumnya dan unggah tata letak Halaman Landing Toko Alat Tulis. Meskipun kami menggunakan tata letak khusus ini, Anda bebas menggunakan tata letak lain pilihan Anda, selama Anda menambahkan atau menemukan modul toko di dalam tata letak itu.

3. Ubah Bagian Toko

Temukan Bagian dengan Modul Toko

Jika kita menggulir ke bawah halaman baru yang telah kita buat menggunakan tata letak Halaman Landing Toko Alat Tulis, kita akan menemukan bagian dengan Modul Toko. Kami akan menggunakan bagian ini sepanjang langkah selanjutnya dari tutorial ini.

Pengaturan Baris

Ukuran Responsif

Mulailah dengan membuka pengaturan baris dari baris yang berisi Modul Toko. Seperti yang disebutkan sebelumnya, kami mempertahankan desain yang sama di desktop, kami hanya akan mengaktifkan kartu gesek produk pada ukuran layar yang lebih kecil. Untuk menciptakan pengalaman yang mudah, kami akan mengizinkan baris menyentuh sisi kiri dan kanan layar kami dengan mengubah lebar dalam pengaturan ukuran.

• Gunakan Lebar Talang Kustom: 1
• Lebar: 80% (Desktop), 100% (Tablet & Ponsel)

Visibilitas

Kami juga akan memastikan tidak ada yang melebihi penampung baris dengan menyetel pengaturan visibilitas ke tersembunyi.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Pengaturan Modul Toko

Pilih Jumlah Produk & Struktur Kolom Desktop Pilihan

Kemudian, kita akan membuka pengaturan Shop Module. Perubahan yang kami buat di Kode CSS kami (yang akan kami tambahkan nanti) bergantung pada jumlah produk yang kami tampilkan. Kami akan mulai dengan menunjukkan cara mengubah Modul Toko dengan 8 produk menjadi kartu gesek produk. Anda dapat memilih tata letak kolom pilihan Anda untuk desktop.

• Jumlah Produk: 8
• Tata Letak Kolom: 4 Kolom

Ukuran Responsif

Untuk menambah ukuran modul toko kami, kami akan mengubah pengaturan ukuran di tab desain. Perhatikan bagaimana kami hanya melakukan ini untuk tablet dan ponsel.

• Lebar: 100% (Desktop), 250% (Tablet & Ponsel)
• Lebar Maks: 100% (Desktop), 250% (Tablet & Ponsel)

Kelas CSS

Kami juga akan menambahkan kelas CSS ke modul toko kami. Kemudian, ketika kita menambahkan kode CSS, kita akan dapat mengubah Modul Toko yang hanya membawa kelas CSS ini. Dengan kata lain, jika Anda ingin Modul Toko lain muncul dalam keadaan normal, meninggalkan kelas CSS ini akan memungkinkan Anda melakukannya.

• Kelas CSS: kartu gesek produk

Meluap Responsif

Kami akan menyelesaikan pengaturan baris dengan mengubah pengaturan visibilitas di berbagai ukuran layar. Seperti yang dapat Anda perhatikan di pengaturan, kami hanya ingin efek gulir terjadi pada ukuran layar yang lebih kecil.

• Luapan Horizontal: Tersembunyi (Desktop), Gulir (Tablet & Ponsel)
• Overflow Vertikal: Tersembunyi

Tambahkan Modul Kode Di Bawah Modul Toko

Setelah Anda memodifikasi Modul Toko, Anda dapat menambahkan Modul Kode tepat di bawahnya.

Tambahkan Kode CSS ke Modul

Kode CSS berikut akan secara otomatis mengubah Modul Toko 8 produk kami menjadi kartu gesek produk yang responsif:

<style>

@media all and (max-width: 980px) {
   
.product-swipe-cards ul.products {
display: grid !important;
grid-template-columns: repeat(8, 8.8%) !important;
grid-column-gap: 0.7%;
}

.product-swipe-cards .woocommerce ul.products::before {
content: none;
display: block;
}
  
.product-swipe-cards.et_pb_shop ul.products li.product {
width: 100% !important;
}

.product-swipe-cards .woocommerce {
width: 255% !important;
margin-left: 5%;
}
  
.product-swipe-cards::-webkit-scrollbar {
display: none;
}
  
.product-swipe-cards {
-ms-overflow-style: none;
}

}

</style>

Mencocokkan Jumlah Produk yang Berbeda

Sekarang, jika Anda ingin menambahkan lebih sedikit (atau lebih) produk di modul toko Anda, kodenya sedikit berubah di dua tempat. Kedua tempat ini harus dimodifikasi secara manual agar sesuai dengan hasil yang diinginkan. Mari kita ubah jumlah produk di Modul Toko kita menjadi '4', misalnya.

• Jumlah Produk: 4

Ketika kita kembali ke kode kita, ada dua perubahan yang harus kita buat. Pertama, kita harus mengubah kolom template grid. Alih-alih 8, kami menggunakan 4 (nomor yang sama dengan jumlah produk kami). Kami juga meningkatkan ukuran dalam persentase yang digunakan produk ini di kartu gesek produk kami (semakin banyak produk, semakin sedikit ruang).

grid-template-columns: repeat(4, 14%) !important;

Kemudian, kami juga akan mengubah lebar wadah tempat produk ditempatkan. Untuk 4 produk, ini sama dengan 150%. Nilai-nilai ini tidak ditentukan, mereka dicapai dengan bermain-main dan menemukan keselarasan antara kolom template kisi dan lebar wadah. Untuk menemukan keseimbangan yang tepat, alihkan ke tampilan seluler di dalam Visual Builder dan sesuaikan nilainya dengan hati-hati saat melihat hasil dari perubahan ini.

width: 150% !important;

Tambahkan Snapping Gulir

Jika Anda ingin membawa pengalaman pengguna selangkah lebih maju dalam desain kartu gesek produk Anda, Anda juga dapat menambahkan gertakan gulir. Gulir gertakan membantu pengunjung Anda menggulir dengan menjentikkan ke awal produk baru. Ini berarti gesekan mereka tidak harus tepat, gertakan gulir pada satu titik akan mengambil alih dan menunjukkan menyesuaikan posisi mereka di dalam mekanisme pengguliran horizontal. Untuk mengaktifkan gertakan gulir pada kartu gesek produk Anda, tambahkan satu baris kode CSS ke setiap produk satu per satu dalam kode CSS (lihat layar cetak di bawah).

scroll-snap-align: start

Kami juga akan mengaktifkan gertakan gulir pada modul toko kami dengan menambahkan baris kode CSS berikut:

scroll-snap-type: x mandatory

Gunakan Kembali Modul Toko untuk Menampilkan Kategori Lainnya

Klon Seluruh Baris Sekali

Setelah Anda menyelesaikan set kartu gesek produk pertama, Anda dapat mengkloning seluruh baris satu kali.

Hapus Modul Kode di Baris Duplikat

Selama Modul Toko Anda berisi kelas CSS yang sama dengan yang sebelumnya, satu Modul Kode akan berfungsi. Silakan dan hapus Modul Kode di baris duplikat Anda.

Klon Duplikat Baris Sebanyak yang Diinginkan

Dan kloning baris duplikat sekarang sebanyak yang diperlukan, tergantung pada berapa banyak set kartu gesek produk yang ingin Anda tampilkan di halaman arahan Anda!

4. Simpan Perubahan Halaman & Lihat Hasil di Perangkat Seluler

Pastikan bahwa setelah Anda selesai menambahkan kartu gesek produk, Anda menyimpan halaman Anda sebelum keluar dari Visual Builder dan selesai!

Pratinjau

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

Seluler

Desktop

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara mengubah Modul Divi Shop bawaan menjadi kartu gesek produk pada ukuran layar yang lebih kecil. Di desktop, kami telah mempertahankan struktur kolom asli yang ditetapkan ke Modul Toko. Menggunakan kartu gesek produk memungkinkan Anda menambahkan produk tanpa akhir ke mekanisme gesek horizontal tanpa membebani pengunjung Anda dengan pengguliran vertikal.

Ini adalah tren yang sering digunakan dalam desain web modern karena berfokus pada perilaku pengguna dan memudahkan untuk mengakses berbagai item pada ukuran layar yang lebih kecil. Anda dapat menggunakan kartu gesek produk ini di halaman mana pun yang Anda inginkan, tetapi ini sangat nyaman untuk halaman arahan produk yang Anda buat. 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.