LUXEE HELPS
Undangan Tidak Terbuka Full Screen? Atur Margin-Padding & Motion Video Overlay!
📌 Apa Bahasan Utama Mengenal Layout Part 2?
Pada panduan struktur layout bagian kedua ini, kita akan memfokuskan pengerjaan pada penyelesaian masalah kerapian kontainer yang menyisakan celah kosong (white-space) di sisi layar ponsel, serta teknik penyusunan seksi Motion Video Content khusus. Seksi ini mengunci navigasi scroll tamu agar harus menonton video pembuka atau menyelesaikan putaran overlay video sebelum diizinkan meluncur ke area konten berikutnya.
Bayangkan Anda mengimpor template adat mewah yang menyertakan video cinematic pembuka berlatar ornamen transparan. Namun, karena margin bawaan kontainer tidak di-reset ulang ke angka 0, video tersebut terpotong di tepi kiri-kanan layar HP dan menyisakan border putih yang mengganggu estetika. Selain itu, tamu bisa langsung men-scroll cepat melewati video pembuka tanpa menontonnya sama sekali. Mengunci seksi video overlay ini dengan CSS ID khusus dan reset padding menjamin penyampaian cinematic video berjalan sempurna.
✨ Checklist Konfigurasi Motion & Margin
- Reset Margin-Padding ke 0: Setelan wajib untuk kontainer terluar agar visual ornamen transparan rapat hingga ke ujung tepi kaca ponsel.
- CSS ID Seksi Motion Video: Pengidentifikasi khusus untuk memicu script penahan scroll (scroll-lock) di browser tamu.
- Fallback Background Section: Gambar statis cadangan jika koneksi seluler tamu lambat memuat video beresolusi tinggi di server.
🛠️ Langkah Konfigurasi Layout Part 2
Langkah 1: Mereset Margin dan Padding Kontainer
Klik ikon edit kontainer utama Anda di Elementor. Di panel pengaturan sebelah kiri, arahkan ke tab Layout. Setel nilai Padding dan Margin kontainer terluar menjadi tepat 0 (klik ikon rantai unlink agar tidak memengaruhi bagian kontainer di dalam).
Langkah 2: Menyetel Seksi Motion Video & Overlay
Siapkan seksi konten khusus berlatar belakang video (cinematic clip). Masuk ke tab Advanced kontainer tersebut, lalu sematkan **CSS ID** khusus penahan scroll (misal: video-motion-section). Masukkan kode script script pelengkap yang memicu pembukaan seksi berikutnya hanya jika durasi video habis (scrolling by end video) atau tombol overlay khusus diklik.
Langkah 3: Menonton Video Mengenal Layout Part 02
Silakan saksikan rekaman tutorial video berikut untuk memandu proses reset kontainer dan penguncian gerakan seksi video motion di web Anda:
Jangan pernah mengabaikan pengaturan Fallback Background pada seksi video background. Unggah versi gambar statis dari cuplikan adegan video berformat WebP ringan. Jika tamu mengakses web di jaringan 3G/koneksi buruk, gambar fallback ini akan langsung tampil menutupi area agar layar tidak kosong hitam saat loading video.
🔗 Modul Panduan Terkait
Langkah berikutnya setelah struktur part 2 dipahami adalah penyuntingan teks dan warna:
💡 Pertanyaan Sering Ditanya (FAQ)
Browser mobile (seperti Safari di iOS atau Chrome di Android) secara ketat melarang pemutaran video ber-autoplay jika suara video menyala. Pastikan Anda mencentang opsi Mute (Tanpa Suara) di pengaturan video background Elementor Anda agar autoplay berjalan mulus.
Tidak, asalkan Anda memberikan padding internal (padding kontainer anak/inner container) sekitar 15px sampai 20px khusus untuk kolom yang menampung tulisan teks.
Tamu undangan dengan koneksi internet lambat akan melihat kotak kosong berwarna hitam pekat selama beberapa detik sebelum video benar-benar terunduh, yang merusak impresi awal estetika website.