Advan – Hello, sobat Advan. Sticky header adalah elemen yang tetap terlihat di bagian atas halaman meskipun halaman digulir ke bawah. Fitur ini sangat berguna untuk meningkatkan navigasi dan pengalaman pengguna di situs web. Elementor, sebagai salah satu pembuat halaman visual terbaik, menyediakan fitur ini dengan mudah. Artikel ini akan membahas langkah-langkah untuk membuat sticky header di Elementor.
Persiapan Awal
Sebelum memulai, pastikan memiliki plugin Elementor dan Elementor Pro terinstal di situs web. Fitur sticky header hanya tersedia di versi Pro. Jika belum memiliki Elementor Pro, unduh dan instal terlebih dahulu.
Membuat Header Baru
Langkah pertama adalah membuat header baru. Ikuti langkah-langkah berikut:
- Masuk ke dashboard WordPress.
- Pilih “Template” > “Theme Builder”.
- Klik “Add New” dan pilih “Header”.
- Beri nama header baru, lalu klik “Create Template”.
Mendesain Header
Setelah membuat template header, saatnya mendesain header sesuai keinginan. Gunakan widget yang tersedia di Elementor untuk menambahkan elemen seperti logo, menu navigasi, ikon media sosial, dan lain-lain. Pastikan desain header sesuai dengan tema situs web agar terlihat konsisten dan profesional.
Menjadikan Header Sticky
Untuk membuat header tetap berada di atas halaman saat digulir, ikuti langkah-langkah berikut:
- Pilih bagian header yang ingin dijadikan sticky.
- Klik kanan pada bagian tersebut dan pilih “Edit Section”.
- Di panel sebelah kiri, buka tab “Advanced”.
- Di bagian “Motion Effects”, aktifkan “Sticky”.
- Pilih opsi “Top” untuk posisi sticky.
Dengan langkah ini, header akan tetap berada di bagian atas halaman saat pengguna menggulir halaman ke bawah.
Mengatur Tampilan Sticky Header
Elementor memberikan opsi untuk mengatur tampilan sticky header agar lebih menarik. Beberapa pengaturan yang bisa dilakukan antara lain:
- Transparansi: Atur tingkat transparansi header agar tidak mengganggu konten di bawahnya. Caranya, pilih header, buka tab “Style”, dan atur opasitas di bagian “Background”.
- Bayangan: Tambahkan bayangan pada header untuk memberikan efek melayang. Pilih header, buka tab “Advanced”, lalu atur bayangan di bagian “Box Shadow”.
- Transformasi: Ubah ukuran atau warna header saat menjadi sticky. Di bagian “Motion Effects”, gunakan opsi “Effects Offset” untuk menentukan titik perubahan.
Baca juga Tips Membuat Header Custom di Elementor
Menyimpan dan Menerapkan Header
Setelah selesai mendesain dan mengatur sticky header, langkah terakhir adalah menyimpan dan menerapkannya ke seluruh situs web. Ikuti langkah-langkah berikut:
- Klik tombol “Publish” di bagian bawah panel Elementor.
- Pilih kondisi penerapan header. Pilihan yang tersedia antara lain menerapkan header di seluruh situs web, hanya di halaman tertentu, atau di jenis postingan tertentu.
- Klik “Save & Close” untuk menyimpan perubahan dan menerapkan header.
Menguji Sticky Header
Setelah menyimpan dan menerapkan sticky header, penting untuk menguji fungsinya. Buka halaman situs web dan gulir ke bawah untuk memastikan header tetap berada di atas. Pastikan tidak ada gangguan pada elemen lain di halaman.
Untuk produktivitas yang maksimal saat mendesain situs web, pilih Advan Workplus. Dengan performa tinggi dan fitur lengkap, Advan Workplus menjadi pilihan tepat bagi para profesional. Tingkatkan efisiensi kerja dengan laptop yang andal ini.
Membuat sticky header di Elementor adalah cara efektif untuk meningkatkan navigasi dan pengalaman pengguna di situs web. Dengan mengikuti langkah-langkah di atas, sticky header dapat dibuat dengan mudah dan cepat. Pastikan untuk selalu menguji hasilnya agar tidak mengganggu tampilan dan fungsionalitas situs web.
Sticky header tidak hanya membuat situs web lebih menarik, tetapi juga membantu pengunjung untuk selalu memiliki akses ke menu navigasi dan elemen penting lainnya. Dengan menggunakan Elementor, proses ini menjadi lebih sederhana dan menyenangkan. Selamat mencoba dan semoga berhasil.***
Editor : Adita Febriyanti