Membuat situs Anda tampil baik di ponsel dan tablet
Lihat tampilan toko Anda di tablet dan ponsel, sembunyikan blok di layar kecil, dan atur posisi blok untuk satu ukuran layar saja.
Sebagian besar pembeli mengunjungi toko dari ponsel, jadi halaman Anda harus berfungsi di setiap ukuran. Anda mendesain sekali, dan Payly menyesuaikan halaman untuk tablet dan ponsel. Artikel ini menjelaskan apa yang terjadi dengan sendirinya dan cara mengubahnya saat Anda ingin sebuah blok berperilaku berbeda di layar yang lebih kecil.
Cara tata letak Anda menyesuaikan diri
Blok berada di sel grid 12 kolom, tidak pernah di posisi piksel tetap, sehingga blok tidak dapat saling tumpang tindih di layar kecil. Halaman berganti tata letak di dua titik:
- Tablet (layar yang lebih sempit dari 1.024 piksel) tetap menggunakan grid yang sama. Blok tetap di tempatnya kecuali Anda memindahkannya untuk tablet.
- Ponsel (760 piksel atau lebih sempit) menempatkan setiap blok di barisnya sendiri dengan lebar penuh. Blok tersusun dari atas ke bawah sesuai urutan yang Anda baca di desktop: dari atas ke bawah, lalu dari kiri ke kanan.
Beberapa blok menyesuaikan diri lebih jauh. Tautan header dilipat ke balik tombol menu, grid menciut menjadi satu kolom, dan galeri serta deretan logo menampilkan dua kolom. Hasilnya adalah toko yang berfungsi di ponsel tanpa pengaturan tambahan.
Ganti ukuran layar
- Di bilah atas editor, klik Tablet atau Ponsel. Halaman menyempit untuk menunjukkan tampilannya pada ukuran tersebut.
- Periksa halaman untuk bagian yang tidak tampak baik. Gulir, dan pilih blok seperti biasa.
- Klik Desktop untuk kembali ke tata letak ukuran penuh.
Tombol-tombol ini lebih dari sekadar pratinjau. Tombol ini juga menentukan tata letak mana yang sedang Anda edit. Saat Anda beralih ke Tablet atau Ponsel, sebuah pesan mengingatkan bahwa perubahan hanya berlaku untuk ukuran itu. Apa pun yang Anda ubah di sana tidak memengaruhi tata letak desktop.
Sembunyikan blok di layar kecil
Foto besar atau blok dekoratif yang panjang dapat memenuhi layar ponsel. Anda dapat menyembunyikannya di layar kecil dan tetap menampilkannya di desktop.
- Klik Ponsel (atau Tablet) di bilah atas.
- Pilih blok.
- Di panel pengaturan, buka Ukuran dan posisi.
- Nyalakan Sembunyikan di ponsel (atau Sembunyikan di tablet). Blok itu hilang dari tampilan tersebut dan tidak meninggalkan celah kosong di halaman yang sudah tayang.
Blok yang disembunyikan di tablet juga disembunyikan di ponsel, kecuali Anda mematikan sakelar itu lagi saat melihat Ponsel. Untuk menyembunyikan blok di setiap layar, gunakan Sembunyikan blok ini di Desktop.
Tempatkan blok secara berbeda di satu ukuran
- Pilih Tablet atau Ponsel di bilah atas.
- Pilih blok, lalu buka Ukuran dan posisi.
- Ubah Mulai dari kolom, Lebar kolom, Mulai dari baris, atau Tinggi baris, atau klik Isi seluruh lebar. Anda juga dapat menyeret dan mengubah ukuran blok di halaman.
Bilah di bagian atas Ukuran dan posisi menyebutkan tata letak mana yang sedang Anda edit. Bilah itu menampilkan Diwarisi selama blok mengikuti ukuran yang lebih besar, dan tombol Atur ulang setelah blok memiliki pengaturannya sendiri. Klik Atur ulang agar blok kembali mengikuti ukuran yang lebih besar. Klik Gunakan tata letak ini di semua layar untuk menyalin tata letak saat ini ke setiap ukuran.
Bilah atas juga menghitung blok yang berbeda dari tata letak desktop, misalnya 1 blok berbeda di ponsel. Klik angka itu untuk berpindah dari satu blok seperti itu ke blok berikutnya.
Jaga blok tetap sama di setiap layar
Aktifkan Sama di semua layar di Ukuran dan posisi agar blok memiliki satu tata letak di mana saja. Setiap pengaturan untuk tablet atau ponsel yang pernah dimiliki blok itu akan dihapus, dan perubahan berikutnya berlaku untuk setiap ukuran sekaligus.
Catatan: Memindahkan blok ke bagian lain akan mengubahnya di setiap ukuran layar, sehingga Payly hanya mengizinkannya di Desktop. Untuk menempatkan blok secara berbeda di ponsel, tambahkan blok ke kedua bagian dan sembunyikan yang tidak Anda inginkan di setiap ukuran.
Periksa hasilnya
Gunakan Pratinjau untuk menelusuri halaman Anda pada lebar ponsel dan tablet, dan lihat toko yang sudah dipublikasikan di ponsel sungguhan sebelum Anda mengumumkannya. Lihat Pratinjau situs Anda sebelum dipublikasikan.