Cara Membuat Hero Section yang Menarik dengan Elementor

Apa Itu Hero Section?

Hero section adalah bagian pertama yang dilihat pengunjung saat membuka website. Ini adalah area paling penting karena menentukan kesan pertama. Hero yang baik memiliki headline kuat, sub-judul singkat, dan tombol CTA (Call to Action) yang jelas.

Langkah Membuat Hero Section

1. Tambahkan Section baru → pilih 1 kolom
2. Klik ikon biru Section untuk membuka pengaturan
3. Di tab Layout, set Content Width: Full Width dan Min. Height: 100vh agar memenuhi layar
4. Di tab Style → Background, pilih tipe background (warna solid, gradient, atau gambar)

Menambahkan Background Gambar

1. Buka pengaturan Section → tab Style
2. Background Type: pilih ikon gambar
3. Klik Choose Image → upload atau pilih dari Media Library
4. Set Position: Center Center dan Size: Cover
5. Aktifkan Background Overlay → tambahkan warna gelap semi-transparan agar teks mudah dibaca

Menambahkan Konten Hero

1. Drag widget Heading ke dalam kolom → tulis headline utama
2. Drag widget Text Editor → tambahkan sub-judul singkat
3. Drag widget Button → buat tombol CTA

Tips Desain Hero yang Konversi

• Headline maksimal 8 kata, langsung menyebutkan manfaat utama
• Gunakan warna tombol CTA yang kontras dengan background
• Tambahkan animasi masuk (Entrance Animation) di tab Advanced untuk kesan dinamis
• Pastikan teks tetap terbaca di layar mobile — cek di mode responsif Elementor

Membuat Teks Warna Gradasi

1. Pilih widget Heading → tab Style
2. Klik ikon warna di Text Color
3. Di pojok kanan bawah color picker, ubah dari Solid ke Gradient
4. Pilih dua warna yang diinginkan