header website

Header Website : Pengertian, Ukuran dan Contohnya!

Ketika Anda mengunjungi situs web untuk pertama kalinya, kedua, atau bahkan kesepuluh, apa hal pertama yang Anda lihat? Bagi banyak dari kita, itu adalah header. Salah satu alasannya adalah karena mata kita secara alami tertarik ke bagian paling atas halaman. Ini seperti menonton film atau membaca artikel surat kabar. Anda ingin memulai di awal cerita, bukan di tengah-tengahnya.

Apa Itu Header Website?

Header situs web adalah bagian atas situs web tempat logo, navigasi, dan terkadang informasi, tautan, dan tombol lainnya berada. Header adalah salah satu elemen terpenting dari situs web Anda, karena rasio antara ruang yang dibutuhkan dan manfaat yang diberikannya tak tertandingi.

Header memberikan gambaran umum tentang seluruh situs web dan navigasi yang mudah melalui tautan, menu yang dirancang dengan baik, dan bilah pencarian. Mereka juga merupakan tempat yang tepat untuk mempromosikan merek Anda dengan logo perusahaan dan tipografi serta skema warna yang tepat. Terakhir, mereka dapat memaksimalkan keterlibatan melalui CTA, akses cepat ke e-commerce, dan animasi yang menyoroti elemen-elemen ini.

Bagian ini biasanya konsisten di semua halaman di situs web, namun, beberapa desain memberikan tampilan header yang sedikit berbeda pada halaman beranda untuk menarik perhatian ke area unggulan situs.

Secara keseluruhan, header yang baik membuat situs web Anda lebih mudah dinavigasi, menetapkan merek Anda, dan menciptakan pengalaman menjelajah yang konsisten di seluruh situs web Anda.

Baca Juga :   11+ Halaman Website Penting yang Wajib Ada di Websitemu

Pentingnya Header Website

Header membuat halaman dapat dipindai

Header memudahkan orang untuk memindai halaman untuk mendapatkan informasi. Mereka sering memulai dengan header pertama. Jika itu menarik minat mereka, mereka akan beralih ke subpos. Subpos biasanya memberi mereka satu informasi yang mereka cari, dan kemudian subpos berikutnya memberi mereka informasi lain. Jika mereka menginginkan detail, mereka akan membaca apa yang ada di antara subpos tersebut.

Menggunakan header yang secara akurat mencerminkan apa yang ada di artikel Anda akan membantu memastikan orang benar-benar membaca konten Anda. Pemasaran konten itu penting dan membutuhkan banyak usaha dan Anda ingin memastikan Anda melihat pengembalian atas upaya itu. Pastikan header dan subheader Anda menarik dan juga akurat dan Anda akan lebih mungkin menarik orang-orang yang ingin mempelajari lebih lanjut tentang apa yang Anda tawarkan.

Header membantu SEO

Header adalah bagian penting dari SEO on-page. Mesin pencari, seperti Google, menyukai header karena alasan yang sama seperti orang – header membuat membaca konten menjadi mudah dan cepat. Ketika bot mesin pencari dapat merayapi halaman situs web dengan beralih dari satu judul ke judul berikutnya, ia dapat memahami inti informasinya. Dengan cara ini ia tahu pencarian online mana yang menentukan peringkat halaman Anda.

Saat membuat header Anda, pikirkan tentang kata kunci yang Anda inginkan untuk peringkat halaman Anda. Jika Anda tidak dapat secara alami menggunakan kata kunci ini di header Anda, maka mungkin Anda perlu memikirkan kembali salinan di sisa halaman Anda. Header Anda harus memberikan gambaran umum tentang konten di halaman Anda atau di posting blog Anda, dan Anda ingin konten itu relevan dengan pencarian yang ingin Anda rangking di Google.

Baca Juga :   Tutorial Lengkap Cara Membuat Website Gratis dengan Google Site

Ukuran Header Website

Tabel berikut akan menjawab pertanyaan Anda dan dapat menjadi pedoman Anda kapanpun Anda ingin memilih atau membuat gambar header situs web untuk situs web Anda.

Ukuran Header

Lebar

Tinggi

Ratio

Ukuran Header 800 – Header atau Banner Klasik

800

200

4:1

Ukuran Header 1024 Sepertiga Halaman

1024

256

4:1

Ukuran Header 1024 Halaman Sepertiga (Tinggi Ekstra)

1024

300

24:7

Ukuran Header 1024 Setengah Halaman

1024

384

8:3

Ukuran Header 1024 Halaman Penuh (Hero Header)

1024

576

16:9

Ukuran Header 1280 Sepertiga Halaman

1280

267

24:5

Ukuran Header 1280 Halaman Sepertiga (Tinggi Ekstra)

1280

375

24:7

Ukuran Header 1280 Setengah Halaman

1280

400

16:5

Ukuran Header 1280 Halaman Penuh (Hero Header)

1280

720

16:9

Ukuran Header 1366 Sepertiga Halaman

1366

256

16:3

Ukuran Header 1366 Setengah Halaman

1366

384

32:9

Ukuran Header 1366 Halaman Penuh (Hero Header)

1366

768

16:9

Ukuran Header 1440 Sepertiga Halaman

1440

300

24:7

Ukuran Header 1440 Setengah Halaman

1440

450

16:5

Ukuran Header 1440 Halaman Penuh (Hero Header)

1440

810

16:9

Ukuran Header 1600 Sepertiga Halaman

1600

300

16:3

Ukuran Header 1600 Setengah Halaman

1600

450

32:9

Ukuran Header 1600 Halaman Penuh (Hero Header)

1600

900

16:9

Ukuran Header 1920 Sepertiga Halaman

1920

360

16:3

Ukuran Header 1920 Setengah Halaman

1920

540

32:9

Ukuran Header 1920 Dua Halaman Ketiga (Tinggi Ekstra)

1920

720

16:6

Ukuran Header 1920 Halaman Penuh (Hero Header)

1920

1080

16:9

Contoh Inspirasi Header Website

Meskipun mereka hanya memiliki beberapa komponen, ada banyak cara untuk mengkonfigurasi header situs web Anda. Mari kita lihat lebih banyak contoh situs web untuk memberi Anda ide dan inspirasi.

Header satu baris dengan logo rata kiri

Dasar namun efektif, Nevaweb hanya memiliki empat elemen navigasi yang dapat diklik ditambah bilah pencarian. Perhatikan juga bagaimana Nevaweb memilih penyelarasan yang benar. Ini menonjolkan logo, memberikan lebih banyak ruang untuk menarik perhatian pengunjung.

Baca Juga :   Cara Membuat Blog Pribadi Menarik Menggunakan HP untuk Pemula

Header satu baris dengan bilah pemberitahuan

Sementara header itu sendiri cukup biasa, spanduk di atas dimaksudkan untuk menarik perhatian pada sesuatu yang baru, penting, dan / atau menarik. Elementor menggunakan ini baru-baru ini untuk mengumumkan bahwa mereka sekarang menawarkan cloud hosting untuk WordPress. Spanduk ini, tentu saja, akan menyertakan CTA. Setelah diklik, pengunjung akan diarahkan ke halaman arahan yang ditunjuk yang merinci penawaran di spanduk.

Header dua tingkat

Header dua tingkat dapat membantu menyajikan lebih banyak opsi navigasi tanpa membanjiri pengunjung dengan satu baris ikon berkelanjutan.

Header sticky bar

Beberapa situs menggunakan sticky bar sehingga header menempel dengan pengunjung saat mereka menggulir ke bawah halaman. Alasan mereka sederhana: Berikan pengunjung Anda pilihan untuk menavigasi ke bagian mana pun dari situs web Anda kapan saja.

Floating header

Seperti yang terlihat di beranda Mixpanel, header mengambang mirip dengan bilah lengket, perbedaannya adalah ketika Anda menggulir ke bawah, Anda melihat halaman web di bawah dan di atas header, sehingga menciptakan efek mengambang.

Hamburger slide-in

Kurang umum tetapi tetap menarik, menu hamburger adalah demonstrasi yang bagus dari desain web yang ramping. Latar belakang menjadi gelap saat menu masuk, membantu menarik perhatian pengunjung ke opsi yang dapat diklik.

Ingin Buat Website Bisnis Lebih Mudah Anti Ribet?

Header situs web Anda adalah bagian penting dari pengalaman situs web pengunjung Anda. Header yang fungsional dan konsisten dapat membuat perbedaan besar dalam kegunaan situs Anda. Anda dapat melakukan banyak hal untuk membuat header Anda terlihat dan terasa unik untuk situs Anda dan selama fitur umum inti ada, konten dan desain Anda akan bersinar.

Tertarik untuk membuat website? atau jika anda memilih langkah praktis untuk membuat web dengan menggunakan jasa pembuatan website professional, anda dapat menggunakan layanan dari Nevaweb. Konsultasikan website impianmu sekarang juga!

×