Built Web

Web Development

Smart Header Settings

Panduan Pengaturan Smart Header

Fitur Smart Header memungkinkan menu navigasi situs Anda tetap melayang di bagian atas halaman (sticky) secara pintar saat pengunjung menggulir layar ke bawah. Fitur ini juga dilengkapi dengan transisi perubahan warna latar belakang (background) otomatis agar konten situs Anda tetap terbaca dengan jelas di setiap posisi halaman.

Cara Mengaktifkan & Mengatur Smart Header

Seluruh konfigurasi Smart Header dapat Anda lakukan secara visual langsung melalui Block Editor (Gutenberg) WordPress tanpa perlu menulis kode CSS tambahan.

Langkah 1: Masuk ke Editor Bagian Header (Header Parts)

  1. Dari dasbor WordPress Anda, buka menu Appearance > Editor (Tampilan > Editor) atau masuk ke halaman penyuntingan template yang ingin Anda edit.
  2. Cari dan pilih bagian parts Header (biasanya berada di Pattern – Parts atau langsung klik area Header pada editor visual).

Langkah 2: Memilih Elemen Kontainer Terluar

Fitur Smart Header melekat pada baris terluar dari susunan header Anda.

  1. Buka fitur List View (ikon tiga garis horizontal bertingkat di pojok kiri atas editor) untuk melihat hierarki blok dengan lebih mudah.
  2. Klik pada elemen/blok terluar yang membungkus seluruh komponen header Anda (biasanya berupa blok Group, Row, atau kontainer utama pembungkus logo dan menu).

Langkah 3: Mengaktifkan Fitur Melalui Panel Pengaturan (Sidebar)

Setelah Anda mengeklik elemen terluar tersebut, lihat ke arah kanan layar Anda:

  1. Perhatikan panel Block Settings di sidebar sebelah kanan.
  2. Temukan opsi berlabel Header Scroll Effect.
  3. Klik tombol geser atau Toggle di sampingnya untuk mengaktifkannya (hingga berubah warna menjadi aktif/biru).

Langkah 4: Menyesuaikan Warna Latar Belakang Saat Di-scroll

Setelah toggle Smart Header aktif, pengaturan tambahan untuk transisi warna akan muncul di bawahnya:

  1. Cari menu Background saat scroll (Warna Latar Belakang Saat Scroll) yang berada tepat di bawah opsi toggle Smart Header.
  2. Pilih warna yang Anda inginkan dari palet warna yang tersedia, atau masukkan kode warna kustom Anda sendiri.
  3. Warna ini akan otomatis aktif dan bertransisi secara halus ketika pengunjung mulai menggulir halaman situs Anda ke bawah.

Simpan Perubahan Anda

Setelah semua pengaturan dirasa pas:

  1. Klik tombol Save (Simpan) di pojok kanan atas editor.
  2. Konfirmasi penyimpanan untuk bagian Header template part.
  3. Buka halaman depan situs Anda dan coba gulir halaman ke bawah untuk melihat efek cantiknya secara langsung!

💡 Tips Tambahan:

  • Kontras Warna: Pastikan warna latar belakang saat scroll yang Anda pilih memiliki kontras yang cukup dengan warna teks menu navigasi Anda agar teks tetap mudah dibaca.
  • Format Logo: Jika latar belakang saat scroll berubah menjadi warna gelap, pastikan Anda menggunakan logo berformat .png transparan atau siapkan versi logo yang cocok untuk kedua kondisi latar belakang (terang & gelap).