VIDEO
HIGHLIGHT
Log InSign up
3.3. Membuat Halaman Responsive Versi Mobile
SummaryTranscriptChat

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.