SlideShare una empresa de Scribd logo
1 de 9
Descargar para leer sin conexión
ANATOMI HERO
SECTION
Langkah Mudah Untuk Membuat Desain
Herco Section Yang Wuz Wuzzzz
heyedison.me
heyedison.me
Hero Section
Hero 

Section
Hero section adalah bagian paling atas di dalam sebuah landing page.
Dan bagian ini yang selalu dilihat pengunjung ketika mendatangi sebuah
landing page
Selanjutnya, yuk kita bahas satu-satu. Element-element apa saja yang
harus ada di dalam sebuah Landing Page. Dengan begitu, nanti teman-
teman bisa melakukan audit secara cepat tentang bagian hero section
tersebut.
Gambar/Video
Dibagian ini bisa diletakkan gambar maupun video. Gambar/video ini
mesti mewakili apa yang mau disampaikan di websitenya. Yang
ujungnya mendorong pengunjung untuk melakukan scroll ke bawah
untuk mengetahui informasi lebih lanjut.
Sebenarnya, ketika pengunjung mengunjungi sebuah website dan
melihat gambarnya, mereka tau. Tentang apa isi/garis besar website ini.
Misal, kalau websitenya jualan hijab, meski gunakan gambar yang
berhubungan dengan hijab jangan yang lain.
Gambar
yang
relevant
Text
Headline
Sub headline
Text ini ada dua, yaitu Headline dan Sub Headline. Headline ini digunakan
untuk mempengaruhi pengunjung untuk melakukan tindakan tertentu.
Seperti, untuk melakukan pembelian atau download sebuah ebook. 

Maka dari itu, button tidak jauh dari headline letaknya. Sedangkan sub
headline, adalah penjelasan singkat dari headline tersebut. 


Jadi tujuan dari headline ini sudah jelas, yaitu membuat pengunjung
untuk mengetahui informasi singkat tentang isi websitenya, lalu
membuatnya melakukan klik.
80% pengunjung akan membaca headlinemu, sementara
hanya 20% yang membaca sampai pada kontennya.
Dikutip dari copyblogger - salah satu top resources yang berisi panduan
untuk membuat blog dari dasar sampai menghasilkan.

Mereka bilang seperti ini
Maka dari itu, headline ini sangatlah krusial. Dan beberapa hal berikut
adalah hal yang tidak boleh dilakukan saat membuat headline:
Jangan gunakan frasa kata yang tidak jelas, atau tidak berbungan
dengan website.
Jangan jadikan tagline perusahaan sebagai hadline. Kenapa? Karena
tagline, tidak mendorong orang untuk melakukan klik.
Jangan masukkan nama produk. jasa di bagian headline
Silahkan teman-teman isi sendiri
Call to Action (CTA)
CTA merupakan button yang mendorong pengunjung untuk melakukan
action. Seperti, daftar, download, bagikan, pesan, beli sekarang,
Dapatkan, dll.
Selain itu, kalau tidak ada CTA-nya, membuat pengunjung bingung juga.
kalau mereka mau membeli produk/menghubungi pemilik jasa,
pengunjung mesti kemana? 

Maka dari itu, button CTA ini sangat memudahkan pengunjung, ketika
mereka ingin melakukan action di website tersebut.
Button 

CTA
Contoh CTA
Daftar Sekarang
Daftar Sekarang Beli Sekarang
Beli Sekarang
Gabung
Gabung Selengkapnya
Selengkapnya
Subscribe disini
Subscribe disini Konsultasi Gratis
Konsultasi Gratis
Upgrade
Upgrade Hubungi
Hubungi Coba gratis
Coba gratis
Logo & Menu
Logo ini biasanya diletakkan dibagian kiri pojok atas sebuah website.
Fungsi dari logo ini adalah menunjukkan identitas maupun brand dari
suatu website. Salah satu yang membedakan antara website dengan
service yang sama, adalah brandnya atau logonya.
Selain itu ada juga navigation menu, yang digunakan untuk
mempermudah pengunjung mengunjungi halaman-halaman tertentu.
Logo
Navigation 

Menu
Terimakasih
Sudah membaca sampai disini...
Sudah membaca sampai disini...
by Muhamad Edison A.
Follow
@edisonwp_
Komen2  

ya....
Simpan 

untuk nanti
Tap 2X untuk

likenya

Más contenido relacionado

Similar a Anatomi Hero Section

Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerceCara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
Ijonk Fikri
 
Teknik rahsia facebook
Teknik rahsia facebookTeknik rahsia facebook
Teknik rahsia facebook
Zax Daniel
 
Tutorial seo basic hingga mahir
Tutorial seo basic hingga mahirTutorial seo basic hingga mahir
Tutorial seo basic hingga mahir
Ipung Purwono
 
Tugas TI 5 rizal bagus 140240017
Tugas TI 5 rizal bagus 140240017Tugas TI 5 rizal bagus 140240017
Tugas TI 5 rizal bagus 140240017
bagus9958
 
Tugas TI 5 hilda ziya 140240012
Tugas TI 5 hilda ziya 140240012Tugas TI 5 hilda ziya 140240012
Tugas TI 5 hilda ziya 140240012
bagus9958
 

Similar a Anatomi Hero Section (20)

Cara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerceCara membuat toko online menggunakan woo commerce
Cara membuat toko online menggunakan woo commerce
 
05 internet-seo-optimasi konten
05 internet-seo-optimasi konten05 internet-seo-optimasi konten
05 internet-seo-optimasi konten
 
Power point materi seo
Power point materi seoPower point materi seo
Power point materi seo
 
Power point materi seo oleh Rizki Ramadhan HP
Power point materi seo oleh Rizki Ramadhan HPPower point materi seo oleh Rizki Ramadhan HP
Power point materi seo oleh Rizki Ramadhan HP
 
Cara menjalankan bisnis affiliasi anda di blogspot
Cara menjalankan bisnis affiliasi anda di blogspotCara menjalankan bisnis affiliasi anda di blogspot
Cara menjalankan bisnis affiliasi anda di blogspot
 
Teknik rahsia facebook
Teknik rahsia facebookTeknik rahsia facebook
Teknik rahsia facebook
 
8 bonus bernilai rm1303 ini dapat membantu mendapatkan trafik mudah dari fb
8 bonus bernilai rm1303 ini dapat membantu mendapatkan trafik mudah dari fb8 bonus bernilai rm1303 ini dapat membantu mendapatkan trafik mudah dari fb
8 bonus bernilai rm1303 ini dapat membantu mendapatkan trafik mudah dari fb
 
Cara membuat-website-dalam-30-menit
Cara membuat-website-dalam-30-menitCara membuat-website-dalam-30-menit
Cara membuat-website-dalam-30-menit
 
ppt santi.pptx
ppt santi.pptxppt santi.pptx
ppt santi.pptx
 
Web usability - Tips mendesain web yang mudah dipahami
Web usability - Tips mendesain web yang mudah dipahamiWeb usability - Tips mendesain web yang mudah dipahami
Web usability - Tips mendesain web yang mudah dipahami
 
Optimisasi Mesin Pencari (Slide Share)
Optimisasi Mesin Pencari (Slide Share)Optimisasi Mesin Pencari (Slide Share)
Optimisasi Mesin Pencari (Slide Share)
 
Tutorial Website Non Refrsh
Tutorial Website Non RefrshTutorial Website Non Refrsh
Tutorial Website Non Refrsh
 
Kamus Digital Marketing
Kamus Digital MarketingKamus Digital Marketing
Kamus Digital Marketing
 
Tutorial seo basic hingga mahir
Tutorial seo basic hingga mahirTutorial seo basic hingga mahir
Tutorial seo basic hingga mahir
 
Bisakah Meningkatkan Pendapatan Adsense Tanpa Update Artikel?
Bisakah Meningkatkan Pendapatan Adsense Tanpa Update Artikel?Bisakah Meningkatkan Pendapatan Adsense Tanpa Update Artikel?
Bisakah Meningkatkan Pendapatan Adsense Tanpa Update Artikel?
 
Laman web jualan
Laman web jualanLaman web jualan
Laman web jualan
 
7 tips mudah cara buat konten ramah seo
7 tips mudah cara buat konten ramah seo7 tips mudah cara buat konten ramah seo
7 tips mudah cara buat konten ramah seo
 
Mengoptimalkan kata kunci dalam artikel
Mengoptimalkan kata kunci dalam artikelMengoptimalkan kata kunci dalam artikel
Mengoptimalkan kata kunci dalam artikel
 
Tugas TI 5 rizal bagus 140240017
Tugas TI 5 rizal bagus 140240017Tugas TI 5 rizal bagus 140240017
Tugas TI 5 rizal bagus 140240017
 
Tugas TI 5 hilda ziya 140240012
Tugas TI 5 hilda ziya 140240012Tugas TI 5 hilda ziya 140240012
Tugas TI 5 hilda ziya 140240012
 

Más de Muhamad Edison A

Más de Muhamad Edison A (20)

3d Asset Figma Gratis
3d Asset Figma Gratis3d Asset Figma Gratis
3d Asset Figma Gratis
 
Google WebP: Format Gambar Digital yang Bisa Mempercepat Website
Google WebP: Format Gambar Digital yang Bisa Mempercepat WebsiteGoogle WebP: Format Gambar Digital yang Bisa Mempercepat Website
Google WebP: Format Gambar Digital yang Bisa Mempercepat Website
 
#Sharing 2022 VS 2023
#Sharing 2022 VS 2023#Sharing 2022 VS 2023
#Sharing 2022 VS 2023
 
Plugin Figma Favorit untuk Mempercepat Proses Desain
Plugin Figma Favorit untuk Mempercepat Proses DesainPlugin Figma Favorit untuk Mempercepat Proses Desain
Plugin Figma Favorit untuk Mempercepat Proses Desain
 
Boost Wordpress Website Kalian dengan Plugin Gratis ini!
Boost Wordpress Website Kalian dengan Plugin Gratis ini!Boost Wordpress Website Kalian dengan Plugin Gratis ini!
Boost Wordpress Website Kalian dengan Plugin Gratis ini!
 
Apakah sudah masuk group diskusi wordpress di telegram teman?
Apakah sudah masuk group diskusi wordpress di telegram teman?Apakah sudah masuk group diskusi wordpress di telegram teman?
Apakah sudah masuk group diskusi wordpress di telegram teman?
 
Favorit Channel Youtube untuk Belajar Wordpress
Favorit Channel Youtube untuk Belajar WordpressFavorit Channel Youtube untuk Belajar Wordpress
Favorit Channel Youtube untuk Belajar Wordpress
 
Mengenal Konsep Dasar untuk Optimasi SEO
Mengenal Konsep Dasar untuk Optimasi SEOMengenal Konsep Dasar untuk Optimasi SEO
Mengenal Konsep Dasar untuk Optimasi SEO
 
Brutalisme Konsep
Brutalisme Konsep Brutalisme Konsep
Brutalisme Konsep
 
Keyword tools terbaik yang dapat teman-teman gunakan secara gratis untuk meni...
Keyword tools terbaik yang dapat teman-teman gunakan secara gratis untuk meni...Keyword tools terbaik yang dapat teman-teman gunakan secara gratis untuk meni...
Keyword tools terbaik yang dapat teman-teman gunakan secara gratis untuk meni...
 
Penyedia mockup untuk web desainer.
Penyedia mockup untuk web desainer.Penyedia mockup untuk web desainer.
Penyedia mockup untuk web desainer.
 
Membuat Website dengan Page Builder Tanpa Koding
Membuat Website dengan Page Builder Tanpa KodingMembuat Website dengan Page Builder Tanpa Koding
Membuat Website dengan Page Builder Tanpa Koding
 
Tools Gratis untuk Test Tingkat Responsive Website
Tools Gratis untuk Test Tingkat Responsive WebsiteTools Gratis untuk Test Tingkat Responsive Website
Tools Gratis untuk Test Tingkat Responsive Website
 
3+ Penyebab Utama Website Lambat
3+ Penyebab Utama Website Lambat3+ Penyebab Utama Website Lambat
3+ Penyebab Utama Website Lambat
 
Tampilan Tema Dashboard Wordpress
Tampilan Tema Dashboard WordpressTampilan Tema Dashboard Wordpress
Tampilan Tema Dashboard Wordpress
 
Tingkatkan Kecepatan Website dengan Plugin Berikut
Tingkatkan Kecepatan Website dengan Plugin BerikutTingkatkan Kecepatan Website dengan Plugin Berikut
Tingkatkan Kecepatan Website dengan Plugin Berikut
 
3D Icon Gratis di Figma
3D Icon Gratis di Figma3D Icon Gratis di Figma
3D Icon Gratis di Figma
 
7 Situs Terbaik Untuk Mencari Gradient Color (Web Design Life)
7 Situs Terbaik  Untuk Mencari Gradient Color (Web Design Life)7 Situs Terbaik  Untuk Mencari Gradient Color (Web Design Life)
7 Situs Terbaik Untuk Mencari Gradient Color (Web Design Life)
 
Cara Setting Plugin W3 Total Cache untuk Meningkatkan Kecepatan Blog
Cara Setting Plugin W3 Total Cache untuk Meningkatkan Kecepatan  BlogCara Setting Plugin W3 Total Cache untuk Meningkatkan Kecepatan  Blog
Cara Setting Plugin W3 Total Cache untuk Meningkatkan Kecepatan Blog
 
Rekomendasi Plugin Membership WordPress Terbaik dan Gratis
Rekomendasi  Plugin Membership WordPress Terbaik dan Gratis Rekomendasi  Plugin Membership WordPress Terbaik dan Gratis
Rekomendasi Plugin Membership WordPress Terbaik dan Gratis
 

Anatomi Hero Section

  • 1. ANATOMI HERO SECTION Langkah Mudah Untuk Membuat Desain Herco Section Yang Wuz Wuzzzz heyedison.me heyedison.me
  • 2. Hero Section Hero Section Hero section adalah bagian paling atas di dalam sebuah landing page. Dan bagian ini yang selalu dilihat pengunjung ketika mendatangi sebuah landing page Selanjutnya, yuk kita bahas satu-satu. Element-element apa saja yang harus ada di dalam sebuah Landing Page. Dengan begitu, nanti teman- teman bisa melakukan audit secara cepat tentang bagian hero section tersebut.
  • 3. Gambar/Video Dibagian ini bisa diletakkan gambar maupun video. Gambar/video ini mesti mewakili apa yang mau disampaikan di websitenya. Yang ujungnya mendorong pengunjung untuk melakukan scroll ke bawah untuk mengetahui informasi lebih lanjut. Sebenarnya, ketika pengunjung mengunjungi sebuah website dan melihat gambarnya, mereka tau. Tentang apa isi/garis besar website ini. Misal, kalau websitenya jualan hijab, meski gunakan gambar yang berhubungan dengan hijab jangan yang lain. Gambar yang relevant
  • 4. Text Headline Sub headline Text ini ada dua, yaitu Headline dan Sub Headline. Headline ini digunakan untuk mempengaruhi pengunjung untuk melakukan tindakan tertentu. Seperti, untuk melakukan pembelian atau download sebuah ebook. Maka dari itu, button tidak jauh dari headline letaknya. Sedangkan sub headline, adalah penjelasan singkat dari headline tersebut. Jadi tujuan dari headline ini sudah jelas, yaitu membuat pengunjung untuk mengetahui informasi singkat tentang isi websitenya, lalu membuatnya melakukan klik.
  • 5. 80% pengunjung akan membaca headlinemu, sementara hanya 20% yang membaca sampai pada kontennya. Dikutip dari copyblogger - salah satu top resources yang berisi panduan untuk membuat blog dari dasar sampai menghasilkan. Mereka bilang seperti ini Maka dari itu, headline ini sangatlah krusial. Dan beberapa hal berikut adalah hal yang tidak boleh dilakukan saat membuat headline: Jangan gunakan frasa kata yang tidak jelas, atau tidak berbungan dengan website. Jangan jadikan tagline perusahaan sebagai hadline. Kenapa? Karena tagline, tidak mendorong orang untuk melakukan klik. Jangan masukkan nama produk. jasa di bagian headline Silahkan teman-teman isi sendiri
  • 6. Call to Action (CTA) CTA merupakan button yang mendorong pengunjung untuk melakukan action. Seperti, daftar, download, bagikan, pesan, beli sekarang, Dapatkan, dll. Selain itu, kalau tidak ada CTA-nya, membuat pengunjung bingung juga. kalau mereka mau membeli produk/menghubungi pemilik jasa, pengunjung mesti kemana? Maka dari itu, button CTA ini sangat memudahkan pengunjung, ketika mereka ingin melakukan action di website tersebut. Button CTA
  • 7. Contoh CTA Daftar Sekarang Daftar Sekarang Beli Sekarang Beli Sekarang Gabung Gabung Selengkapnya Selengkapnya Subscribe disini Subscribe disini Konsultasi Gratis Konsultasi Gratis Upgrade Upgrade Hubungi Hubungi Coba gratis Coba gratis
  • 8. Logo & Menu Logo ini biasanya diletakkan dibagian kiri pojok atas sebuah website. Fungsi dari logo ini adalah menunjukkan identitas maupun brand dari suatu website. Salah satu yang membedakan antara website dengan service yang sama, adalah brandnya atau logonya. Selain itu ada juga navigation menu, yang digunakan untuk mempermudah pengunjung mengunjungi halaman-halaman tertentu. Logo Navigation Menu
  • 9. Terimakasih Sudah membaca sampai disini... Sudah membaca sampai disini... by Muhamad Edison A. Follow @edisonwp_ Komen2 ya.... Simpan untuk nanti Tap 2X untuk likenya