Loncat ke Konten Utama

Ubah modul Divi Shop menjadi peta produk dinamis di ponsel

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

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 Toko Divi memungkinkan Anda untuk secara dinamis mengekstrak produk 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 elemen tampilan sesuai dengan preferensi pengunjung Anda adalah dengan menggunakan kartu magnetik. Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana mengubah modul toko Divi menjadi peta produk dinamis pada ukuran layar yang lebih kecil tanpa menggunakan plugin. 

Kami akan mulai dengan menyiapkan berbagai elemen di bagian produk kami dan menggunakan sedikit kode CSS untuk mengaktifkan efek sapuan. Ini adalah cara yang bagus untuk memamerkan berbagai macam produk di halaman arahan Anda tanpa membuat pengunjung Anda kewalahan. 

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 sudah diinstal dan diaktifkan di situs Anda. Jika Anda belum melakukannya, tambahkan beberapa produk, tergantung pada jumlah 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. 

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

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. 

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

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 selangkah lebih maju dalam desain kartu gesek Anda, Anda juga dapat menambahkan sekejap gulir. Tangkapan gulir memungkinkan pengunjung Anda untuk menggulir dengan menatap 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.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [Rekomendasi]

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.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
0 saham
saham
menciak
Register