Saat seseorang pertama kali membuka website kamu, ada satu bagian yang paling pertama dilihat adalah hero section sebelum mereka membaca isi halamannya
Menurut Next Digital, penelitian menunjukkan bahwa pengguna membutuhkan kurang dari 1 detik untuk membuat kesan pertama tentang sebuah website.
Artinya, hero section adalah penentu apakah pengunjung akan bertahan dan menjelajahi lebih lanjut, atau menutup tab dan pergi ke kompetitor kamu.
Untuk itu di artikel ini akan kita bahas secara lengkap cara membuat hero section yang menarik dari awal hingga akhir.
Apa Itu Hero Section?
Hero section adalah area yang berada di bagian paling atas sebuah halaman web tepat di bawah header/navigasi yang langsung terlihat tanpa perlu scroll.
Dalam dunia desain web, area ini sering disebut “above the fold”.
Menurut Dewaweb, hero section dirancang untuk menjadi area paling menonjol di sebuah website, berfungsi mengomunikasikan pesan utama secara efektif.
Komponen visualnya headline, gambar, tombol CTA yang akan bekerja bersama untuk menjawab tiga pertanyaan dalam hitungan detik:
- Website ini tentang apa?
- Apa manfaatnya untuk saya?
- Apa yang harus saya lakukan sekarang?
Jika hero section kamu berhasil menjawab ketiga pertanyaan ini dengan jelas, kamu sudah selangkah lebih dekat ke konversi.
Anatomi Hero Section yang Efektif
Sebelum mulai membuat, penting untuk memahami elemen-elemen apa saja yang sebaiknya ada dalam hero section yang baik.
1. Headline (Judul Utama)
Teks paling besar dan paling pertama dibaca adalah Headline. Cara membuat yang efektif harus singkat, jelas, dan langsung menyentuh kebutuhan atau pain point pengunjung.
Hindari headline yang terlalu generik seperti “Selamat Datang di Website Kami” karena tidak memberikan nilai apapun.
Ada 2 kategori yaitu headline lemah contohnya “Jasa Desain Interior Profesional” dan headline kuat “Ubah Ruang Kosong Rumahmu jadi Rumah Impian dalam 30 Hari”
Menurut dibimbing.id, headline yang efektif harus ditulis dengan jelas, ringkas, dan langsung ke inti sehingga perhatian pengunjung bisa didapatkan dan mendorong mereka untuk ingin tahu lebih banyak.
2. Subheadline (Deskripsi Pendukung)
Teks lebih kecil di bawah headline yang memberikan konteks tambahan menjelaskan manfaat lebih spesifik atau cara kerja bisnismu.
Maksimal 2–3 kalimat saja yang menjawab atau mendeskripsikan judul utama.
3. Background Visual (Gambar atau Video)
Selain headline ada visual yang harus di masukan. bagian ini bisa berupa foto produk, ilustrasi atau video pendek.
Yang jelas pada bagian visual ini harus relevan dengan bisnis dan berkualitas.
4. Call-to-Action (CTA)
Tombol yang mengajak pengunjung mengambil langkah selanjutnya.
Menurut TokoWeb.co, headline harus paling menonjol, diikuti subheadline, lalu CTA — dan terlalu banyak tombol justru membuat pengunjung bingung.
Fokus pada satu CTA utama yang jelas.
Contoh CTA yang baik untuk website bisnis: “Konsultasi Gratis”, “Hubungi Kami Sekarang”, “Lihat Layanan Kami”, atau “Dapatkan Penawaran”.
5. Social Proof (Opsional tapi Sangat Efektif)
Logo klien, jumlah pelanggan yang sudah dilayani, atau rating bintang — ditempatkan tepat di bawah CTA. Ini membantu pengunjung yang masih ragu untuk mulai percaya.
Persiapan Sebelum Membuat Hero Section
Sebelum membuka Elementor, siapkan dulu bahan-bahan berikut:
1. Teks konten:
- Headline (maks. 10 kata)
- Subheadline (2–3 kalimat)
- Teks tombol CTA
2. Gambar background: Menurut panduan dari LivingWithSales, siapkan dua ukuran gambar yang berbeda satu untuk desktop dan satu untuk mobile — dalam format WebP untuk performa terbaik. Ukuran yang direkomendasikan:
- Desktop: 1920 x 1080 px
- Mobile: 768 x 1024 px
Pastikan gambar sudah dikompresi sebelum diupload. Kamu bisa menggunakan tools gratis seperti Squoosh.app atau TinyPNG untuk kompresi tanpa kehilangan kualitas yang signifikan.
3. Warna brand: Siapkan kode warna (hex color) untuk warna primer dan sekunder bisnis kamu. Jika belum punya, tentukan dua warna yang konsisten dengan identitas bisnismu.
Cara Membuat Hero Section dengan Elementor
Untuk tutorial ini kita akan membuat hero section dengan layout sederhana namun profesional background gambar + overlay warna + headline + subheadline + tombol CTA.
Ini adalah pola yang paling banyak digunakan untuk website bisnis.
1. Buka Halaman di Editor Elementor
Masuk ke dashboard WordPress, pergi ke Pages → All Pages, lalu cari halaman beranda kamu (biasanya bernama “Home” atau “Beranda”).
Klik Edit with Elementor untuk membuka editor.
Jika halaman masih kosong, kamu akan melihat kanvas putih dengan tombol “+” di tengah. Klik tombol tersebut untuk mulai menambahkan section.
2. Tambahkan Section Baru
Klik tombol “+” di kanvas, lalu pilih struktur layout satu kolom penuh (ikon kotak tanpa pembagian).
Ini akan membuat satu section kosong yang siap diisi.
3. Atur Background Section
Klik area abu-abu di luar kolom (bukan di dalam kolom) untuk memilih Section.
Di panel kiri akan muncul pengaturan section dengan tiga tab Content, Style, dan Advanced.
Klik tab Style, lalu:
- Pada Background Type, pilih ikon “Classic”
- Pada Image, klik ikon gambar dan upload foto background hero yang sudah kamu siapkan
- Pada Size, pilih Cover agar gambar memenuhi seluruh area section
- Pada Position, pilih Center Center
4. Atur Tinggi Section (Min. Height)
Masih di tab Style, scroll ke bawah ke bagian Layout. Atur Min. Height menjadi 100vh (artinya 100% tinggi layar browser).
Ini membuat hero section memenuhi seluruh layar pengunjung tampilan yang profesional dan modern.
Atur Column Position ke Middle agar konten di dalam kolom rata di tengah secara vertikal.
5. Tambahkan Background Overlay
Agar teks di atas gambar mudah dibaca, kita perlu menambahkan lapisan warna semi-transparan di atas gambar.
Di tab Style section, cari bagian Background Overlay:
- Pilih Background Type: Classic
- Pilih warna hitam (
#000000) atau warna brand kamu - Atur Opacity ke sekitar 0.5–0.6 (50–60%)
Ini membuat gambar sedikit gelap sehingga teks putih di atasnya mudah terbaca tanpa menghilangkan visual gambar sepenuhnya.
6. Tambahkan Widget Heading (Headline)
Klik di dalam area kolom, lalu dari panel kiri cari widget Heading dan drag ke dalam kolom.
Setelah widget masuk:
- Di tab Content, ganti teks default dengan headline bisnis kamu
- Di tab Style, atur:
- Warna teks: putih (
#FFFFFF) - Ukuran font: 48–60px untuk desktop (akan kita atur untuk mobile nanti)
- Font weight: Bold atau Extra Bold
- Alignment: Center
- Warna teks: putih (
7. Tambahkan Widget Text Editor (Subheadline)
Drag widget Text Editor ke bawah widget Heading. Isi dengan subheadline 2–3 kalimat yang menjelaskan nilai bisnis kamu.
Atur di tab Style:
- Warna teks: putih atau abu-abu muda (
#EEEEEE) - Ukuran font: 16–20px
- Alignment: Center
8. Tambahkan Tombol CTA
Drag widget Button ke bawah subheadline.
Di tab Content:
- Text: Isi dengan teks CTA kamu (misal: “Konsultasi Gratis Sekarang”)
- Link: Masukkan URL halaman kontak atau nomor WhatsApp
Di tab Style:
- Background Color: Gunakan warna brand primer yang kontras
- Text Color: Putih atau warna yang kontras dengan background tombol
- Border Radius: 5–8px untuk tampilan tombol yang modern (tidak terlalu kotak, tidak terlalu bulat)
- Padding: Atur agar tombol punya ruang yang nyaman misal 15px atas-bawah, 35px kiri-kanan
9. Atur Padding Section
Klik section (bukan kolom), masuk ke tab Advanced → Padding.
Atur padding atas dan bawah setidaknya 80–100px agar konten punya ruang bernapas dan tidak terlalu mepet ke tepi.
10. Optimasi untuk Mobile
Ini langkah yang sering dilewatkan tapi sangat penting.
Klik ikon smartphone di bagian bawah panel kiri Elementor untuk beralih ke tampilan mobile.
Di mode mobile, periksa dan sesuaikan:
- Ukuran font headline: turunkan ke 28–36px agar tidak terlalu besar di layar kecil
- Ukuran font subheadline: 14–16px
- Padding section: bisa dikurangi ke 60px
- Background image: ganti dengan gambar versi mobile yang sudah kamu siapkan (di pengaturan Style → Background → pilih gambar berbeda untuk mobile)
11. Simpan dan Publikasikan
Setelah semua terlihat bagus di desktop dan mobile, klik tombol hijau Publish di pojok kiri bawah panel Elementor.
Buka website kamu di browser untuk melihat hasil akhirnya. Coba juga dari smartphone untuk memastikan tampilan mobile sudah optimal.
Tips Tambahan untuk Hero Section yang Lebih Profesional
Gunakan Font yang Tepat
Hindari font yang terlalu dekoratif untuk headline pilih yang tegas dan mudah dibaca.
Google Fonts seperti Poppins, Montserrat, atau Inter adalah pilihan yang sangat aman dan terlihat modern.
Jangan Terlalu Banyak Elemen
Prinsip yang berlaku di hero section: lebih sedikit lebih baik. Satu headline kuat, satu subheadline singkat, satu tombol CTA sudah cukup.
Menambahkan terlalu banyak elemen justru memecah fokus pengunjung.
Pastikan Kontras yang Cukup
Teks harus mudah dibaca di atas background.
Teks putih di atas gambar gelap, atau teks gelap di atas background terang keduanya bekerja.
Yang tidak bekerja adalah teks abu-abu di atas gambar yang juga abu-abu.
Kompres Gambar Background
Gambar hero yang tidak dikompresi adalah salah satu penyebab utama website lambat. Selalu kompres gambar sebelum upload.
Target ukuran file untuk gambar background: di bawah 300KB untuk versi WebP.
Kesimpulan
Hero section adalah investasi desain yang paling impactful di website bisnismu karena ini yang pertama dilihat oleh setiap pengunjung.
Dengan Elementor, kamu bisa membuatnya secara visual tanpa coding, dengan kontrol penuh atas setiap elemen.
Kunci hero section yang efektif adalah seberapa jelas pesannya.
Headline yang kuat, visual yang relevan, dan satu CTA yang tegas kombinasi sederhana ini sudah jauh lebih baik dari hero section yang penuh elemen tapi tidak punya arah.
Kalau kamu ingin website bisnis dengan hero section yang profesional dan langsung bisa digunakan tim kami siap membantu, dari desain hingga website live.
Konsultasi gratis jasa pembuatan website WordPress sekarang!
