LUXEE HELPS
Tampilan Undangan Hancur Saat Dibuka di Ponsel? Kuasai Trik Edit Responsive Mode Elementor!
📌 Apa itu Responsive Mode di Elementor?
Responsive Mode adalah fitur penting pada editor Elementor yang memungkinkan desainer web merancang dan menguji layout halaman undangan berdasarkan berbagai dimensi layar (Desktop, Tablet, dan Mobile). Fitur ini memastikan bahwa setiap ornamen dekoratif, foto pengantin, dan teks informasi dapat dibaca dengan rapi di perangkat apa pun.
Anda mendesain kolom biodata mempelai pria dan wanita bersandingan secara horizontal (kanan-kiri) dengan latar belakang bunga besar yang terlihat sangat cantik di komputer. Namun, saat dibuka lewat layar HP yang sempit, lebar kolom terlipat menjadi 50% sehingga teks nama saling tumpang tindih dan gambar bunga menutupi tulisan. Melalui Responsive Mode, Anda bisa merestrukturisasi susunan kolom tersebut menjadi vertikal (atas-bawah) khusus di layar ponsel saja.
🛠️ Langkah Menggunakan Responsive Mode
Langkah 1: Mengaktifkan Responsive Mode di Elementor
Di bagian pojok kiri bawah panel editor Elementor Anda, klik ikon **Responsive Mode** (simbol monitor dan ponsel bersandingan). Bilah menu responsive (Responsive Bar) akan muncul di bagian atas layar.
Langkah 2: Memilih Perangkat Sasaran (Target Device)
Klik ikon **Mobile** pada Responsive Bar atas untuk mengubah tampilan pratinjau editor menjadi seukuran layar ponsel cerdas (smartphone).
Langkah 3: Menyesuaikan Nilai Kustom khusus HP
Klik elemen teks yang ingin disunting (misal: nama pengantin). Di panel pengaturan, ubah ukuran font atau padding. Pastikan ikon ponsel kecil (Mobile Icon) muncul di samping label pengaturan yang Anda ubah. Hal ini menjamin perubahan nilai tersebut tidak akan merusak layout di layar komputer.
Langkah 4: Menonton Video Tutorial Detail
Ikuti cara menyelaraskan ornamen bunga, menyembunyikan elemen dekoratif yang terlalu berat, serta mengatur ukuran kolom responsif melalui video berikut:
Selalu gunakan satuan **EM** atau **REM** untuk ukuran font, serta gunakan satuan **Persen (%)** atau **VH/VW** untuk pengaturan padding dan margin. Satuan-satuan relatif ini jauh lebih fleksibel dan adaptif menyesuaikan resolusi layar berbagai merk ponsel dibanding satuan piksel (px) yang kaku.
🔗 Modul Panduan Terkait
Langkah berikutnya adalah cara mempublikasikan dan menyebarkan undangan:
💡 Pertanyaan Sering Ditanya (FAQ)
Hal ini terjadi jika parameter yang Anda ubah tidak memiliki simbol ikon perangkat (ikon komputer/ponsel) di samping nama pengaturannya. Parameter tanpa ikon perangkat tersebut bersifat global, artinya perubahan akan berlaku untuk semua ukuran layar.
Pilih kolom/seksi gambar tersebut, masuk ke tab **Advanced > Responsive**, lalu aktifkan opsi **Hide on Mobile**. Gambar tersebut otomatis akan disembunyikan hanya saat halaman dibuka lewat ponsel.
Ya. Pilih kontainer baris (Section/Container) yang menaungi kolom tersebut, masuk ke tab **Advanced > Responsive**, lalu aktifkan opsi **Reverse Columns (Mobile)**.