LUXEE HELPS
Layout Undangan Terlihat Berantakan? Kenali Struktur Side Fixed & Motion-Video Luxee PedangPora!
Luxee PedangPora dirancang menggunakan konsep tata letak Side Fixed / Locked Side Content yang membagi area layar menjadi dua bagian utama di desktop: sisi kiri yang terkunci statis dan sisi kanan yang dapat digulirkan secara vertikal. Konsep modern ini dikombinasikan dengan fitur premium Motion-Video Section, sebuah gerbang pembuka dinamis yang menyajikan transisi sinematik saat tombol "Buka Undangan" diklik oleh tamu undangan.
Saat Anda melihat undangan di laptop, area sebelah kiri (menampilkan logo, nama mempelai, dan sambutan utama) akan terus diam terkunci, sementara isi detail acara di sebelah kanan bisa digulirkan ke bawah. Namun, saat dibuka di HP, area kiri tadi mendadak hilang! Jangan panik, ini bukanlah bug. Ini adalah optimasi responsif sengaja yang menyembunyikan kolom kiri di perangkat kecil agar tamu tidak disajikan layar sempit dan berantakan.
✨ Keunggulan Struktur Layout Luxee PedangPora
- Efisiensi Ruang Layar Desktop: Informasi utama tetap terlihat (locked) tanpa perlu digulirkan berulang kali.
- Responsivitas Ekstrem: Tata letak otomatis menyesuaikan ke satu kolom yang rapi pada smartphone tanpa merusak visual.
- Pengalaman Sinematik Pengunjung: Fitur Motion-Video memberikan transisi elegan yang memaksa tamu menonton intro sakral sebelum membaca isi undangan.
🛠️ Memahami & Mengelola Struktur Tata Letak
1. Memahami Konsep Side Fixed (Locked Side Content)
Ketika Anda membuka Navigator Elementor pada template Luxee PedangPora, Anda akan menemukan kontainer induk bernama Side Fixed. Di bawah kontainer ini, tata letak terbagi menjadi dua bagian:
- Kiri (Locked Side): Kontainer lebar di sebelah kiri yang diatur dengan posisi tetap (fixed) untuk mode desktop.
- Kanan (Scrollable Side): Kontainer di sebelah kanan yang menampung seluruh seksi undangan seperti Cover, Detail Mempelai, Wedding Event, Love Story, Galeri, hingga Wish & RSVP.
Visual: Struktur layout Side Fixed di mode desktop dengan container Kiri (terkunci) dan container Kanan (scrolling).
2. Mengatur Visibilitas Responsif (Hide on Tablet & Mobile)
Karena lebar layar perangkat mobile dan tablet sangat terbatas, menampilkan tata letak dua kolom berdampingan akan membuat teks menumpuk. Oleh karena itu, kontainer Kiri diatur agar otomatis tersembunyi pada gawai selain desktop:
- Klik kontainer Kiri di panel Navigator Elementor.
- Beralih ke tab Advanced di panel kiri Elementor.
- Buka menu akordeon Responsive.
- Pastikan opsi Hide On Tablet Portrait dan Hide On Mobile Portrait berada pada posisi Hide (Aktif).
Visual: Setelan visibilitas responsif di tab Advanced Elementor untuk menyembunyikan Container Kiri pada Tablet dan Mobile.
3. Menelusuri Logika Kerja Motion-Video Section
Bagian paling estetik dari undangan ini terletak pada kontainer motion-video yang berada di dalam kontainer Kanan > section-konten. Saat undangan pertama kali dimuat, video latar belakang yang mewah akan menutupi layar sepenuhnya.
- Autoplay Terkunci: Tamu dipaksa menonton keindahan latar video terlebih dahulu.
- Pintu Masuk Elegan: Ketika tamu mengeklik tombol Buka Undangan, naskah kode JavaScript interaktif akan menyembunyikan overlay intro video dengan transisi memudar yang halus, lalu mengaktifkan musik latar secara otomatis dan mengizinkan gulir halaman ke bagian berikutnya.
Visual: Susunan Navigator Elementor yang menunjukkan section-konten, sub-container motion-video, dan overlay-content.
Latar belakang video pada kontainer motion-video menggunakan file video statis. Agar undangan memuat dengan sangat cepat tanpa buffering, kompres file video Anda ke format MP4 dengan resolusi 720p atau 1080p (bitrate rendah) dengan ukuran file di bawah 2 MB. Ini menjamin video terputar seketika saat undangan dibuka.
🔗 Modul Panduan Terkait
Langkah berikutnya adalah menguasai langkah kustomisasi visual dan video:
💡 Pertanyaan Sering Ditanya (FAQ)
Ini adalah perilaku normal dan sengaja dikonfigurasi. Area kiri disembunyikan menggunakan fitur responsif Elementor agar tampilan undangan di layar HP tetap proporsional (satu kolom vertikal yang fokus pada isi konten sebelah kanan).
Buka Navigator Elementor, cari kontainer motion-video, klik kanan dan pilih edit. Pada panel style kiri Elementor, Anda dapat mengganti tautan video latar belakang dengan mengunggah file video baru ke WordPress Media Library.
Sangat tidak disarankan. Jika dinonaktifkan, kontainer kiri yang lebar akan memaksa masuk ke layar HP yang sempit, membuat elemen visual saling bertabrakan, teks terpotong, dan tata letak undangan menjadi berantakan total.