Saat Anda membuat halaman arahan untuk produk tertentu, apakah itu peluncuran baru atau penjualan yang Anda persiapkan, kemungkinan besar Anda akan menggunakan modul Toko di beberapa titik. Modul Divi Shop memungkinkan Anda mengekstrak produk secara dinamis dari plugin WooCommerce dan menatanya 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. Artinya, semakin banyak produk yang Anda pilih untuk ditampilkan, semakin banyak pengguliran vertikal yang diperlukan untuk sampai ke bagian selanjutnya dari laman landas Anda.

Dalam desain web modern, teknik yang sering digunakan untuk membatasi pengguliran vertikal dan menampilkan elemen sesuai dengan preferensi Anda. pengunjung adalah dengan menggunakan kartu magnetik. Dalam tutorial ini, kami akan menunjukkan kepada Anda cara mengubah modul toko Divi menjadi kartu produk dinamis pada ukuran layar yang lebih kecil tanpa menggunakan plugin. 

Kita akan mulai dengan menyiapkan berbagai elemen bagian produk kita dan menggunakan sedikit kode CSS untuk mengaktifkan efek gesek. Ini cara yang bagus untuk memamerkan berbagai macam produk di laman landas Anda tanpa membuat Anda kewalahan pengunjung

Kemungkinan Hasil

Sebelum kita menyelami tutorialnya, mari kita lihat hasilnya. Kami hanya mengaktifkan kartu magnetik produk di tablet dan ponsel. Di desktop, kami menyimpan struktur kolom yang kami tentukan di modul Shop.

Animasi toko modul produk Divi

1. Konfigurasikan WooCommerce dan halaman produk

Sebelum memasuki bagian Divi dari tutorial ini, penting bahwa plugin WooCommerce diinstal dan diaktifkan di situs jaringan. Jika Anda belum melakukannya, tambahkan beberapa produk, tergantung pada berapa banyak produk yang ingin Anda tampilkan di modul Toko Anda.

Buat produk woocommerce

2. Buat halaman baru dan unduh tata letak halaman alat tulis

Buat halaman baru

Setelah produk tersedia, tambahkan halaman baru di backend WordPress Anda. Beri judul halaman Anda, publikasikan halaman dan aktifkan Divi Visual Builder.

Buat halaman divi
Buat halaman divi baru

Unduh tata letak halaman arahan

Setelah masuk ke halaman baru Anda, navigasikan ke tata letak prasetel Anda dan unduh tata letak halaman arahan alat tulis. Meskipun kami menggunakan tata letak khusus ini, Anda bebas menggunakan tata letak lain yang Anda inginkan, selama Anda menambahkan atau menemukan modul penyimpanan di dalam tata letak ini.

Pilih tata letak divi

3. Ubah bagian toko

Temukan bagian dengan modul Toko

Jika kita menggulir ke bawah ke halaman baru yang kita buat menggunakan tata letak halaman rumah alat tulis, kita akan menemukan bagian dengan modul toko. Kami akan menggunakan bagian ini di seluruh langkah selanjutnya dari tutorial ini.

Temukan modul toko

Pengaturan saluran

Ukuran responsif

Mulailah dengan membuka pengaturan baris dari baris yang berisi modul Shop. Seperti yang disebutkan sebelumnya, kami tetap menggunakan desain yang sama di desktop, kami hanya akan mengaktifkan kartu magnet produk pada ukuran layar yang lebih kecil. 

Untuk membuat pengalaman yang mudah, kami akan memungkinkan baris menyentuh sisi kiri dan kanan layar kami dengan mengubah lebar dalam pengaturan ukuran.

  • Gunakan lebar selokan khusus: 1
  • Lebar: 80% (desktop), 100% (tablet dan telepon)
Modifikasi desain responsif

jarak penglihatan

Kami juga akan memastikan bahwa tidak ada yang melampaui wadah baris dengan mengatur pengaturan visibilitas ke tersembunyi.

  • Overflow horisontal: disembunyikan
  • Overflow vertikal: disembunyikan
Konfigurasi visibilitas Divi

Pengaturan modul toko

Pilih jumlah produk dan struktur kolom kantor pilihan Anda

Selanjutnya, kita akan membuka pengaturan modul Shop. Perubahan yang kita buat pada kode CSS kita (yang akan kita tambahkan nanti) bergantung pada jumlah produk yang kita tampilkan. 

Kami akan mulai dengan menunjukkan cara mengubah modul toko dengan 8 produk menjadi kartu produk. Anda dapat memilih tata letak kolom apa pun yang Anda inginkan untuk desktop.

  • Jumlah produk: 8
  • Tata letak kolom: 4 kolom
Ubah desain kolom divi

Ukuran responsif

Untuk meningkatkan ukuran modul toko kami, kami akan mengubah parameter ukuran di tab desain. Perhatikan bahwa kami hanya melakukan ini untuk tablet dan ponsel.

  • Lebar: 100% (desktop), 250% (tablet dan telepon)
  • Lebar maksimum: 100% (meja), 250% (tablet dan telepon)
Konfigurasi desain responsif

Kelas CSS

Kami juga akan menambahkan kelas CSS ke modul toko kami. Nanti, saat kita menambahkan kode CSS, kita bisa mengubah modul Shop yang hanya membawa kelas CSS ini. Dengan kata lain, jika Anda ingin modul Shop lain muncul dalam keadaan normal, meninggalkan kelas CSS ini akan memungkinkan Anda untuk melakukannya.

  • Kelas CSS: kartu gesek-produk
Ubah atribut css module store divi

Meluap reaktif

Kami akan melengkapi pengaturan garis dengan mengubah pengaturan visibilitas pada ukuran layar yang berbeda. Seperti yang Anda lihat di pengaturan, kami hanya ingin efek gulir terjadi pada ukuran layar yang lebih kecil.

  • Overflow horisontal: tersembunyi (meja), gulir (tablet dan telepon)
  • Overflow vertikal: disembunyikan
Konfigurasi overflow

Tambahkan modul kode di bawah modul Toko

Setelah Anda memodifikasi modul Toko, Anda dapat menambahkan modul kode tepat di bawah.

Tambahkan modul kode di bawah modul toko divi

Tambahkan kode CSS ke modul

Kode CSS berikut akan secara otomatis mengubah modul 8 produk toko kami menjadi kartu magnetik reaktif:

<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>

Tambahkan kode divi css

Cocokkan dengan berbagai akun produk

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

  • Jumlah produk: 4
Cocokkan akun produk yang berbeda

Saat kita kembali ke kode kita, kita perlu membuat dua perubahan. Pertama, kita perlu memodifikasi kolom template grid. Alih-alih 8, kami menggunakan 4 (nomor yang sama dengan jumlah produk kami). Kami juga meningkatkan ukuran persentase yang ditempati produk ini di lembar produk kami (semakin banyak produk, semakin sedikit ruang).

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

Kemudian kami juga akan mengubah lebar wadah tempat produk ditempatkan. Untuk 4 produk, ini setara dengan 150%. Nilai-nilai ini tidak tetap, mereka diperoleh dengan memainkan dan menemukan keserasian antara kolom-kolom model kisi dan lebar wadah. 

Untuk menemukan keseimbangan yang tepat, alihkan ke tampilan seluler di dalam Visual Builder dan sesuaikan nilainya dengan hati-hati sambil melihat hasil dari perubahan tersebut.

width: 150%!important;

Tambahkan kode css divi tambahan

Tambahkan snap ke gulir

Jika Anda ingin membawa pengalaman pengguna lebih jauh dalam desain kartu gesek, Anda juga dapat menambahkan snap gulir. Tangkapan gulir memungkinkan Anda pengunjung untuk menggulir dengan menetapkan awal produk baru.

 Ini berarti pemindaian mereka tidak perlu tepat, scroll slam akan mengambil alih di beberapa titik dan tampilan menyesuaikan posisinya di dalam mekanisme gulir samping. 

Untuk mengaktifkan tangkapan gulir pada kartu gesek produk Anda, tambahkan sebaris kode CSS ke setiap produk satu per satu dalam kode CSS (lihat layar cetak di bawah).

scroll-snap-align: mulai

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

scroll-snap-type: x wajib

Sesuaikan kode css

Gunakan kembali modul lokakarya untuk menampilkan kategori lain

Klon seluruh baris sekali

Setelah Anda menyelesaikan set kartu magnetik pertama, Anda dapat mengkloning seluruh saluran satu kali.

Gunakan kembali modul lokakarya divi

Hapus modul kode dalam garis rangkap

Selama modul toko Anda berisi kelas CSS yang sama dengan yang sebelumnya, modul kode dapat digunakan. Lanjutkan dan hapus modul kode di baris duplikat Anda.

Gandakan modul kode divi

Kloning garis duplikat sebanyak yang Anda inginkan

Dan tiru garis duplikat sekarang sebanyak yang diperlukan, tergantung pada jumlah set kartu gesek yang ingin Anda tampilkan di halaman arahan Anda!

Gandakan modul sebanyak yang diperlukan
Modul divi duplikat

4. Simpan perubahan halaman dan lihat hasilnya di perangkat seluler

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

Pratinjau demo di perangkat seluler

penelitian

Sekarang setelah kita melalui semua langkah, mari kita lihat terakhir bagaimana tampilannya pada berbagai ukuran layar.

Animasi toko modul produk Divi

final pikiran

Pada artikel ini, kami telah menunjukkan kepada Anda cara mengubah modul Divi Shop terintegrasi menjadi kartu magnetik produk pada ukuran layar yang lebih kecil. Di desktop, kami menyimpan struktur kolom asli yang ditetapkan ke modul Shop. 

Menggunakan peta gesekan produk memungkinkan Anda menambahkan produk tanpa akhir ke mekanisme gesekan horizontal tanpa membebani pengunjung pengguliran vertikal Anda.

Ini adalah tren yang sering digunakan dalam desain situs web modern karena berfokus pada perilaku pengguna dan membuatnya lebih mudah untuk mengakses berbagai elemen di layar yang lebih kecil.

 Anda dapat menggunakan lembar produk ini di halaman mana pun, tetapi ini sangat berguna untuk halaman landing produk apa pun yang Anda buat. Anda juga dapat mengunduh file JSON untuk tata letak secara gratis! 

Jika Anda memiliki pertanyaan atau saran, silakan tinggalkan komentar di bagian komentar di bawah.