Header yang menempel atau “sticky header” adalah elemen yang tetap terlihat di bagian atas halaman web saat pengguna menggulir ke bawah. Ini adalah fitur yang populer dalam desain web modern, karena membantu meningkatkan navigasi pengguna dan mempertahankan ketersediaan menu utama atau logo perusahaan sepanjang waktu. Dalam artikel ini, kita akan melihat cara membuat sticky header di Elementor menggunakan plugin Sticky Header Effects for Elementor.
Langkah 1: Instalasi Plugin
Langkah pertama adalah menginstal plugin Sticky Header Effects for Elementor. Anda dapat menemukan plugin ini di direktori plugin WordPress atau mengunduhnya dari sumber daya eksternal yang dipercaya. Setelah mengunduh file plugin dalam format ZIP, Anda dapat menginstalnya dengan masuk ke dashboard WordPress Anda, mengklik “Plugin”, dan memilih “Tambah Baru”. Pilih file ZIP yang diunduh dan aktifkan plugin setelah proses instalasi selesai.
Langkah 2: Mengonfigurasi Pengaturan Plugin
Setelah mengaktifkan plugin, pergi ke menu “Elementor” di dashboard WordPress dan pilih “Sticky Header Effects”. Di sini, Anda akan menemukan pengaturan dan opsi yang berbeda untuk membuat header yang lengket.
- Pilih Header: Pilih header yang ingin Anda tetapkan sebagai header lengket. Pilih salah satu header yang telah Anda buat menggunakan Elementor.
- Pilihan Header Lengket: Di sini, Anda dapat mengaktifkan atau menonaktifkan header lengket, mengatur efek animasi yang diinginkan, seperti efek latar belakang berubah atau perubahan ukuran logo, dan mengatur batas bawah header lengket.
- Pengaturan Stiky Header: Anda dapat mengatur tampilan header lengket untuk perangkat seluler dan desktop terpisah. Sesuaikan ukuran font, warna, dan opsi lain sesuai kebutuhan Anda.
- Pengaturan Tingkat Kelekat: Atur kapan header harus tetap menempel saat pengguna menggulir ke bawah. Misalnya, Anda dapat mengatur agar header tetap menempel setelah pengguna menggulir melewati 50% halaman.
- Pengaturan Penyembunyian Header: Jika Anda ingin menyembunyikan header ketika pengguna menggulir ke bawah, Anda dapat mengaktifkan opsi ini. Header akan muncul kembali saat pengguna menggulir ke atas.
Langkah 3: Menyesuaikan Header dengan Elementor
Setelah mengatur pengaturan dasar plugin, saatnya menyesuaikan header menggunakan Elementor. Kembali ke dashboard WordPress Anda dan buka halaman di mana header yang ingin Anda buat sticky. Edit halaman menggunakan Elementor dengan mengklik “Edit with Elementor”.
Di mode pengeditan Elementor, tambahkan widget header dan sesuaikan desainnya sesuai kebutuhan Anda. Anda dapat menambahkan menu navigasi, logo, tombol, dan elemen lain ke dalam header. Pastikan header Anda telah selesai dan rapi sebelum melanjutkan ke langkah berikutnya.
Langkah 4: Aktifkan Header Lengket
Sekarang, untuk membuat header lengket, cukup tambahkan widget “Sticky HeaderWidget” ke dalam tata letak header Anda. Anda dapat menemukan widget ini di panel elemen Elementor. Seret dan lepaskan widget “Sticky Header” ke dalam tata letak header Anda.
Setelah menambahkan widget, akan muncul pengaturan widget Sticky Header di panel pengaturan di sebelah kiri layar. Di sini, Anda dapat menyesuaikan opsi seperti tinggi header, jarak bawah, dan efek animasi saat header menempel.
Anda juga dapat mengatur opsi responsif untuk header lengket. Misalnya, Anda dapat mengaktifkan atau menonaktifkan header lengket untuk tampilan perangkat seluler atau tablet. Ini memungkinkan Anda untuk mengontrol visibilitas header lengket pada berbagai perangkat.
Setelah Anda menyesuaikan pengaturan sesuai preferensi Anda, jangan lupa untuk menyimpan perubahan dan melihat pratinjau header lengket di halaman Anda. Anda dapat melakukan penyesuaian lebih lanjut jika diperlukan untuk memastikan tampilan dan perilaku yang diinginkan.
Dengan plugin Sticky Header Effects for Elementor, Anda dapat membuat header yang lengket dan menarik dengan mudah. Plugin ini menawarkan berbagai opsi dan efek yang memungkinkan Anda mengkustomisasi header lengket sesuai keinginan. Dengan mempertahankan ketersediaan menu utama dan logo perusahaan di bagian atas halaman web, Anda dapat meningkatkan pengalaman pengguna dan memudahkan navigasi mereka dalam menjelajahi konten Anda.
Semoga tutorial ini bermanfaat dalam membantu Anda membuat sticky header di Elementor menggunakan plugin Sticky Header Effects for Elementor. Dengan header lengket yang menarik, situs web Anda akan terlihat lebih profesional dan mudah digunakan.
Saya lebih suka ketika anda bertanya tentang topik yang sedang dibahas, atau ingin request tentang yang lain? langsung aja ▼ di Komentar
