Cara Membuat Sticky Header Elementor Pro


14 Des, 2023
2 menit

Seperti yang tertera pada judul, Cara Membuat Sticky Header Elementor Pro hanya bisa kalian terapkan apabila kalian menggunakan Elementor Pro, dan tidak bisa digunakan pada elementor versi gratis.

Apa itu sticky header? Sticky header merupakan bagian header yang akan terus mengambang di bagian atas layar meskipun kita telah melakukan scroll hingga bagian terbawah dari website.

Prasyarat Membuat Sticky Header Elementor Pro

Cara Membuat Sticky Header Elementor Pro

Note: Silahkan klik gambar untuk memperbesar atau melihat gambar dalam ukuran penuh!

  1. Login ke dasboard WordPress admin kalian, defaultnya namwebsite.com/wp-admin
  2. Buka menu Templates > Theme Builder
    Cara Membuat Sticky Header Elementor Pro
  3. Pilih icon plus (+) pada menu Header
    Cara Membuat Sticky Header Elementor Pro
  4. Tambahkan elemen yang akan kalian gunakan sebagai header
    Cara Membuat Sticky Header Elementor Pro
  5. Klik icon “Tiga Titik” untuk melakukan Edit Container
    Cara Membuat Sticky Header Elementor Pro
  6. Pada menu Edit Container, buka tab Advanced
    Cara Membuat Sticky Header Elementor Pro
  7. Di tab Advanced, buka menu Motion Effects
    Cara Membuat Sticky Header Elementor Pro
  8. Ubah Sticky dari None menjadi Top atau Bottom
    Cara Membuat Sticky Header Elementor Pro
  9. Pilih dimana sticky akan ditampilkan, apabila ingin ditampilkan di PC, Tablet, dan Mobile, maka kalian bisa mengabaikan opsi ini.
    Cara Membuat Sticky Header Elementor Pro
  10. Tambahkan artikel atau konten random untuk memeriksa apakah Sticky sudah berjalan. Berikut adalah tampilan ketika header pada posisi normal (tidak sticky)
    Cara Membuat Sticky Header Elementor Pro
  11. Apabila berhasil, maka setelah di scroll kebawah, header kalian tidak akan menghilang, seperti yang tampil pada gambar dibawah ini.
    Cara Membuat Sticky Header Elementor Pro

Terima kasih telah berkunjung ke WPGan.com. Dapatkan saldo $100 di Vultr gratis dan deploy servermu sendiri melalui [Halaman Ini]
Share: