Advan – Memiliki desain halaman web yang menarik dan fungsional adalah kunci untuk menjaga pengunjung tetap berada di situs web. Salah satu elemen desain yang bisa meningkatkan fungsionalitas dan estetika situs adalah sticky footer. Sticky footer adalah footer yang tetap berada di bagian bawah halaman meskipun halaman di-scroll. Ini berguna untuk menampilkan informasi penting, tautan navigasi, atau call-to-action yang selalu terlihat oleh pengunjung.
Elementor, salah satu plugin pembuat halaman untuk WordPress, memungkinkan pembuatan sticky footer dengan mudah. Dengan Elementor, pengguna bisa membuat desain halaman yang menarik dan menambahkan fitur seperti sticky footer tanpa perlu pengetahuan coding yang mendalam. Memahami cara membuat sticky footer di Elementor dapat meningkatkan pengalaman pengguna di situs web.
Artikel ini akan membahas langkah-langkah membuat sticky footer di Elementor. Dengan mengikuti panduan ini, situs web bisa memiliki footer yang selalu terlihat, sehingga informasi penting selalu dapat diakses oleh pengunjung.
Langkah-langkah Membuat Sticky Footer di Elementor
Membuat sticky footer di Elementor melibatkan beberapa langkah yang sederhana. Dengan mengikuti langkah-langkah ini, desain halaman web bisa menjadi lebih fungsional dan menarik.
1. Membuat Footer di Elementor
Langkah pertama dalam membuat sticky footer adalah membuat footer itu sendiri. Elementor menyediakan fitur untuk membuat footer yang bisa disesuaikan dengan kebutuhan situs web.
Buka dashboard WordPress dan pilih “Templates” kemudian “Theme Builder”. Di sini, pilih “Footer” dan klik “Add New”. Beri nama pada template footer dan klik “Create Template”. Elementor akan membuka editor halaman, di mana berbagai elemen bisa ditambahkan ke footer. Desain footer sesuai dengan kebutuhan, tambahkan teks, tautan, dan elemen lain yang diperlukan.
2. Menambahkan CSS untuk Sticky Footer
Setelah footer selesai didesain, langkah berikutnya adalah menambahkan kode CSS untuk membuat footer menjadi sticky. Kode CSS ini akan memastikan bahwa footer tetap berada di bagian bawah halaman meskipun halaman di-scroll.
Di editor Elementor, klik ikon roda gigi di sudut kiri bawah untuk membuka pengaturan halaman. Pilih tab “Advanced” dan klik “Custom CSS”. Di sini, tambahkan kode CSS berikut:
selector {
position: fixed;
bottom: 0;
width: 100%;
z-index: 9999;
}
Kode ini akan membuat footer tetap berada di bagian bawah halaman dengan lebar 100% dari viewport, sehingga selalu terlihat oleh pengunjung.
Baca juga Cara Membuat Sticky Header di Elementor
3. Menyimpan dan Menerapkan Footer
Setelah menambahkan kode CSS, simpan perubahan dan terapkan footer ke seluruh situs atau halaman tertentu sesuai kebutuhan. Kembali ke dashboard WordPress, buka “Templates” kemudian “Theme Builder”, pilih footer yang telah dibuat dan klik “Edit Conditions”. Tentukan di halaman mana footer ini akan ditampilkan, apakah di seluruh situs atau hanya di halaman tertentu. Simpan pengaturan dan periksa situs web untuk memastikan sticky footer berfungsi dengan baik.
Tips Tambahan untuk Sticky Footer yang Efektif
Selain membuat sticky footer, ada beberapa tips tambahan yang bisa diterapkan untuk memastikan footer berfungsi dengan optimal dan memberikan pengalaman pengguna yang baik.
1. Menjaga Desain Tetap Sederhana
Footer harus informatif tetapi tetap sederhana. Hindari menambahkan terlalu banyak elemen yang bisa membingungkan pengunjung. Fokus pada informasi penting seperti tautan navigasi, kontak, dan call-to-action.
2. Memastikan Responsivitas
Pastikan sticky footer berfungsi dengan baik di berbagai perangkat. Uji tampilan footer di desktop, tablet, dan ponsel untuk memastikan responsivitas. Elementor memungkinkan pratinjau desain di berbagai perangkat, sehingga memudahkan penyesuaian.
3. Mengoptimalkan Kecepatan Halaman
Sticky footer tidak boleh memperlambat kecepatan halaman. Optimalkan gambar dan elemen lain yang ada di footer untuk memastikan situs tetap cepat dan responsif. Penggunaan plugin caching juga bisa membantu meningkatkan kecepatan halaman.
Membuat sticky footer di Elementor adalah cara efektif untuk meningkatkan fungsionalitas dan estetika situs web. Dengan mengikuti langkah-langkah di atas, footer bisa selalu terlihat oleh pengunjung, sehingga informasi penting selalu dapat diakses.
Untuk mendapatkan pengalaman terbaik dalam mendesain dan mengelola situs web, pertimbangkan menggunakan Advan One PC. Produk ini menawarkan performa tinggi dan fitur lengkap yang mendukung segala kebutuhan desain web. Kunjungi Advan One PC untuk informasi lebih lanjut.
Dengan sticky footer yang efektif, situs web akan terlihat lebih profesional dan memberikan pengalaman yang lebih baik bagi pengunjung. Selamat mencoba dan semoga berhasil dalam mendesain sticky footer di Elementor!***
Editor : Adita Febriyanti