Hero section adalah bagian paling atas halaman website yang langsung terlihat, berisi headline, subheading, tombol CTA, dan visual untuk menarik pengunjung.
Area hero section menjadi kesan pertama sebelum siapa pun menggulir layar. Keputusan bertahan atau pergi sering jatuh pada layar pertama. Berikut ini akan pembahasan komponen, fungsi, jenis, contoh nyata, ukuran, hingga cara menyusun hero section yang mendorong konversi, baik bagi desainer maupun pemilik bisnis.
Apa Itu Hero Section
Hero section menempati area yang terlihat tanpa menggulir layar, atau dikenal sebagai above the fold. Sebagai salah satu komponen website yang paling awal dilihat, bagian tersebut ikut menentukan apakah pengunjung bertahan.
Hero section berbeda dari header. Header memuat logo dan menu navigasi, sedangkan hero section berada tepat di bawahnya dan membawa pesan utama beserta ajakan bertindak.
Berikut perbedaan hero section dengan elemen lain yang sering tertukar:
| Elemen | Isi | Fungsi Utama |
|---|---|---|
| Hero section | Headline, subheading, CTA, dan visual | Menyampaikan pesan utama dan mendorong tindakan |
| Header | Logo dan menu navigasi | Membantu pengunjung berpindah halaman |
| Banner | Promosi atau pengumuman singkat | Menyorot penawaran tertentu |
| Slider | Rangkaian gambar atau pesan yang bergantian | Menampilkan beberapa pesan dalam satu area |
| Landing page | Satu halaman utuh dengan satu tujuan | Menjadi tempat pengunjung melakukan konversi |
Istilah hero image, hero banner, dan hero header sering dipakai bergantian dengan hero section. Padahal masing-masing menunjuk bagian yang berbeda:
- Hero image: gambar besar yang menjadi visual utama hero section
- Hero banner: hero section berbentuk banner lebar di bagian atas halaman
- Hero header: hero section yang menyatu dengan header, misalnya menu transparan di atas visual
5 Komponen Hero Section
Hero section yang efektif tersusun dari empat komponen inti dan satu lapisan pendukung. Masing-masing memegang peran berbeda dalam menuntun pengunjung.
1. Headline
Headline adalah teks terbesar yang menyampaikan inti tawaran dalam satu kalimat singkat. Bagian tersebut sebaiknya bisa dimengerti dalam tiga sampai lima detik.
Headline yang kuat menjawab tiga hal, yakni apa yang ditawarkan, siapa sasarannya, dan manfaat yang didapat. Dari sisi SEO, headline hero sering dipasang sebagai tag H1, sehingga cukup satu per halaman.
2. Subheading
Subheading berukuran lebih kecil dan berfungsi menjelaskan headline. Satu sampai dua kalimat sudah cukup untuk menambahkan konteks, misalnya cara kerja layanan atau kelompok pengguna yang dituju.
3. Tombol Call to Action (CTA)
CTA adalah tombol yang mengarahkan pengunjung ke langkah berikutnya, misalnya Hubungi Kami, Lihat Portofolio, atau Beli Sekarang. Gunakan kata kerja yang jelas dan warna yang kontras dengan latar.
Pada layar sentuh, ukuran tombol sebaiknya berkisar 44 hingga 48 piksel agar mudah ditekan dengan jempol.
4. Hero Visual
Hero visual berupa foto, ilustrasi, mockup produk, atau video pendek yang mendukung pesan headline. Pilih visual yang menunjukkan hasil atau situasi pemakaian nyata, bukan foto stok generik yang tidak berkaitan dengan tawaran.
5. Elemen Pendukung Kepercayaan
Sebagian hero section menambahkan bukti sosial di sekitar tombol utama. Elemen yang bisa dipakai:
- Logo klien atau mitra
- Rating dan ulasan pelanggan
- Jumlah pengguna atau proyek yang sudah selesai
- Garansi, sertifikasi, atau penghargaan
Semua data harus nyata dan bisa diverifikasi, sebab klaim berlebihan justru menurunkan kepercayaan.
Fungsi Hero Section bagi Website dan Bisnis
Hero section menjalankan sejumlah fungsi yang berdampak langsung pada performa halaman:
- Menarik perhatian pada detik pertama kunjungan
- Menyampaikan pesan utama dan nilai jual
- Mengarahkan pengunjung menuju tindakan yang diinginkan
- Membangun kesan profesional dan kepercayaan terhadap merek
- Menekan kemungkinan pengunjung langsung keluar dari halaman
Dari sisi bisnis, hero section bekerja seperti etalase toko. Pengunjung menilai kejelasan tawaran hanya dari layar pertama, sebelum membaca detail di bagian bawah.
Dari sisi teknis, bagian tersebut memengaruhi metrik Core Web Vitals. Elemen terbesar di layar pertama umumnya dihitung sebagai Largest Contentful Paint (LCP), dan Google menargetkan nilainya di bawah 2,5 detik.
Jenis Hero Section yang Sering Digunakan
Pilihan format bergantung pada tujuan halaman dan karakter audiens. Jenis yang paling sering dipakai adalah:
- Hero gambar: satu foto atau ilustrasi besar dengan teks di atasnya, cocok untuk company profile dan situs jasa
- Hero video: video pendek tanpa suara sebagai latar, cocok untuk brand yang mengandalkan suasana
- Hero terbagi (split screen): teks di satu sisi dan visual di sisi lain, cocok untuk produk digital dan aplikasi
- Hero teks polos: hanya tipografi dan tombol, cocok untuk blog serta halaman yang mengutamakan kecepatan
- Hero slider: beberapa slide bergantian dalam satu area
Slider perlu kehati-hatian ekstra. Slide kedua dan seterusnya sering terlewat, sehingga pesan utama dan CTA sebaiknya tetap berada di slide pertama.
Contoh Hero Section pada Website Jasa Ekspedisi
Contoh berikut memperlihatkan hero section pada website jasa ekspedisi MAS Cargo Express. Tampilan tersebut menggabungkan pesan merek, visual kurir, dan alat yang langsung bisa dipakai pengunjung.
Tabel berikut memetakan setiap elemen pada contoh tersebut:
| Elemen | Yang Terlihat pada Contoh | Fungsi |
|---|---|---|
| Header | Logo, menu Home, Layanan Kami, Rute, Cek Tarif, Blog, Tentang Kami, Kontak, dan tombol Cek Resi | Navigasi serta akses cepat ke fitur pelacakan |
| Headline | Nama merek MAS Express dalam tipografi besar berwarna putih dan merah | Membuat merek langsung dikenali |
| Subheading | Tagline yang menyebut jenis layanan, jangkauan wilayah, serta keunggulan cepat, aman, dan harga terjangkau | Menjelaskan tawaran dalam satu kalimat |
| Deskripsi | Panel merah berisi cakupan layanan, mulai dari pengiriman barang, pindahan rumah, alat usaha, mesin, hingga cargo besar | Memperjelas jenis kebutuhan yang dilayani |
| Hero visual | Kurir berseragam biru membawa kardus berlogo dengan latar kontainer biru | Menguatkan citra ekspedisi dan warna merek |
| Alat cek resi | Kolom nomor resi dan tombol Lacak | Melayani kebutuhan pelacakan paket |
| Alat cek ongkir | Kolom kota asal, kota tujuan, berat, dimensi, dan tombol Lihat Ongkir | Mengubah minat menjadi permintaan tarif |
| Bilah kontak melayang | Tombol Telepon, Cek Tarif, dan WhatsApp | Menjaga jalur kontak selalu terjangkau |
Poin yang layak dicermati dari contoh tersebut:
- Dua kebutuhan utama pengunjung ekspedisi, yaitu melacak paket dan menghitung ongkir, langsung tersedia tanpa menggulir
- Warna merah dipakai konsisten untuk tombol aksi sehingga menonjol di atas latar putih dan biru
- Bilah kontak melayang menjaga akses telepon dan WhatsApp tetap terlihat
- Jumlah aksi lebih dari dua, tetapi tertata dalam dua kartu terpisah sehingga hierarkinya tetap terbaca
Aturan membatasi CTA berlaku untuk ajakan yang saling bersaing. Pada contoh tersebut, melacak paket dan menghitung ongkir merupakan dua kebutuhan utama, sehingga keduanya wajar tampil berdampingan.
Satu hal yang perlu dicek pada tampilan serupa adalah jika nama merek pada visual berupa gambar, halaman tetap membutuhkan headline H1 berbentuk teks agar terbaca mesin pencari dan pembaca layar.
Ukuran Hero Section yang Ideal
Tidak ada ukuran baku, tetapi sejumlah patokan umum bisa dijadikan titik awal dan disesuaikan dengan hasil pengujian:
| Perangkat | Tinggi Area | Ukuran Gambar | Catatan |
|---|---|---|---|
| Desktop | 70 hingga 100 persen tinggi layar | 1920 x 1080 piksel | Rasio 16:9, pastikan CTA tetap terlihat tanpa menggulir |
| Tablet | 60 hingga 90 persen tinggi layar | Lebar sekitar 1280 piksel | Uji orientasi potret dan lanskap |
| Ponsel | 60 hingga 100 persen tinggi layar | Lebar 750 hingga 1080 piksel, rasio 4:5 atau 9:16 | Gunakan unit svh agar tidak terpotong bilah alamat browser |
Jaga ukuran berkas gambar di bawah sekitar 200 KB setelah dikompres. Uji juga pada laptop berlayar kecil, misalnya 1366 x 768 piksel, sebab area yang terlihat lebih pendek daripada ukuran layarnya.
Panduan Hero Section Berdasarkan Jenis Website
Prioritas hero section berbeda pada setiap jenis website. Tabel berikut merangkum fokus, CTA, dan visual yang cocok:
| Jenis Website | Fokus Hero Section | Contoh CTA Utama | Visual yang Cocok |
|---|---|---|---|
| Toko online | Promo, produk unggulan, dan keunggulan belanja | Belanja Sekarang | Foto produk atau kampanye musiman |
| Company profile | Kredibilitas dan layanan utama | Hubungi Kami | Foto tim, kantor, atau proyek |
| Portofolio | Keahlian dan karya terbaik | Lihat Karya | Karya unggulan atau foto profil |
| Blog | Topik utama dan kemudahan menemukan artikel | Baca Artikel | Tipografi atau ilustrasi ringan |
| Landing page kampanye | Satu penawaran dengan satu tujuan | Daftar Sekarang | Mockup produk dan bukti sosial |
| Jasa dengan alat bantu | Kebutuhan yang bisa langsung dilakukan | Cek Ongkir | Kurir, armada, atau foto layanan |
Cara Membuat Hero Section yang Menarik
Langkah berikut bisa diterapkan pada website bisnis, toko online, maupun landing page:
- Tentukan satu tujuan halaman
Misalnya mendapatkan pesan WhatsApp, pendaftaran, atau pembelian. Seluruh elemen hero harus mengarah ke tujuan tersebut. - Tonjolkan manfaat, bukan fitur
Tulis “Website yang Mudah Diperbarui Sendiri”, bukan “Website dengan CMS dan Panel Admin”. - Batasi jumlah CTA
Satu tombol utama dan satu tombol pendukung sudah cukup agar pengunjung tidak bingung memilih. - Pilih visual yang berkaitan dengan tawaran
Gunakan foto asli, ilustrasi yang konsisten, atau mockup produk. - Susun hierarki visual
Headline paling besar, subheading lebih kecil, dan CTA dengan kontras tertinggi. Beri ruang kosong agar mata tidak lelah. - Rancang untuk ponsel lebih dulu
Cek proporsi perangkat di Google Analytics 4, sebab pada sebagian besar website ponsel mendominasi. Pastikan headline dan tombol tetap terlihat tanpa menggulir. - Tambahkan animasi secukupnya
Efek muncul yang halus atau hover pada tombol sudah memadai, sedangkan animasi berat justru memperlambat halaman.
Membuat Hero Section dengan HTML dan CSS
Pendekatan tersebut memberi kendali penuh atas tampilan dan kecepatan. Langkah dasarnya:
- Buat elemen section yang membungkus seluruh isi hero
- Isi dengan satu heading H1, satu paragraf subheading, dan tautan berbentuk tombol
- Tempatkan gambar dengan elemen img, atau sebagai gambar latar bila fungsinya hanya dekoratif
- Atur tinggi section, posisi teks dengan flexbox, dan gambar latar agar menutup seluruh area
- Tambahkan aturan responsif agar susunan menyesuaikan layar kecil
Membuat Hero Section di WordPress dengan Elementor
Bagi pemilik bisnis tanpa latar belakang pemrograman, Elementor menyediakan pengaturan visual. Langkah yang bisa diikuti:
- Buat container baru di bagian paling atas halaman
- Atur Min Height sesuai tabel ukuran, lalu pilih gambar latar
- Tambahkan widget Heading, Text Editor, dan Button
- Sesuaikan ukuran huruf serta jarak pada tampilan tablet dan ponsel
- Unggah gambar berformat WebP yang sudah dikompres
Membuat Desain Hero Section dengan Figma atau Canva
Untuk merancang tampilan sebelum dikembangkan, langkah berikut dapat diikuti di Figma maupun Canva:
- Buat kanvas ukuran desktop, misalnya 1440 x 900 piksel, dan ukuran ponsel, misalnya 390 x 844 piksel
- Susun headline, subheading, tombol, dan visual sesuai hierarki
- Cek kontras teks terhadap latar
- Ekspor aset visual, lalu kompres dan ubah ke format WebP sebelum dipasang
Contoh Headline dan CTA yang Lebih Efektif
Headline yang kuat mengikuti rumus sederhana: hasil yang diinginkan, sasaran pembaca, dan cara mencapainya.
Tabel berikut membandingkan versi umum dengan versi yang lebih spesifik:
| Elemen | Kurang Efektif | Lebih Efektif | Alasan |
|---|---|---|---|
| Headline | Selamat Datang di Website Kami | Website Bisnis yang Mudah Dikelola Sendiri | Menyebut manfaat dan sasaran |
| Headline | Solusi Digital Terbaik | Toko Online yang Mudah Ditemukan di Google | Menyebut hasil dan jenis layanan |
| Subheading | Kami siap membantu berbagai kebutuhan | Desain responsif, SEO dasar, dan panduan pengelolaan konten dalam satu paket | Menyebut isi layanan secara konkret |
| CTA | Klik di Sini | Minta Penawaran | Menjelaskan hasil setelah tombol ditekan |
| CTA | Kirim | Hubungi via WhatsApp | Menyebut kanal yang akan dipakai |
Cara Mengoptimalkan Kecepatan Muat Hero Section
Hero section memuat gambar atau video terbesar di halaman, sehingga sering menjadi penyebab utama website terasa lambat. Langkah teknis yang bisa diterapkan:
- Kompres gambar dan gunakan format WebP atau AVIF
- Sediakan beberapa ukuran gambar dengan atribut srcset agar ponsel tidak mengunduh file berukuran desktop
- Tentukan lebar dan tinggi gambar agar tampilan tidak bergeser saat dimuat
- Muat gambar hero lebih awal dengan preload atau fetchpriority
- Beri gambar poster pada video, lalu nonaktifkan video pada layar kecil
Berbeda dengan gambar di bagian bawah halaman, gambar hero sebaiknya tidak memakai lazy load. Gambar yang sudah terlihat sejak awal justru akan terlambat tampil bila pemuatannya ditunda.
Aksesibilitas pada Hero Section
Hero section yang mudah diakses membantu semua pengunjung, termasuk pengguna pembaca layar dan pengguna dengan penglihatan terbatas. Rujukan utamanya adalah pedoman WCAG 2.2 dari W3C.
Hal yang perlu dicek pada hero section:
- Kontras teks terhadap latar minimal 4,5 banding 1 untuk teks biasa dan 3 banding 1 untuk teks besar
- Headline dan subheading berupa teks HTML, bukan tulisan yang tertanam di dalam gambar
- Teks alternatif (alt text) yang menjelaskan isi visual, atau alt kosong bila gambar hanya dekoratif
- Kontrol jeda untuk video dan slider yang bergerak otomatis
- Animasi yang menghormati pengaturan pengurangan gerak pada perangkat pengguna
- Fokus keyboard yang terlihat jelas pada tombol dan tautan
Kesalahan pada Hero Section yang Perlu Dihindari
Sejumlah kesalahan berikut sering menurunkan konversi:
- Headline terlalu umum, misalnya “Selamat Datang di Website Kami”
- CTA yang jumlahnya berlebihan sehingga pengunjung bingung memilih
- Teks di atas gambar sulit terbaca karena kontras rendah
- Slider otomatis yang bergeser terlalu cepat
- Gambar berukuran besar yang memperlambat website
- Tampilan ponsel yang hanya mengecilkan versi desktop
Kapan Hero Section Perlu Disesuaikan?
Hero section besar tidak selalu menjadi pilihan terbaik. Halaman berikut sering lebih efektif bila memakai tampilan yang lebih ringkas:
- Halaman kategori dan produk toko online: pengunjung ingin langsung melihat produk, sehingga cukup judul dan filter
- Halaman artikel blog: judul serta gambar kecil sudah memadai agar isi tulisan cepat terbaca
- Halaman login, checkout, dan formulir: fokus pengunjung harus tetap pada pengisian data
- Halaman dashboard atau aplikasi: ruang layar dipakai untuk fungsi, bukan promosi
Prinsipnya sederhana: bila pengunjung sudah tahu apa yang dicari, tampilkan isinya lebih dulu.
Cara Menguji dan Mengukur Efektivitas Hero Section
Hero section perlu dievaluasi secara berkala, sebab perilaku audiens dan tujuan bisnis bisa berubah. Ubah satu elemen pada satu waktu, misalnya teks CTA atau headline, lalu bandingkan hasilnya melalui A/B testing.
Metrik yang layak dipantau:
- Klik pada CTA: menunjukkan daya tarik ajakan
- Scroll depth: menunjukkan berapa persen pengunjung yang melanjutkan ke bawah
- Engagement rate di Google Analytics 4: menunjukkan tingkat interaksi
- Tingkat konversi: pendaftaran, pesan masuk, atau pembelian
- LCP di PageSpeed Insights: menunjukkan kecepatan tampil
Hotmap dari Microsoft Clarity atau Hotjar bisa digunakan untuk membantu melihat area yang diklik dan diabaikan. Beri waktu pengujian yang cukup agar datanya memadai sebelum mengambil keputusan.
Peran Jasa Pembuatan Website dalam Desain Hero Section
Hero section menuntut kerja sama antara penulisan pesan, desain visual, dan pengembangan teknis. Tim TokoWeb Bandung menangani ketiganya, mulai dari menyusun headline, memilih visual, hingga menyetel kecepatan muat.
Agar proses berjalan cepat, ada beberapa bahan yang sebaiknya disiapkan pemilik bisnis sebelum berkonsultasi:
- Tujuan utama website, misalnya menambah pesan masuk atau penjualan
- Profil audiens yang dituju
- Tawaran utama dan keunggulan dibanding pesaing
- Aset visual seperti logo, foto produk, dan foto tim
- Contoh website yang disukai sebagai acuan gaya
Dengan bahan tersebut, tim desain dapat menyusun beberapa alternatif hero section untuk diuji pada halaman yang sudah berjalan.
Pertanyaan Umum seputar Hero Section
- Apakah hero section wajib ada di setiap website?
Tidak wajib secara teknis, tetapi sangat disarankan pada beranda dan landing page. Halaman yang berfokus pada isi, seperti artikel atau formulir, boleh memakai tampilan lebih ringkas. - Berapa jumlah CTA yang ideal pada hero section?
Satu CTA utama dan satu CTA pendukung sudah cukup pada sebagian besar halaman. Lebih dari dua masih wajar bila ajakan tersebut berupa alat yang melayani kebutuhan utama pengunjung, seperti cek resi dan cek ongkir pada contoh di atas. - Apa bedanya hero section dengan banner?
Banner menampilkan promosi atau pengumuman tertentu, sedangkan hero section memuat pesan utama halaman lengkap dengan headline, subheading, CTA, dan visual. Banner bisa menjadi bagian dari hero section. - Berapa ukuran gambar yang ideal untuk hero section?
Untuk desktop, 1920 x 1080 piksel sudah memadai, sedangkan ponsel cukup dengan lebar 750 hingga 1080 piksel. Kompres berkas hingga sekitar 200 KB atau lebih kecil dan gunakan format WebP atau AVIF. - Apakah hero section memengaruhi SEO?
Pengaruhnya tidak langsung. Headline yang dipasang sebagai H1 membantu mesin pencari mengenali topik halaman, sedangkan kecepatan muat hero memengaruhi skor Core Web Vitals. - Apakah gambar hero section boleh memakai lazy load?
Sebaiknya tidak. Gambar di layar pertama perlu dimuat lebih awal agar LCP tetap cepat, sehingga lazy load lebih cocok untuk gambar di bagian bawah halaman. - Apakah hero section harus memakai video?
Tidak. Video hanya layak dipakai bila mendukung pesan dan tidak memperlambat halaman, dengan gambar poster serta versi statis untuk layar kecil.
Referensi:
Data teknis pada artikel disusun dengan merujuk dokumentasi resmi berikut:
- Largest Contentful Paint (LCP), web.dev
- Web Vitals, web.dev
- Web Content Accessibility Guidelines (WCAG) 2.2, W3C
