Hero section website adalah blok besar di bagian paling atas halaman yang dilihat pengunjung sebelum menggulir. Isinya biasanya judul, satu kalimat pendukung, tombol, dan gambar. Dalam beberapa detik, bagian ini harus menjawab dua pertanyaan orang yang baru datang: ini situs apa, dan saya harus melakukan apa sekarang? Kalau gagal, banyak pengunjung pergi sebelum sempat melihat sisa halaman Anda.
Panduan ini menjelaskan apa itu hero section, bagian yang wajib ada, cara menulis judul dan tombol, tata letak yang cocok untuk tiap jenis bisnis, dan cara menjaga hero tetap cepat serta mudah dibaca di ponsel. Semua contoh gambar adalah tangkapan layar asli template Forgelo, jadi Anda bisa membuka template yang sama dan mencoba perubahannya sendiri. Kalau ini situs pertama Anda, panduan cara membuat website dengan AI membahas proses lengkapnya.
Apa itu hero section?
Istilah ini berasal dari dunia desain cetak dan web: hero adalah "bintang" halaman, pesan pertama dan terbesar. Di kebanyakan website, hero berada tepat di bawah menu navigasi dan mengisi sebagian besar layar pertama. Di ponsel, hero bisa mengisi seluruh layar.
Orang sering memakai istilah "above the fold" untuk area yang sama. Fold adalah batas bawah layar pertama sebelum pengunjung menggulir. Karena ukuran layar berbeda-beda, tidak ada satu garis fold yang pasti, tetapi prinsipnya tetap: yang tampil pertama mendapat perhatian paling besar, dan di hero-lah Anda memutuskan apa yang tampil itu.
Hero berbeda dari banner atau slider. Slider yang berganti otomatis menampilkan beberapa pesan bergiliran, sehingga tiap pengunjung hanya melihat salah satunya, sering kali bukan yang paling penting. Hero memilih satu pesan dan satu langkah utama. Untuk situs bisnis kecil, fokus seperti ini hampir selalu lebih baik.
Lima bagian hero section yang baik
Kebanyakan hero section yang efektif tersusun dari lima bagian yang sama. Tidak semua halaman butuh kelimanya, tetapi Anda perlu memutuskan masing-masing dengan sengaja.
| Bagian | Fungsinya | Contoh dari template |
|---|---|---|
| Label kecil (eyebrow) | Menambah konteks seperti kategori atau lokasi | Sekolah dasar, terakreditasi A |
| Judul | Menyebut penawaran atau hasilnya dengan kata sederhana | Tempat anak tumbuh, belajar, dan bahagia. |
| Kalimat pendukung | Menambah untuk siapa, apa yang didapat, atau apa bedanya | Lingkungan yang aman dan menyenangkan, guru yang mengenal setiap anak |
| Tombol utama | Satu langkah berikutnya yang paling penting | Daftar PPDB 2027/2028 |
| Visual | Menampilkan produk, tempat, orang, atau hasil | Foto suasana kelas |
Tombol kedua, seperti "Profil sekolah" atau "Lihat menu", bersifat opsional. Pakai kalau pengunjung datang dengan dua niat yang jelas berbeda. Buat tampilannya lebih kalem dari tombol utama supaya langkah utama tetap menonjol.
Urutannya juga penting. Pengunjung membaca judul lebih dulu, lalu kalimat pendukung, lalu mencari tombol. Kalau tombol letaknya jauh dari teks, atau terdorong ke bawah gambar besar di ponsel, banyak orang tidak akan menemukannya.
Cara menulis judul hero yang berhasil
Judul memikul beban paling berat. Cara mengujinya sederhana: tunjukkan hero kepada orang yang belum pernah mendengar bisnis Anda selama lima detik, lalu tanyakan apa yang Anda tawarkan. Kalau dia tidak bisa menjawab, judulnya terlalu kabur.
Beberapa aturan praktis:
- Sebut penawaran atau hasilnya. "Les privat sepulang sekolah di Yogyakarta" lebih jelas daripada "Memberdayakan generasi masa depan". Judul template sekolah, "Tempat anak tumbuh, belajar, dan bahagia", berhasil karena menyebut hal yang dicari orang tua.
- Pakai kata yang dipakai pelanggan. Kalau orang mencari "fotografer prewedding Bali", kata-kata itu layak masuk ke judul atau kalimat pendukung, bukan "solusi visual storytelling".
- Buat singkat. Satu kalimat, idealnya terbaca sekali lihat di ponsel. Pindahkan detail tambahan ke kalimat pendukung.
- Jangan menumpuk kata sifat. "Cepat, modern, murah, terpercaya" tidak mengatakan apa-apa yang spesifik. Pilih satu klaim yang bisa Anda buktikan.
- Buat kalimat pendukung konkret. Tambahkan untuk siapa, apa yang didapat, atau alasan spesifik untuk percaya, misalnya jam buka, lokasi, atau jenis klien yang dilayani.
Untuk cara menulis teks di halaman lainnya, baca panduan copywriting website. Setelah hero tayang, cocokkan juga dengan kata kunci yang ingin Anda bidik, seperti dijelaskan di panduan dasar SEO website.
Memilih tombol ajakan (call to action)
Tombol adalah tempat hero mengubah perhatian menjadi tindakan, jadi labelnya sama penting dengan warnanya. Label tombol yang baik diawali kata kerja dan menjelaskan apa yang terjadi setelah diklik: "Pesan meja", "Jadwalkan konsultasi", "Coba gratis", "Daftar PPDB". Label yang kabur seperti "Kirim", "Klik di sini", atau "Selengkapnya" tidak memberi alasan untuk mengklik.
Sesuaikan tombol dengan apa yang siap dilakukan pengunjung baru. Orang yang baru menemukan sebuah kafe siap melihat menu, bukan mendaftar program loyalitas. Orang yang membuka situs kantor hukum mungkin ingin memahami bidang layanannya dulu sebelum membuat janji. Kalau ragu, lihat pertanyaan yang paling sering masuk, lalu jadikan itu tombol utama.
Kalau kebanyakan pelanggan menghubungi Anda lewat chat, tombol utama bisa langsung membuka WhatsApp. Panduan kami tentang cara mengubah pengunjung menjadi prospek WhatsApp menjelaskan pengaturannya dan kalimat yang biasanya mendapat balasan.
Tata letak hero: sampul, terbagi, dan tengah
Tata letak mengubah kesan hero dan seberapa mudah dibaca. Template Forgelo memakai tiga tata letak hero utama.
| Tata letak | Bentuknya | Cocok untuk | Perlu diwaspadai |
|---|---|---|---|
| Sampul (cover) | Foto selebar layar di belakang teks, dengan lapisan gelap | Kafe, hotel, studio, acara, yang menjual suasana | Kontras teks di atas foto ramai, ukuran berkas gambar besar |
| Terbagi (split) | Teks di satu sisi, gambar di sisi lain | Jasa, sekolah, klinik, software | Gambar turun jauh di bawah tombol saat dibuka di ponsel |
| Tengah (centered) | Teks dan tombol di tengah, gambar sedikit atau tanpa gambar | Penawaran sederhana, peluncuran, situs satu halaman | Terasa kosong kalau judulnya lemah |
Tata letak sampul cepat membangun suasana, karena itu template Cafe and restaurant, Hotel and resort, dan Photography studio memakainya. Kekurangannya ada di keterbacaan: teks putih di atas foto terang bisa hilang. Template mengatasinya dengan lapisan gradasi gelap, dan sebaiknya lapisan itu tetap dipakai saat Anda mengganti foto.
Tata letak terbagi lebih tenang dan mudah dipindai. Teks berada di latar polos sehingga kontras jarang jadi masalah, dan gambar bisa menampilkan tempat atau produk Anda tanpa tertutup tulisan.
Memilih gambar hero
Visual harus mendukung judul, bukan menyainginya. Beberapa pedoman berikut membantu:
- Tampilkan yang asli bila bisa. Toko, tim, produk, atau hasil kerja Anda yang sebenarnya lebih membangun kepercayaan daripada foto stok umum. Pengunjung cepat mengenali foto stok yang terlalu sering dipakai.
- Sisakan ruang untuk teks. Untuk tata letak sampul, pilih foto yang punya area tenang tempat judul bisa diletakkan, atau andalkan lapisan gelap.
- Pikirkan potongan di ponsel. Di layar sempit, foto lebar dipotong ke bagian tengah. Pastikan bagian pentingnya tetap terlihat.
- Hindari tulisan di dalam gambar. Kata yang menempel di gambar tidak bisa dibaca mesin pencari atau pembaca layar, dan menjadi buram di layar kecil.
- Tulis alt text yang berguna. Jelaskan isi gambar dalam satu kalimat untuk membantu pengunjung yang memakai pembaca layar.
Kalau belum punya foto yang bagus, tata letak terbagi atau tengah yang rapi dengan judul kuat lebih baik daripada gambar pecah yang ditarik paksa. Anda bisa menggantinya nanti setelah punya foto asli.
Jaga hero tetap cepat dan terbaca di ponsel
Karena dimuat paling awal, hero sangat memengaruhi seberapa cepat halaman terasa. Panduan web.dev tentang Largest Contentful Paint dari Google menjelaskan LCP sebagai waktu sampai gambar atau blok teks terbesar di layar selesai ditampilkan, dan menganggap 2,5 detik atau kurang sebagai baik. Di banyak halaman, gambar hero atau judul hero itulah elemen terbesarnya.
Beberapa kebiasaan menjaga hero tetap cepat:
- Kompres gambar hero dan pakai format modern seperti WebP.
- Sesuaikan ukurannya. Foto 4.000 piksel yang ditampilkan selebar 1.200 piksel hanya membuang kuota.
- Jangan pakai lazy load untuk gambar hero. Lazy load untuk gambar di bagian bawah halaman; gambar hero harus langsung dimuat.
- Batasi font web hanya pada ketebalan yang benar-benar dipakai.
Keterbacaan sama pentingnya. Ketentuan kontras WCAG 2.2 meminta rasio kontras minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar. Teks putih di atas foto biasanya butuh lapisan gelap agar memenuhinya. Periksa hero di ponsel sungguhan di bawah cahaya siang sebelum menerbitkan. Panduan website mobile friendly kami membahas pemeriksaan lainnya.
Contoh hero section per jenis bisnis
Hero yang tepat bergantung pada tujuan pengunjung datang. Tabel berikut menunjukkan bagaimana lima bagian yang sama berubah untuk tiap jenis bisnis, dengan template Forgelo sebagai acuan.
| Bisnis | Fokus judul | Tombol utama | Tata letak yang cocok |
|---|---|---|---|
| Kafe atau restoran | Makanan, suasana, dan tempat | Lihat menu atau Pesan meja | Sampul dengan foto interior atau hidangan |
| Kantor hukum atau konsultan | Hasil yang diinginkan klien | Jadwalkan konsultasi | Sampul dengan foto tenang, atau terbagi |
| Sekolah | Nilai sekolah dan pendaftaran | Daftar sekarang | Terbagi dengan foto kelas asli |
| Produk software | Masalah yang diselesaikan | Coba gratis | Sampul dengan visual produk, atau tengah |
| Freelancer | Apa yang dikerjakan dan untuk siapa | Lihat karya atau Hubungi saya | Sampul atau terbagi dengan foto portofolio |
Untuk ide halaman di luar hero, lihat ide website bisnis kecil. Kalau halaman Anda hanya untuk satu kampanye, saran di panduan desain landing page juga berlaku.
Kesalahan umum pada hero section
Judul cerdik yang tidak dimengerti. Permainan kata bisa berhasil untuk merek yang sudah dikenal. Untuk bisnis baru, kejelasan yang menang.
Terlalu banyak tombol. Tiga atau empat tombol di hero memaksa pengunjung memilih sebelum memahami penawarannya. Cukup satu tombol utama dan paling banyak satu tombol kedua.
Kontras teks rendah. Teks putih di atas foto terang, atau teks abu-abu di latar terang, membuat kata paling penting sulit dibaca.
Slider, bukan pesan. Slide yang berganti otomatis memecah perhatian dan sering menyembunyikan pesan yang paling penting.
Gambar berat dan lambat. Foto yang tidak dikompres bisa menunda seluruh layar pertama. Kompres lalu cek kecepatannya dengan koneksi ponsel.
Lupa tampilan ponsel. Hero yang seimbang di laptop bisa mendorong tombol keluar dari layar pertama di ponsel. Selalu periksa keduanya.
Cara membuat atau mengedit hero section tanpa coding
Anda tidak perlu mendesain hero dari nol. Dengan AI website builder, hero dibuat bersama seluruh halaman, lalu Anda menyempurnakannya dengan menjelaskan keinginan Anda.
- Jelaskan bisnis Anda dalam satu kalimat, termasuk apa yang ditawarkan dan di mana, supaya draf judul pertama sudah spesifik.
- Atau mulai dari template yang tata letak hero-nya cocok untuk bisnis Anda. Panduan mulai dari template menunjukkan langkahnya, dan galeri template memudahkan Anda membandingkan tata letak hero.
- Edit dengan mengetik. Minta perubahan seperti "ganti judul tentang brunch akhir pekan", "ubah tombol utama menjadi Pesan meja", atau "pakai tata letak terbagi dengan foto di kanan". Panduan mengedit situs dengan prompt punya contoh lainnya.
- Ganti dengan foto Anda sendiri dan pertahankan lapisan gelapnya kalau teks berada di atas foto.
- Periksa di ponsel, lalu terbitkan. Daftar periksa singkat seperti checklist website go-live membantu menangkap hal yang terlewat.
Paket Free Forgelo menerbitkan satu situs di subdomain Forgelo, dan paket berbayar mulai Rp 149rb per bulan untuk domain sendiri, seperti tercantum di halaman harga.
Kesimpulan
Hero section website yang baik menyebut penawaran Anda dalam satu judul yang jelas, menambah satu kalimat pendukung yang konkret, memberi satu langkah berikutnya yang mudah dilihat, dan menampilkan visual yang mendukung pesannya. Pilih tata letak yang menjaga teks tetap terbaca di semua layar, buat gambar hero tetap ringan, lalu uji di ponsel. Untuk melihat polanya secara langsung, buka template SD atau template Cafe and restaurant lalu edit hero-nya dengan mengetik.
