Apa itu Responsive Design ?
Responsive Design adalah teknik cara mengoptimalkan tampilan website kita agar sesuai dengan perangkat / device dari pengunjung. Sehingga tampilan, bentuk dan strukturnya disesuaikan dengan ukuran layar pengunjung.
Tentunya ini tidak sekedar mengubah resolusi layar saja, namun juga sampai dengan optimalisasi font dan juga kecepatan loadingnya.
Bagaimana Pengaturan untuk Mobile, Tablet dan Desktop ?
Pada widget information maka tidak semua fitur dapat dilakukan optimasi dalam bentuk responsive. Dimana penggunaan paling sering dipergunakan meliputi
- Ukuran Teks
- Margin
- Padding
- Visibility , dll
Dimana pembedanya dapat Anda cek pada ikon area di elemen tertentu yang ingin Anda kontrol
Pengaturan Gambar Latar Belakang
Background Image atau Gambar Latar Belakang secara otomatis akan menyesuaikan dengan jenis perangkat pengunjung, namun Anda dapat melakukan perubahan sesuai dengan opsi di masing masing responsive design.
Pengaturan Visibility
Anda dapat memilih untuk Menampilkan / Menyembunyikan Bagian sesuai dengan perangkat.
- Buka Pengaturan Bagian > Lanjutan > Responsif
- Tetapkan preferensi visibilitas Anda, pilih dari Sembunyikan di Desktop , Sembunyikan di Tablet , atau Sembunyikan di Seluler .
Saat menyembunyikan sebuah elemen, dan beralih ke tampilan tersembunyinya, Anda akan melihat bahwa elemen ini “dibisukan”. Ini memberi Anda indikasi jelas bahwa elemen ini akan disembunyikan di situs aktif, namun tetap memungkinkan Anda mengeditnya sesuai kebutuhan.
Anda dapat mengedit area tertentu dalam mode responsif yang tidak menyembunyikannya. Misalnya, jika elemen terlihat di perangkat seluler namun tersembunyi di desktop dan tablet, Anda akan dapat mengedit elemen tersebut di tampilan seluler.
Pengaturan Breakpoint
Anda dapat mengatur nilai breakpoint seluler dan tablet.
- Dari halaman Elementor atau editor postingan mana pun, klik menu hamburger di sudut kiri atas Panel Widget l, lalu navigasikan ke Pengaturan Situs > Tata Letak > Breakpoints , dan tetapkan nilai breakpoint untuk seluler dan tablet
- Simpan perubahan Anda
- Buka Elementor > Alat > Tab Umum > Regenerasi CSS, klik Regenerasi File