Sticky header adalah cara terbaik untuk menjaga menu navigasi situs web Anda tetap terlihat setiap saat, memastikan akses mudah ke link dan informasi penting. Namun, header statis dapat menjadi monoton seiring berjalannya waktu, dan Anda mungkin ingin mengubah warnanya pada scroll untuk menciptakan pengalaman pengguna yang lebih dinamis dan menarik. Dalam panduan ini, kami akan menunjukkan cara mengubah warna header lengket saat digulir di Elementor , menggunakan langkah-langkah sederhana dan mudah diikuti. Baik Anda seorang pemula atau pengguna Elementor berpengalaman, Anda dapat dengan mudah menerapkan efek ini dan memberikan tampilan segar dan modern pada situs web Anda.
Metode Desain
Jika Anda belum melakukannya, Anda harus menggunakan pembuat tema untuk membuat Templat Header khusus. Mulailah dengan meletakkan logo Anda di Widget Gambar dan Widget Navigasi di bagian header dua kolom.
Tab Tingkat Lanjut
Tab Tingkat Lanjut di Bagian Kontrol akan digunakan untuk langkah-langkah berikut.
Pengaturan Margin
Cara paling umum untuk membuat header transparan adalah dengan memberikan margin negatif pada bagian tersebut sama dengan tingginya. Buka kunci kontrol margin pada Tab Lanjutan dan atur bagian bawah ke nilai negatif (contoh: -125px). Ini akan memindahkan bagian di bawah header ke bagian atas halaman.
Buat Situs Web Luar Biasa
Dengan Elementor pembuat halaman gratis terbaik
Mulai sekarangIndeks Z
Anda juga perlu meningkatkan indeks Z bagian tersebut untuk memastikan bahwa bagian tersebut selalu berada di bagian atas konten. Anda dapat memasukkan nomor berapa pun yang lebih besar dari konten lainnya di situs web Anda, namun banyak desainer menggunakan 1.000.
Pengaturan Lengket
Pilih opsi Sticky dari akordeon Motion Effects dan atur ke Top.
Menambah Efek
Sekarang kita telah membuat bagian header transparan dasar, kita akan menambahkan efek gulir.
Tab Gaya
Tab Gaya di Kontrol Bagian akan digunakan untuk langkah-langkah berikut.
Warna Akhir
Atur warna latar belakang atau gradien akhir di pemilih warna.
Efek Bergulir
Alihkan pemilih Efek Bergulir di panel kontrol.
Tetapkan Nilainya
Kita sekarang perlu menyesuaikan nilai pada slider viewport untuk mencapai efek yang diinginkan. Gulir ke lokasi di halaman Anda di mana Anda ingin opasitas penuh dan kurangi nilai Teratas hingga judul Anda benar-benar buram (contoh: 25%). Anda sekarang dapat meningkatkan nilai Bawah. Pada contoh sebelumnya, kita ingin efeknya terjadi dengan cepat, jadi kita tetapkan nilainya sangat berdekatan (contoh: 22%). Ini akan menghasilkan efek yang terjadi pada pengguliran halaman sebesar 3%.
Membungkus
Kesimpulannya, mengubah warna sticky header pada scroll di Elementor dapat meningkatkan daya tarik visual dan pengalaman pengguna situs web Anda. Ini adalah cara sederhana dan efektif untuk membuat situs web Anda menonjol dan menciptakan kesan yang tak terlupakan bagi pengunjung Anda. Namun, perlu diingat bahwa Anda perlu menyesuaikan atau memberikan kelonggaran untuk perangkat seluler dan tablet karena perilaku header mungkin berbeda pada ukuran layar yang berbeda. Menemukan titik terbaik tersebut memerlukan beberapa pengujian dan penyesuaian, namun hasil akhirnya akan sepadan dengan usaha yang dilakukan. Jadi, silakan coba teknik ini untuk memberikan tampilan segar dan modern pada situs web Anda.
