Mengoptimalkan Tampilan Mobile di Elementor
Pentingnya Tampilan Mobile
Lebih dari 60% pengunjung website menggunakan smartphone. Jika tampilan mobile kamu berantakan, pengunjung akan langsung pergi. Elementor menyediakan mode responsif yang memudahkan optimasi untuk berbagai ukuran layar.
Mengaktifkan Mode Responsif
Di toolbar bawah editor Elementor, klik ikon monitor untuk berpindah mode:
- Desktop: Tampilan layar penuh (default)
- Tablet: Simulasi layar tablet (~768px)
- Mobile: Simulasi layar smartphone (~375px)
Masalah Umum di Mobile dan Solusinya
Teks Terlalu Besar
Di mode Mobile, klik widget Heading → Style → Typography → ukuran font akan memiliki ikon responsif. Set ukuran khusus untuk mobile yang lebih kecil.
Kolom Tidak Stack
Secara default, Elementor otomatis stack kolom di mobile. Jika tidak, cek pengaturan Section → tab Advanced → Responsive → pastikan tidak ada pengaturan yang mengunci lebar.
Padding Terlalu Besar
Padding untuk desktop biasanya terlalu besar untuk mobile. Klik Section → Advanced → Padding → aktifkan mode responsif → set padding lebih kecil untuk mobile.
Gambar Terpotong
Set Image widget dengan object-fit: cover dan atur posisi focal point agar bagian terpenting gambar tetap terlihat di mobile.
Tips Responsif di Elementor
- Selalu desain desktop dulu, baru sesuaikan mobile
- Gunakan unit % atau vw untuk ukuran yang fleksibel
- Sembunyikan elemen tertentu di mobile: Advanced → Responsive → Hide on Mobile
- Test di browser mobile sungguhan, bukan hanya simulasi Elementor
- Gunakan Google PageSpeed Insights untuk cek performa mobile
