Panduan Mengelola Header Website Niagaweb

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.

Penggunaan Tema pada website yang diciptakan oleh Niagaweb mempengaruhi cara pengelolaan header pada masing-masing tema yang digunakan. 

Untuk melakukan pengecekan website Anda menggunakan tema apa? Bisa cek pada artikel berikut ini :

Mengelola Header Website Niagaweb (Bridge Theme)

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

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

bridge header

Header Position

header position

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

Contoh Header Left

header left

Contoh Header Normal (Horizontal)

header normal

Header 

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)

qode search

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/

side area

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/

full screen

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.

header top

Mobile Menu

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

mobile menu

Header Button Icons 

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

header button icons

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

widget headers

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 Niagaweb (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 builder header

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.

widget setting

Design Tab

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

footer desing

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

header types general

Untuk melakuak pengaturan desain, Anda bisa menggunakan tab Design

header types design

Apakah artikel ini membantu?

Bagikan jika Anda menyukai halaman ini.

Artikel Serupa


related posts

Cara Migrasi Website Weebly ke Hosting

Weebly merupakan platform untuk membuat website berbasis drag and drop. Anda dapat membangun website secara praktis tanpa coding sekalipun. Sayangnya layanan Weebly Niagahoster akan dinonaktifkan pada tanggal 30 Januari 2023. Bagi Anda yang masih menggunakan layanan ini harap untuk melakukan pemindahan atau migrasi sebelum tanggal tersebut. Pada panduan ini, kami akan memberikan solusi alternatif agar […]

Selengkapnya
related posts

Cara Instal Firebase CLI dan Deploy Hosting

Dibuat pada 9 September 2022 Firebase adalah Backend as a Services (BaaS) yang menyediakan beragam tools dan layanan untuk membantu developer mengembangkan suatu aplikasi (web dan mobile) dengan lebih cepat.  Backend as a Services sendiri adalah kategori layanan cloud yang mengelola back-end aplikasi. Artinya, Firebase sebagai BaaS akan mengurusi segala hal mengenai back-end seperti database, […]

Selengkapnya
related posts

Cara Meminta Pengindeksan Ulang URL (Recrawl) pada Google

Dibuat pada 25 Januari 2022 Crawl atau web crawling adalah proses mencari kumpulan halaman dari sebuah website untuk dilakukan pengindeksan. Anda dapat melakukan crawl URL pada Google dengan tujuan agar setiap URL pada website Anda ditemukan dan dapat diindeks oleh Google.  Apabila URL pada website telah diperiksa oleh Google namun tidak kunjung terindeks, Anda dapat […]

Selengkapnya