Tampilan Mobile Kurang Rapi? Pahami Struktur Layout & Responsive Mode AnyEvent!

📌 Apa itu Struktur Layout AnyEvent?

Struktur layout AnyEvent adalah susunan hierarki kontainer modern berbasis Flexbox Containers yang mengelompokkan elemen-elemen undangan ke dalam seksi logis (Hero, Profil, Jadwal, Lokasi, RSVP) dan dilengkapi target CSS ID baku untuk menghubungkan sistem navigasi anchor dan script penunjang interaktif.

📖

Skenario Masalah Nyata

Lebih dari 90% penerima undangan digital membuka link website menggunakan smartphone. Jika Anda tidak memahami struktur kontainer dan tidak memeriksa mode responsif, teks dapat terpotong, padding terlalu lebar, atau tombol navigasi titik melayang (Floating Dots) tidak berpindah section dengan tepat.

🏗️ Tabel Standar Section & Target CSS ID

Section Utama	Target CSS ID Baku	Fungsi Konten
Hero Banner	`#hero`	Judul acara, countdown timer, dan tombol jelajah.
Tentang Acara	`#about`	Deskripsi kegiatan, profil narasumber / pembicara.
Susunan Acara	`#rundown`	Tabel jadwal sesi kegiatan / timeline acara.
Lokasi & Peta	`#lokasi`	Alamat tempat, peta Google Maps, dan tombol arah.
Pendaftaran / RSVP	`#rsvp`	Formulir pendaftaran tiket atau konfirmasi kehadiran.
Kode Kustom (Footer)	`-`	Wadah widget HTML script Floating Dots & Clipboard.

📱 Langkah Menyetel Tampilan Responsive Mode di Elementor

Pada bar bawah editor Elementor, klik ikon Responsive Mode (atau tekan shortcut Ctrl + Shift + M).
Pilih ikon Mobile Portrait (360px - 480px) di bar atas.
Periksa elemen teks panjang: jika terlalu besar, klik elemen tersebut dan ubah ukuran font di tab Style → Typography → Size (ikon HP). Perubahan pada mode mobile tidak akan merusak tampilan desktop.
Periksa jarak tepi kontainer: pastikan padding kanan-kiri disetel antara 15px hingga 20px agar konten nyaman dibaca di layar HP kecil.

💡

Pro Tips Menjaga Fungsi Floating Dots Nav

Jangan mengubah atau menghapus nilai CSS ID pada kontainer utama (misal: hero, about, rundown, lokasi, rsvp) karena script navigasi titik melayang (Floating Nav Dots) membutuhkan ID ini untuk mendeteksi posisi scroll aktif pengunjung.

🔗 Modul Panduan Terkait

Langkah berikutnya dalam penataan widget & script:

💡 Pertanyaan Sering Ditanya (FAQ)

Di mana letak pengaturan CSS ID pada kontainer Elementor?

Klik kontainer section target, buka panel kiri tab Advanced, cari kolom input CSS ID. Tuliskan nama ID tanpa tanda pagar (contoh tulis: rundown, bukan #rundown).

Mengapa tampilan di HP saya berbeda dengan saat di editor Elementor?

Hal ini umumnya disebabkan oleh cache browser seluler atau plugin caching (seperti LiteSpeed Cache / WP Rocket). Bersihkan cache (Purge Cache) pada WordPress Anda lalu buka link menggunakan mode Private/Incognito di HP.

Bisakah saya menyembunyikan section tertentu hanya di tampilan HP?

Bisa. Klik kontainer target → buka tab Advanced → Responsive → aktifkan opsi Hide on Mobile Portrait.