Melihat preview versi mobile untuk situs web WordPress adalah langkah penting yang tidak boleh dilewatkan. Sebab dari sana kamu bisa melihat seperti apa tampilan situs webmu saat dibuka oleh pembaca dari perangkat mobile. Ini akan sangat membantu tahap pengembangan dan penyusunan tata letak elemen.
Hal ini bisa dilakukan dengan mudah bahkan tanpa harus membukanya lewat ponsel. Jadi saat melakukan suatu perubahan, kamu bisa langsung melihat efeknya dalam tampilan mobile. Pada artikel kali ini kita akan membahas tentang mengapa preview tampilan mobile itu penting dan bagaimana cara melakukannya.
Pentingnya Melihat Preview Tampilan Mobile Situs Web
Situs webmu mungkin akan menerima kunjungan dari pengguna ponsel lebih banyak daripada pengguna komputer. Jadi, tentu sangat penting untuk selalu melihat preview situs webmu dalam tampilan mobile saat melakukan perubahan.
Bahkan meskipun kamu sudah menggunakan tema WordPress yang responsif , tetap saja ada beberapa bagian yang harus diubah secara manual. Ditambah lagi sekarang Google telah mengutamakan situs web yang mobile friendly dalam algoritma hasil pencariannya.
Ada dua cara untuk melihat tampilan situs web kamu dari perangkat mobile. Meski hasil pengujian ini tidak sepenuhnya sempurna karena penyesuaian layar yang berbeda, tetapi cara ini terbukti cukup efektif untuk pengembang web. Pada langkah akhir kamu harus tetap membuka situs webmu dari ponsel.
1. Menggunakan Menu Customize WordPress
Saat melakukan penyesuaian tema di WordPress, layar akan terbagi menjadi dua dengan bagian sebelah kiri adalah menu ‘Customize’. Mungkin kamu tidak menyadari bahwa ada sebuah tombol untuk melihat tampilan mobile pada menu tersebut.
Untuk mendapatkan tampilan ini, kamu cukup membuka dashboard WordPress, klik ‘Appearance’ lalu pilih ‘Customize’. Saat tampilan menu Customize muncul, klik ikon ponsel di bagian bawah menu tersebut.
Mode tampilan mobile ini sangat berguna ketika kamu menyusun tata letak elemen atau dalam mode pemeliharaan. Bahkan kamu juga bisa langsung mengedit elemennya dari tampilan mobile.
2. Menggunakan Inspect Element
Cara berikutnya ini hanya berlaku untuk browser Google Chrome atau browser lain yang menggunakan engine serupa, seperti Yandex Browser, UC Browser dan lain-lain. Dengan menggunakan menu ‘Inspect Element’, kamu bisa membuka preview situs web dalam tampilan mobile.
Caranya cukup buka situs yang ingin kamu preview di browser Chrome atau sejenisnya. Klik kanan di area halaman tersebut lalu klik ‘Inspect’ atau ‘Inspect Element’ atau tekan tombol Ctrl + Shift + I secara bersamaan.
Secara default, kotak pengembangan berada di bagian bawah layar, sedangkan untuk melihat tampilan mobile secara penuh, kamu perlu memindahkan kotak tersebut ke sisi kiri atau kanan layar. Caranya klik menu pengaturan (ikon tiga titik vertikal), lalu pada ‘Dock Side’ pilih ‘Dock to Left’ atau ‘Dock to Right’.
Selanjutnya, klik tombol ‘Toggle Device Toolbar’ untuk mengubah preview ke tampilan mobile atau tekan tombol Ctrl + Shift + M secara bersamaan. Sekarang kamu bisa melihat bagaimana preview situs webmu dari perangkat ponsel.
Untuk menyesuaikan ukuran layar kamu juga bisa mengubahnya di bagian atas layar. Pada bagian ‘Responsive’ pilih jenis smartphone yang ingin kamu preview tampilannya. Bisa juga diubah dengan ukuran yang disesuaikan secara manual dengan menentukan panjang dan lebar sendiri.
Dalam tampilan mobile, kursor mouse akan berubah menjadi lingkaran untuk mensimulasikan jari kamu di layar sentuh. Kamu juga bisa melakukan gerakan zoom in dan zoom out dengan cara menekan dan menahan tombol Shift sambil menggerakkan mouse ke depan (zoom in) dan ke belakang (zoom out).
Penutup
Selain mengatur tata letak, membuat konten khusus untuk tampilan mobile juga tidak boleh sembarangan. Biasanya dibutuhkan plugin khusus agar elemen yang ingin kamu tampilkan terlihat berbeda di desktop dan perangkat mobile. Salah satu plugin yang bisa digunakan adalah Beaver Builder.
Jadi sekarang kamu sudah tahu mengapa harus selalu melihat preview tampilan mobile saat membangun situs web. Berikutnya pelajari juga tentang beberapa plugin yang perlu digunakan untuk mengubah situs WordPress agar lebih responsif di ponsel. Semoga bermanfaat.
