Headers Website Keren: Pengertian dan Contoh

Ketika membangun website, Anda pasti akan bertemu dengan headers. Ada beberapa jenis headers website yang akan dijelaskan berikut ini.

Sebuah halaman website idealnya pasti akan memiliki header minimal 1. Header ini tentu saja sangat berguna terutama untuk memberikan navigasi yang jelas untuk visitor dan tentunya search engine supaya bisa mengenali struktur website dengan jelas.

Headers Website

Desain header bisa saja berbeda antara 1 website dengan website lainnya. Supaya lebih jelas, WPNesia akan menjelaskan pengertian dan contoh dari headers website.

Apa Itu Header?

Header adalah gambar visual atau elemen tipografi yang berjalan di bagian atas beranda website. Header akan membuat situs web Anda langsung dikenali, terutama jika menggunakan logo dan warna. Di header ini juga terdapat link navigasi terutama link beranda untuk bertindak sebagai alat navigasi utama.

Yang harus dipahami adalah; header halaman dan head adalah hal yang berbeda. Memang istilahnya sama namun header website ini menjelaskan bagian halaman yang dilihat dan berinteraksi dengan visitor, sedangkan head adalah area HTML halaman yang diatur dalam kode halaman dengan tag.

Segala sesuatu di antara tag ini menentukan bagaimana layanan pihak ketiga seperti mesin pencari seperti Google dan dan browser melihat halaman tersebut.

Fitur yang biasanya terdapat di headers website adalah:

  • Logo
  • Navigasi atau menu
  • Judul halaman
  • Kolom pencarian atau search
  • Halaman login
  • Profil
  • Cart.

Dalam perkembangannya, agar semakin menarik, banyak pengembang theme wordpress yang kemudian mengembangkan berbagai jenis headers agar theme tersebut memiliki desain menarik dan tentu saja memudahkan visitor mencari informasi yang dibutuhkan.

Supaya lebih mudah, akan diberikan beberapa contoh jenis headers website berikut ini.

Jenis Headers Website dan Contohnya

Hero Image

Hero image adalah banner atau gambar besar yang bertujuan untuk menarik perhatian pengunjung secepat mungkin ketika dia memasuki halaman website. Letaknya berada di bagian atas halaman tepat di bawah tajuk website.

Headers Website
Contoh hero image website

Kalau Anda mengunjungi halaman utama WPNesia.id, Anda akan melihat hero image di bagian atas. Tentu saja tujuan memberikan hero image ini supaya pengunjung mudah melihatnya dan kemudian melakukan aksi berikutnya.

Namun seringnya hero image ini bisa menambah waktu loading halaman website. Semakin cepat hero image terbuka, semakin baik bagi pengunjung. Karena itu dibutuhkan hosting yang cepat supaya hero image terbuka secepatnya.

Animated Header

Animated Header adalah elemen visual yang bergerak dalam format gif, HTML5, AMPHTML, atau MP4. Jadi animated header ini bisa berupa teks, video, dan komponen interaktif lainnya.

Headers Website
Contoh animated header banner (bannerboo.com)

Tantangan menggunakan animated banner adalah rawan membuat website membutuhkan waktu pemuatan yang lebih lama karena ukurannya yang rata-rata selalu besar.

Kalau website Anda berencana ingin menggunakan animated banner, sangat disarankan menggunakan server yang kencang dan sesuai target negara pengunjung.

Contohnya, kalau pengunjung website Anda berasal dari Indonesia, tentu menggunakan server yang berada satu negara dengan pengunjung adalah pilihan yang bijaksana. Akan semakin bagus jika menggunakan VPS Indonesia yang berkualitas.

CTA Header

Headers Website
Contoh CTA Header milik Neil Patel

CTA adalah call-to-action (CTA) yang artinya bertujuan supaya pengunjung melakukan aksi. Jadi CTA header adalah banner, teks atau komponen apapun yang yang meminta pengguna untuk melakukan tindakan seperti mendaftar ke buletin, mengunduh file demo, mengikuti newsletter, atau membeli produk.

Split Screen Header

Headers Website
Split Screen Header Dari Demo Theme Blocksy

Split Screen Header adalah header dengan dua bagian terpisah yang menampilkan dua atau lebih informasi. Contohnya, Anda ingin menampilkan profil pada sisi kiri dan informasi lain seperti testimoni di bagian kanan. Biasanya split screen header digunakan di website portfolio, jasa, atau servis.

Fixed Header

Headers Website
Contoh Fixed Header (Sarah Tanner/dribbble.com)

Fixed header atau juga disebut sticky header adalah header yang saat halaman digulir ke bawah, area logo header dan menu tetap ditampilkan di bagian atas halaman. Tujuannya tentu saja supaya header ini tetap ditampilkan sehingga pengunjung lebih mudah melakukan klik navigasi tanpa perlu bergulir ke bagian atas halaman.

Video Header

Headers Website
Contoh Video Header (bandzoogle.com)

Video Header adalah menempatkan video di header yang bertujuan untuk menampilkan menggambarkan berbagai informasi seperti profil, visi, misi, keunggulan dan sebagainya.

Tantangan menggunakan video header tentu saja akan memberatkan loading website. Tentu saja akan dibutuhkan optimasi website yang tepat supaya video header ini tidak memberatkan website.

Carousel Header

Headers Website
Carousel Header (v2r_tom/tenor.com)

Carousel Header adalah menempatkan banyak gambar atau konten dalam satu ruang. Tujuannya untuk menghemat ruang dalam layar dan mendorong pengunjung untuk fokus pada konten situs web yang penting dan meningkatkan daya tarik visual secara keseluruhan secara efektif.

Menggunakan carousel header juga bisa menjadi tantangan. Mungkin carousel header tampak mencolok dan keren dan sehingga disukai beberapa pengunjung.

Namun beberapa pengunjung lain bisa saja kurang suka dengan carousel header yang justru menciptakan pengalaman pengguna yang buruk. Dan tentunya carousel header juga akan menambah waktu pemuatan halaman website.

Parallax Header

Headers Website
Parallax Header (squarespace.com)

Parallax Header adalah header yang menggunakan efek Parallax. Ini adalah teknik desain web modern di mana elemen latar belakang bergulir lebih lambat daripada konten latar depan. Hasilnya adalah ilusi kedalaman dan gerakan sehingga mendorong pengguna untuk terus menggulir konten terkait.

Kesimpulan

Headers website adalah istilah yang diberikan untuk strip atau ikon utama yang berada di bagian atas situs web Anda.

Tujuannya adalah untuk memperkenalkan merek Anda dan mengirimkan pesan. Header biasanya muncul di setiap halaman situs web Anda, meskipun penempatannya dapat bervariasi sesuai kebutuhan.

Sebelum memutuskan menggunakan header yang berada di bagian atas (above the fold), pertimbangkan efeknya bagi website Anda.

Jangan menggunakan header berat seperti mungkin video header yang justru akan “membunuh” waktu pemuatan website.

Gunakan header yang tepat sasaran sesuai dengan niche website Anda. Jenis headers website seperti carousel, video, dan animated header ideal digunakan untuk website toko online atau servis.

Kalau website Anda blog pribadi, headers seperti hero image dan parallax masih masuk akal untuk digunakan.

Lulusan Teknik Informatika yang berkecimpung di dunia internet sejak 2002 sebagai part-time blogger dan internet marketer. Tertarik dengan teknologi pada umumnya, pengembangan website dan gadget pada khususnya.

4 thoughts on “Headers Website Keren: Pengertian dan Contoh”

  1. Mas request cara menghilangkan tulisan Menu untuk versi mobile di sebelah kanan atas itu dong mas, biar yang muncul icon garis tiga nya saja, tulisan Menu nya di hilangkan hehe

    Biar tambah simpel, bdw saya dulu perasaan pernh otak atik dan menyembunyikan tulisan menu tersebut tapi sekarang malah lupa gimana caranya ya hehe

    Di tunggu responnya

    Reply
    • Ga usah bikin ribet² gan, ambil aja dari demo theme yang ada di site library, itu saya ambil dari template “Search” di-copy saja element-nya.

      Kemudian bikin bikin element -> blocks (pilih page hero) -> paste element yang diambil dari template search -> dan edit dikit.

      gitu aja kisi² nya 😀

      Reply

Leave a Comment


Klik Webnesia