Panduan Mengelola Header Website

Header adalah bagian penting dalam sebuah website, karena header adalah informasi pertama yang dilihat oleh pengunjung saat membuka sebuah website. Header pula menentukan keputusan apakah akan melihat bagian selanjutnya pada sebuah website. Sehingga untuk informasi pada sebuah website harus jelas dan informatif.

Informasi-informasi yang digunakan pada footer biasanya menampilkan informasi navigasi menu, hero image, hero video, slider image, slider video, dll.

Untuk melakukan pengecekan tema website Anda, silakan cek pada artikel berikut ini :

Mengelola Header Website (Bridge Theme)

Untuk pengelolaan footer Anda bisa mengikuti langkah-langkah dibawah ini.:

Setelah Anda mengetahui tema yang digunakan (Bridge Theme). Pilih Qode Options -> Header

Header Position

Jika Anda menggunakan tema Bridge, Anda bisa mengatur posisi Header, yaoitu di sebelah kiri (vertical) atau horizontal.

Contoh Header Left

Contoh Header Normal (Horizontal)

Header 

• Header in Grid : Memungkinkan Anda untuk mengatur konten Anda dipasang pada posisi terpusat (lebar maksimum 1100px) atau full-width (lebah penuh dalam layar)
• Header Type : Opsi variasi layout dan struktur pada area header. layout yang bisa dipilih antara lain :
  • Regular : Tipe ini adalah standart header yang sering digunakan. Secara default, logo berada di sebelah kiri dan navigasi menu ada di sebelah kanan. Tipe ini adalah pilihan terbaik untuk tampilan sederhana.
  • Fixed : Tipe ini memiliki tipe seperti tipe Regular, namun pada tipe ini tetap berada di atas halaman saat di-scroll.
  • Fixed Minimal : Tipe ini header berada di atas halaman saat di-scroll. Logo ditampilkan di tengah, ikon menu ada di sebelah kiri dan ikon pencarian ada di kanan.
  • Fixed Advanced Header : Tipe ini header berada di atas halaman saat di-scroll. Namun hanya logo yang terlihat. Menu disembunyikan, akan muncul saat mouse di hover pada logo.
  • Fixed Header Top : Tipe ini header top akan berada di atas halaman saat di-scroll. Namun informasi seperti header bottom, menu tetap di tampilkan di header top.
  • Sticky : Tipe ini header mirip dengan fixed header, perbedaannya header terlihat dan tidak terlihat saat halaman di-scroll.  kemudian muncul kembali dan tetap di atas setelah di-scroll beberapa kali. 
  • Sticky Expanded : Tipe header ini mirip dengan sticky header namun perbedaannya pada logo dan element ikut berada diatas (sticky)
  • Sticky Divided : Tipe header ini mirip dengan sticky expanded, namun perbedaannya logo ada di sebelah tengah navigasi menu
• Header Skin : Memungkinkan Anda untuk mengatur style pada header, apakah ingin menggunakan style Light (warna terang) atau Dark (warna gelap)
• Enable Header Style on Scroll : Memungkinkan Anda untuk mengatur style header skin, apakah akan diaktifkan / tidak.

Qode Search

Pada bagian ini, Anda bisa mengaktifkan menu fitur pencarian untuk mencari halaman, posting, portfolio tertentu, dll di dalam sebuah website. Qode Search akan muncul pada bagian navigasi manu di sebelah kanan header (default)

Side Area

Fitur ini digunakan untuk menampilkan informasi tambahan yang disembunyikan di sebelah kanan layar, akan muncul jika Anda memili button pada header. contoh : https://demo.qodeinteractive.com/bridge76/

Full Screen Menu

Fitur ini digunakan untuk menampilkan fitur fullscreen menu. Jika Anda menggunakan fitur ini, maka navigasi menu utama akan disembunyikan pada sebuah button di sebelah kanan/kiri layar Anda. contoh : https://demo.qodeinteractive.com/bridge4/

Header Top

Fitur ini digunakan untuk melakukan pengaturan pada header top. Pengaturan yang bisa dilakukan antara lain : background header, border, dan padding. Header Top adalah informas yang tampil diatas menu navigasi utama.

Mobile Menu

Fitur ini digunakan untuk melakukan pengaturan pada mobile menu seperti ; warna separator antar menu, background menu, warna tulis menu, dll.

Header Button Icons 

Fitur ini digunakan untuk mengatur warna sebuah icon di navigasi menu. Biasayanya digunakan saat menampilkan informasi social media.

Widgets

Untuk menambahkan konten pada Header Anda, bisa diakses melalui Appearance > Widgets.  Akan muncul setting untuk melakukan penambahan konten pada Header Top Left/ Top Right / Bottom Right

Untuk informasi-informasi yang bisa ditambahkan pada widget antara lain :

• Social Media Icons
• Image Media
• Teks
• Struktur HTML
• Widget Bawaan WordPress & Tema
• File Embed sepert Youtube, Vimeo, Spotify, dll

Mengelola Header Website (Astra Theme)

Untuk pengelolaan footer Anda bisa mengikuti langkah-langkah dibawah ini.

1. Setelah Anda mengetahui tema yang digunakan (Astra Theme). Pilih Appearance > Customize.

2. Setelah masuk di halaman customize, pilih Header Builder

3. Di dalam Header Builder terdiri dari Visual Header Builder, General Tab, dan Design Tab. Anda dapat mengatur element dengan menggunakan Visual Builder dan melakukan customize menggunakan General dan Design Tab

Visual Header Builder

Visual Header Builder membuat Anda lebih fleksibel dalam melakukan perubahan pada desain footer website Anda.

• Pada Visual Header Builder, Anda bisa mengatur struktur footer pada Above Footer (baris 1), Primary (baris 2 / tengah), dan Below (baris 3)
• Untuk menambahkan element, Anda cukup mengklik tanda plus yang terdapat pada struktur footer yang diinginkan (Button, HTML,Widgets, Social, Primary Menu, Secondary Menu)
• Untuk melakukan pengaturan posisi, Anda cukup melakukan drag and drop saja pada element yang digunakan.

Header Builder Element

Tema Astra membeberikan beberapa element pada header yang bisa digunakan, yaitu :

• Site Title & Logo : Digunakan untuk mengatur judul website, icon, tagline, dan logo website.
• Cart : Digunakan untuk menampilkan icon keranjang belanja di navigasi menu (bisa menampilkan harga total pembelian).
• HTML 1/2 : Digunakan untuk menambahkan informasi berupa script HTML.
• Primary Menu : Digunakan untuk mengatur informasi navigasi menu utama pada header.
• Secondary Menu : Digunakan untuk mengatur informasi navigasi menu sekunder pada header.
• Social : Digunakan untuk menampilkan informasi sosial media.
• Search : Digunakan untuk menampilkan fitur pencarian pada navigasi menu.
• Button : Digunakan untuk menampilkan button.

Untuk melakukan setting pada struktur Header (Above, Primary, Below Header), pilih icon pengaturan. Kemudian Anda akan diarahkan ke tampilan setting desain.

General Tab

Element yang di tambahkan pada visual header builder akan tersedia pada General Tab. Untuk melakukan pengaturan, Anda bisa klik pada element untuk melakukan pengaturan lebih detail.

Design Tab

Anda bisa melakukan pengaturan desain pada masing-masing element. Desain yang dimaksud adalah desain untuk background warna, warna teks, spacing, dll.

Header Types

Di dalam Header Builder, Anda akan mendapatkan fitur Header Types pada tab General. Pada tab General, Anda bisa mengatur transparent header pada tampilan tertentu

Untuk melakuak pengaturan desain, Anda bisa menggunakan tab Design