Advan – Footer adalah elemen penting dari desain situs web yang sering kali berfungsi sebagai bagian terakhir yang dilihat pengunjung sebelum meninggalkan halaman. Menghadirkan desain footer yang menarik dapat meningkatkan pengalaman pengguna dan memperkuat identitas merek. Salah satu cara inovatif untuk mendesain footer adalah dengan menggunakan video background. Artikel ini akan membahas langkah demi langkah cara membuat footer dengan video background di Elementor.
1. Persiapan Awal
Sebelum memulai, pastikan memiliki video yang akan digunakan sebagai latar belakang footer. Pilih video yang relevan dengan tema situs web dan tidak terlalu mengganggu pembaca. Ukuran video juga penting, pastikan ukurannya optimal agar tidak memperlambat waktu muat halaman. Simpan video di pustaka media situs web atau gunakan layanan penyimpanan eksternal yang mendukung embedding.
2. Mengakses Elementor
Masuk ke dasbor WordPress dan navigasikan ke halaman atau pos tempat footer akan ditempatkan. Klik tombol “Edit with Elementor” untuk membuka editor Elementor. Elementor adalah plugin yang memungkinkan desain situs web dengan drag-and-drop dan fitur-fitur yang sangat fleksibel.
3. Menambahkan Section Baru
Di editor Elementor, tambahkan section baru di bawah elemen halaman yang ada. Pilih ikon “+” untuk menambahkan section, kemudian pilih layout yang diinginkan. Sebaiknya pilih layout satu kolom untuk footer. Setelah menambahkan section, klik pada section tersebut untuk mengakses pengaturan.
4. Mengatur Background Video
Di tab “Style” pada pengaturan section, temukan opsi “Background”. Di bagian ini, pilih “Video” dari dropdown opsi background. Masukkan URL video yang sudah dipersiapkan. Elementor juga memungkinkan untuk meng-upload video langsung jika tidak menggunakan URL. Sesuaikan pengaturan seperti posisi, ukuran, dan cover untuk memastikan video ditampilkan dengan baik di footer.
5. Menambahkan Konten Footer
Setelah video background diterapkan, tambahkan elemen-elemen lain ke dalam footer seperti teks, ikon sosial, atau menu navigasi. Pilih widget yang sesuai dari panel Elementor, seperti “Text Editor” untuk menambahkan teks, atau “Social Icons” untuk menambahkan ikon media sosial. Tempatkan elemen-elemen ini di dalam section footer dan sesuaikan styling-nya agar kontras dengan video background.
6. Penyesuaian Responsif
Penting untuk memastikan bahwa footer dengan video background tetap berfungsi dengan baik pada berbagai perangkat. Elementor menyediakan opsi penyesuaian responsif. Di bagian bawah editor, pilih ikon perangkat untuk meninjau tampilan footer pada desktop, tablet, dan ponsel. Sesuaikan ukuran font, jarak, dan elemen lain agar footer terlihat optimal di semua perangkat.
7. Uji Coba dan Publikasi
Sebelum menerbitkan perubahan, lakukan uji coba untuk memastikan bahwa video background berfungsi dengan baik dan tidak mempengaruhi performa situs. Periksa kecepatan muat halaman dan pastikan video tidak memperlambat waktu akses. Setelah semua penyesuaian selesai dan footer terlihat sesuai harapan, klik “Publish” untuk menerbitkan footer baru.
Tips
- Optimasi Video: Kompres video untuk mengurangi ukuran file tanpa mengorbankan kualitas. Ini membantu meningkatkan kecepatan muat halaman.
- Konten yang Jelas: Pastikan teks dan elemen lainnya tetap terbaca dengan jelas di atas video background. Gunakan warna teks dan latar belakang yang kontras.
- Uji di Berbagai Browser: Pastikan footer terlihat baik di berbagai browser dan sistem operasi.
Dengan desain footer yang modern dan dinamis, menambahkan video background tentunya dapat meningkatkan estetika situs web secara signifikan. Untuk melengkapi desain situs web dengan profesional, pertimbangkan menggunakan Advan 360 Stylus. Dengan fitur canggih dan desain yang elegan, Advan 360 Stylus dapat membantu menciptakan konten dan desain yang lebih kreatif dan efektif. Temukan lebih banyak tentang Advan 360 Stylus dan tingkatkan pengalaman desain digital hari ini!
Footer dengan video background dapat memberikan sentuhan yang modern dan dinamis pada situs web. Dengan mengikuti langkah-langkah di atas, footer dapat dirancang dengan profesional, meningkatkan estetika dan fungsionalitas situs. Selamat mencoba dan semoga hasil desain footer memuaskan.***
Editor : Adita Febriyanti