Cara Mengubah Breakpoint Kolom Seluler Modul Divi Shop

Secara default, segera setelah Anda beralih ke perangkat seluler, modul toko berubah menjadi tata letak satu kolom. Sekarang, jika Anda ingin menyorot setiap produk satu per satu, itu bagus, tetapi dengan ukuran layar ponsel cerdas yang lebih besar saat ini, Anda mungkin ingin mengizinkan dua produk muncul bersebelahan saat menggunakan Modul Toko. Dalam tutorial Divi hari ini, kami akan menunjukkan cara mengubah breakpoint seluler modul toko menggunakan CSS, yang memungkinkan dua produk muncul bersebelahan di sebagian besar ponsel cerdas modern. Ini adalah tutorial yang bagus untuk dimiliki jika Anda akan membuat toko online di masa mendatang! Anda juga dapat mengunduh file JSON desain secara gratis!

Mari kita lakukan.

Pratinjau

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

Seluler

Desktop

Unduh Template Halaman Toko GRATIS

Untuk mendapatkan template halaman toko 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. Buka Divi Theme Builder & Tambahkan Template Baru

Buka Divi Theme Builder & Tambahkan Template Baru

Mulailah dengan pergi ke Divi's Theme Builder dan tambahkan template baru.

Gunakan Template di Halaman Toko

Gunakan template baru ini di halaman toko situs web Anda.

• Gunakan Di: Toko

Mulai Membangun Tubuh Template

Dan mulailah membangun tubuh template toko.

2. Mulai Membangun Badan Template

Pengaturan Bagian

Latar Belakang Gradien

Begitu berada di dalam editor template, Anda akan melihat sebuah bagian. Buka bagian itu dan gunakan latar belakang gradien berikut untuk itu:

• Warna 1: #32ff3d
• Warna 2: #29c4a9
• Tipe Gradien: Linier
• Arah Gradien: 109deg

Gambar latar belakang

Unggah juga gambar latar belakang. Anda dapat menemukan gambar latar belakang yang kami gunakan dalam tutorial ini di folder unduhan yang dapat Anda unduh di awal posting ini.

• Ukuran Gambar Latar Belakang: Sesuai

Jarak

Pindah ke tab desain bagian dan ubah nilai spasi yang sesuai:

• Margin Atas: 50px
• Margin Kiri: 50px
• Margin Kanan: 50px
• Padding Bawah: 150px

Berbatasan

Selesaikan pengaturan bagian dengan menambahkan beberapa radius batas.

• Semua Sudut: 20px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Tambahkan Modul Teks ke Kolom

Tambahkan Konten H1

Tambahkan Modul Teks ke kolom baris dengan beberapa konten H1 pilihan Anda.

Pengaturan Teks H1

Ubah pengaturan teks H1 modul yang sesuai:

• Font Judul: Prata
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #ffffff
• Ukuran Teks Judul: 80px (Desktop), 60px (Tablet), 40px (Telepon)

Tambahkan Bagian #2

Indeks Z

Tambahkan bagian lain tepat di bawah yang sebelumnya. Buka pengaturan bagian dan naikkan indeks z.

• Indeks Z: 2

Tambahkan Baris Baru

Struktur Kolom

Kemudian, tambahkan baris baru menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul apa pun, buka pengaturan baris dan tambahkan warna latar belakang.

• Warna Latar Belakang: #ffffff

Perekat

Pindah ke tab desain modul dan ubah pengaturan ukuran sebagai berikut:

• Lebar: 100%
• Lebar Maks: 1380px

Jarak

Kemudian, tambahkan beberapa nilai spasi khusus di berbagai ukuran layar.

• Margin Atas: 200px
• Padding Atas: 50px (Desktop), 20px (Tablet & Ponsel)
• Padding Bawah: 50px (Desktop), 20px (Tablet & Ponsel)
• Padding Kiri: 100px (Desktop), 20px (Tablet & Ponsel)
• Padding Kanan: 100px (Desktop), 20px (Tablet & Ponsel)

Berbatasan

Kami juga menambahkan beberapa radius batas ke seluruh baris.

• Semua Sudut: 25px

Bayangan Kotak

Selesaikan pengaturan baris dengan menambahkan bayangan kotak halus.

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.1)

Tambahkan Modul Toko ke Kolom

Isi

Sekarang, saatnya untuk memasukkan Modul Toko kami. Kami menggunakan tata letak 4 kolom.

• Tata Letak Kolom: 4 Kolom

Hamparan

Pindah ke tab desain modul dan ubah warna overlay.

• Warna Ikon Hamparan: #29c6a6
• Warna Latar Belakang Hamparan: rgba (255,255,255,0,75)

Gambar

Ubah juga pengaturan gambar.

• Semua Sudut: 10px

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.11)

Pengaturan Teks Judul

Lanjutkan dengan mengubah pengaturan teks judul yang sesuai:

• Judul Font: Prata
• Judul Teks Ukuran: 30px (Desktop), 25px (Tablet), 20px (Telepon)

Pengaturan Teks Harga

Selanjutnya, buat beberapa perubahan pada pengaturan teks harga.

• Font Harga: Montserrat
• Harga Font Berat: Sedang
• Harga Teks Ukuran: 18px (Desktop), 16px (Tablet), 14px (Ponsel)

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa padding atas.

• Padding Atas: 50px

Tambahkan Modul Kode ke Kolom

Setelah Anda menyelesaikan keseluruhan desain Shop Module, saatnya untuk memodifikasi breakpoint kolom seluler Shop Module menggunakan CSS. Kami akan menambahkan kode CSS ke Modul Kode di dalam desain kami. Silakan dan tambahkan Modul Kode baru tepat di bawah Modul Toko.

Masukkan Kode CSS

Kami mengurangi breakpoint seluler satu kolom menjadi lebar 300px. Ini berarti bahwa kebanyakan smartphone modern akan menampilkan dua produk bersebelahan, bukan satu. Untuk mewujudkannya, kami akan menambahkan baris kode CSS berikut ke Modul Kode:

<style>
@media (max-width: 479px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 49% !important;
}
}
@media (max-width: 300px) {
.woocommerce-page ul.products li.product:nth-child(n) {
width: 100% !important;
}
}
</style>

3. Simpan Semua Perubahan Pembuat Tema & Hasil Pratinjau

Setelah Anda menyelesaikan desain halaman toko dan menambahkan kode CSS untuk mengubah breakpoint seluler, Anda dapat menyimpan semua perubahan Pembuat Tema dan melihat hasilnya di halaman toko Anda!

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 breakpoint kolom seluler modul toko, yang memungkinkan Anda menampilkan dua produk di samping satu sama lain di sebagian besar smartphone modern saat ini. Ini adalah cara terbaik untuk mengurangi pengguliran seluler yang diperlukan dan menunjukkan lebih banyak produk kepada pengunjung Anda sekaligus. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan, 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.