3.3. Membuat Halaman Responsive Versi Mobile
Membuat Halaman Mobile Friendly
Overview: Dalam video ini, kita akan belajar bagaimana membuat halaman yang mobile friendly menggunakan Elementor.
Mengatur Tampilan di Versi Mobile
- Kebanyakan pengguna mengakses website melalui handphone, sehingga penting untuk membuat tampilan yang baik di versi mobile.
- Di dalam Elementor, kita dapat mengatur tampilan di versi tablet dan mobile tanpa harus mengganggu tampilan desktop.
- Kita dapat mengubah ukuran tulisan, logo, tombol, dan simbol/icon pada versi mobile dengan mudah menggunakan menu pengaturan Advance.
Mengatur Margin dan Padding
- Di bagian Advance, kita dapat mengatur margin (jarak antar section) dan padding (jarak antara border atas dengan komponen terdekat).
- Untuk membuat halaman lebih rapi, kita bisa menambahkan jarak antara border atas dengan komponen terdekat menggunakan padding-top dan padding-bottom.
Menyembunyikan Komponen pada Versi Mobile
- Beberapa komponen mungkin hanya diperlukan pada versi desktop saja. Kita dapat menyembunyikannya pada versi mobile agar tampilan lebih rapi.
Membuat Halaman Landing Mobile-Friendly
Overview: Pada bagian ini, kita akan belajar cara membuat halaman landing yang mobile-friendly.
Mengatur Jarak dan Warna pada Versi Desktop
- Di versi mobile, halaman akan tetap ditampilkan. Namun, di versi desktop, kita perlu mengatur jarak agar tidak terlalu dekat atau terlalu jauh.
- Kita bisa menghilangkan stress abu-abu dengan mengklik "edit section" pada Advance.
- Atur padding-top pada bagian Advance menjadi nol untuk memperbaiki tampilan.
Mengubah Tampilan Header pada Versi Mobile
- Kembali ke wp-admin dan buka bagian header and footer blog untuk mengubah tampilan header pada versi mobile.
- Edit kolom pertama dan kedua agar lebarnya 50% di versi mobile.
- Edit menu agar layoutnya rata kanan dan ubah warna tipografi menunya menjadi hijau.
Menyelesaikan Konfigurasi Halaman Landing
- Setelah konfigurasi selesai, explore tampilan versi tablet jika diperlukan.
- Halaman landing sudah siap digunakan dan mobile-friendly.
Kesimpulan
- Coba halaman landing di handphone masing-masing untuk melihat hasilnya.