Unlimited Powerpoint templates, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Business
  2. HTML

Cara Mendesain Halaman Landing yang Bagus Dengan Cepat Menggunakan Template

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by salma (you can also view the original English article)

Halaman landing berguna sebagai sarana penjualan yang memudahkan untuk mempromosikan produk tertentu atau jasa dan menambah kesempatan pada pengunjung untuk mendaftar atau membelinya. Mereka bisa gunakan promosi lead magnet gratis serta penawaran berbayar seperti kursus, produk digital atau fisik, dan jasa.

Langkah yang mudah untuk membuat halaman landing, jika kamu tidak mempunyai pengalaman mendesain, gunakan template halaman landing HTML. Pada postingan ini, kita akan membahas mengapa kamu harus mempertimbangkan penggunaan template halaman landing, apa yang membuat halaman landing itu bagus, dan memandu kamu melalui proses bagaimana mendesain halaman landing menggunakan template.

Mengapa Menggunakan Template Halaman Landing HTML?

Meskipun ada beberapa langkah untuk membuat halaman landing pada kampanye penjualan kamu, template halaman landing HTML adalah langkah termudah. Disini ada beberapa alasan mengapa kamu harus mempertimbangkan penggunaan template halaman landing seperti yang tersedia dari Envato Elements.

1. Memudahkan Penggunaan

Template halaman landing HTML mudah digunakan karena mereka tidak mengharuskan kamu mempelajari cara menyusun kode untuk menggunakannya. Semua elemen sudah di tempat jadi kamu harus mengeditnya. Disini tidak dilibatkan proses instalasi yang rumit karena semua yang harus kamu lakukan adalah mengunggahnya ke server hosting.

2. Waktu Loading Lebih Cepat

Saat kamu mendesain situs web atau halaman landing, kamu akan mendapatkan manfaat dari waktu loading yang lebih cepat daripada jika kamu mendesain situs web kamu dengan content management system. Ini karena template HTML memiliki susunan yang sederhana dan secara keseluruhan file lebih sedikit daripada tema dan template yang digunakan dari content management system.

3. Tidak Diperlukan Perawatan

Terakhir, template HTML tidak mengharuskan kamu mengawasi update. Setelah kamu membuat halaman landing, kamu dapat dengan mudah membuat cadangan sekali dan upload ulang jika itu dibutuhkan. Tidak seperti content management system dimana kamu harus selalu mencadangkan situs kamu dan install update perangkat lunak biasa, template HTML terdiri dari file statis yang hanya perlu di update jika kamu memutuskan untuk mengubah konten atau style.

Elemen Kunci dari Halaman Landing yang Bagus

Sekarang kita sudah membahas manfaat dari template halaman landing HTML, mari kita bahas elemen kunci dari halaman landing yang bagus. Ini akan membantu kamu mengedit template yang kamu butuhkan dan susunannya dengan cara yang logis.

1. Judul dan Subjudul yang Bagus

Elemen pertama pada halaman landing kamu adalah judul dan naskah kamu. Judulnya harus menarik minat siapapun yang mengunjungi halaman landing kamu. Disisi lain, subjudul, harus mendorong mereka untuk melanjutkan scroll ke bawah dan membaca sisa naskah kamu serta menekan tombol call-to-action dan transition dari pengunjung menjadi prospek, klien, atau pelanggan.

2. Poin Penting

Naskah kamu, dan idealnya, paragraf pertama kamu harus merujuk atau mengidentifikasi poin penting bagi pengunjung kamu. Dengan demikian, kamu memberitahu mereka bahwa kamu mengetahui apa masalah mereka, yang membuat mereka merasa dipahami dan memungkinkan mereka mengatakan kepada kamu.

3. Keuntungan yang Lebih

Halaman landing HTML kamu seharusnya menunjukkan manfaat dari penawaran kamu. Pengunjung kamu tidak mempedulikan tentang fitur-fitur produk kamu, tetapi mereka lebih tertarik pada metode apa yang kamu tawarkan yang dapat membantu membuat hidup mereka menjadi lebih baik. Dengan berfokus pada manfaat kamu akan memposisikan produk atau jasa kamu sebagai solusi terbaik untuk masalah mereka, yang membuat mereka lebih cenderung untuk membelinya.

4. Tanda Kepercayaan

Halaman Landing kamu juga harus mengatasi keluhan pengunjung, yang akan mencegah mereka mulai berubah menjadi pembeli atau pelanggan.

  • testimonial dari pembeli atau pelanggan yang ada
  • badge trust seperti VeriSign, Norton, Safe Payment, dan masih banyak lagi.
  • garansi uang kembali
  • bagian FAQ yang menjawab pertanyaan tambahan apapun
  • logo di situs kamu atau produk kamu yang sudah unggul

5. Call-to-Action

Elemen terakhir pada halaman kamu harus ada call-to-action yang memberitahu pengunjung apa langkah yang selanjutnya. Idealnya, call-to-action kamu akan sangat terlihat dalam motif yang kontras dan kamu dapat menyertakannya beberapa kali di halaman untuk memberi pengunjung beberapa kesempatan untuk berubah.

Cara Mengatur Template Halaman Landing

Menyiapkan template halaman landing kamu tidak sulit, tapi sebelum kita memasukinya sebaiknya kita meluangkan waktu untuk membiasakan diri dengan susunan template HTML dan cara kerjanya. Disini ada beberapa cara untuk menyegarkan pemahaman kamu tentang desain halaman landing:

Cara Kerja Template HTML

Template HTML biasanya terdiri dari dua tipe file:

  1. File HTML
  2. File CSS:

File HTML berisi susunan dasar dari semua elemen halaman. Mereka seperti memasukkan susunan dan ini adalah file-file dimana kamu akan menghabiskan sebagian besar waktu kamu bekerja. Beberapa file yang ditempat kamu akan mengubah konten dan menambah atau menghapus beberapa bagian.

File CSS kamu mengontrol bagaimana tampilan halaman landing kamu. Mereka seperti cat dimana kamu mengecat tembok rumah kamu. Dengan menggunakan file CSS, kamu akan mengubah warna dan font yang digunakan template.

Dalam beberapa kasus template kamu juga akan berisi file JavaScript, yang mana biasanya digunakan untuk form validasi atau untuk menambah efek animation pada template kamu.

Dengan cara itu, mari kita lihat bagaimana tipikal template HTML yang tersusun. Untuk keperluan tutorial ini Saya akan menggunakan Spot template halaman landing HTML dari Envato Elements, sehingga file template kamu mungkin tidak sepenuhnya sama. Dalam beberapa kasus, kamu akan memiliki file CSS, gambar, dan folder JavaScript. Mungkin kamu juga menemukan beberapa atau sedikit file HTML, dan dalam beberapa kasus, kamu akan menemukan folder PHP yang menambahkan fungsionalitas tambahan ke template.

Spot landing page HTML template

Inilah bagaimana susunan template Spot:

  • CSS. Folder ini berisi semua stylesheet template yang digunakan.
  • Images. Dalam folder ini, kamu akan menemukan semua gambar placeholder yang digunakan dalam template.
  • JavaScript. Dalam folder ini, kamu akan menemukan semua file JavaScript yang mengontrol berbagai animation dan efek transition.
  • PHP. Ini berisi kode PHP yang dibutuhkan untuk form kontak
  • Video. Ini berisi contoh video yang digunakan untuk layout demo yang menggunakan video background.
HTML template structure

Selain folder diatas, template Spot mempunyai beberapa file HTML, yang mana semuanya menunjukkan variasi tata letak yang berbeda.

Cara Kerja Pada Template Halaman Landing HTML

Cara termudah untuk memulai pengeditan dan penyesuaian template halaman landing kamu adalah dengan mencari dimana letak kode yang perlu kamu edit. Untuk melakukannya, klik dobel pada file index1.html atau file HTML apa pun di template folder kamu yang namanya index.html. File ini biasanya menunjukkan beranda dan itulah apa yang akan kita edit dahulu.

Setelah kamu klik dobel file itu, itu akan terbuka di browser default kamu. Kamu juga bisa klik dobel pada file dan pilih Open With dan kemudian pilih Internet browser default kamu.

Mari kita cari dimana letak judul pada file HTML jadi kita bisa segera mengeditnya. Klik kanan pada judul yang berbunyi "Spot adalah langkah terbaik untuk mempersembahkan aplikasi kamu pada dunia!" dan pilih Inspect.

Panel akan memuat di bagian bawah. Panel ini adalah panel Chrome's Developer Tools dan terdiri dari dua bagian: sisi kiri yang menunjukkan kode HTML dan sisi kanan yang menunjukkan kode CSS atau style yang terkait dengan elemen yang kamu periksa.

inspecting the template

Judul yang kami periksa terletak diantara tag <h2>. Sekarang kita harus mencari bagian ini di kode pada template dan mengeditnya.

Untuk melakukannya, kembalilah ke template dan klik kanan pada index1.html lagi. Pilih Open with dan kali ini pilih editor teks seperti Notepad.

Template kamu akan terbuka dan kamu akan bisa melihat semua kode yang digunakan pada halaman landing kamu. Scroll kebawah dan carilah potongan kode yang kamu lihat saat kamu memeriksa judul di browser kamu.

Di kasus saya, baris kode ini terletak pada baris 106.

Sekarang, kamu bisa mulai mengedit isinya. Pilih teks yang berada diantara tag <h2> dan hapuslah. Kemudian, masukkan teks kamu:

editing HTML template

Sekarang, kembalilah ke browser kamu, klik kanan pada tombol yang bertuliskan Purchase Now dan pilih Inspect. Setelah kamu menemukan potongan kode yang berisi teks tombol, kembalilah ke editor teks, letakkan potongan kode, dan edit teks tombol.

Kamu cukup mengulangi caranya lagi dan lagi sampai kamu mengganti semua isi demo dengan milikmu sendiri.

Saat kamu sudah mengubahnya, klik Save dan kemudian refresh tab template di jendela browser kamu.

Sekarang, mari kita lihat cara mengganti gambar dengan gambar milikmu. Kamu bisa menggunakan kembali cara yang sama untuk mengganti semua gambar yang digunakan di template:

Inspecting images

Pertama, kumpulkan semua gambar kamu dan tempatkan mereka dalam folder image. Kemudian, kembali ke browser kamu, klik kanan pada image di area header dan klik Inspect. Seperti yang kamu lihat dari tangkapan layar berikut, kamu akan melihat background image untuk header diatur melalui file CSS. Tab Inspector memberitahu kamu file CSS mana yang harus kamu edit:

Editing CSS

Untuk mengeditnya, kembalilah ke folder template kamu, buka folder CSS, dan kemudian buka file CSS. Pada contoh ini, Saya harus mengedit color-palette-blue.css. Saya harus mengedit baris 66 pada file. Untuk melakukannya, Saya sudah menghapus /images/ dan mengganti nama gambar dengan gambar saya sendiri. Simpan file CSS, kemudian refresh jendela browser kamu, dan kamu akan melihat gambar background kamu yang baru:

background image

Bagaimana Gaya Template

Setelah kamu memodifikasi isi dan mengganti informasi demo, kamu harus mencocokkan gaya template dengan merek kamu. Template Spot dilengkapi dengan beberapa skema warna yang dibuat sebelumnya, yang disimpan sebagai salinan file CSS di folder warna yang terletak di folder CSS.

Kamu bisa dengan mudah mengganti tampilan template kamu dengan mengganti stylesheet pada judul dokumen dengan nama stylesheet pilihan kamu. Kamu akan membuka file index1.html kamu pada editor teks dan terletak di kode baris  yang bertuliskan:

<link href="css/colors/color_palette_blue.css" rel="stylesheet" media="screen">

Ubah nama untuk skema warna pilihan kamu. Dalam contoh ini, Saya akan menggantinya dengan

<link href="css/colors/color_palette_red.css" rel="stylesheet" media="screen">

Jika tidak ada warna yang sesuai dengan pilihan kamu, kamu bisa mengedit file main.css dan sesuaikan font dan warna secara manual. Cukup periksa kode pada jendela browser kamu dan lihat sisi kanan pada layar untuk melihat gaya mana yang akan digunakan. Kemudian, carilah baris kode CSS dan sesuaikanlah. Contohnya, kamu bisa mengedit warna tombol pada file CSS dengan memasukkan kode untuk warna yang kamu inginkan seperti:

background-color: #65b5c1;

Cara Mengunggah Template Kamu ke Sever

Setelah template kamu disesuaikan dan ditata, inilah saatnya untuk mengunggahnya ke server hosting. Hosting perusahaan kamu harus kamu sediakan dengan semua rincian penting yang memiliki nama pengguna FTP kamu dan password.

Mulailah dengan meluncurkan klien FTP kamu seperti FileZilla, yang gratis dan cross-platform. Gunakan bilah QuickConnect untuk memasukkan nama pengguna FTP dan password dan kemudian klik Connect.

Carilah folder dengan template halaman landing kamu di sisi kiri layar. Pilih semua file an folder, seret ke sisi kanan layar, dan letakkan di folder public_html.

Tunggulah proses mengunggah sampai selesai dan halaman landing kamu akan langsung tayang.

Pelajari Lebih Lanjut Desain Halaman Landing

Jika kamu ingin mempelajari lebih lanjut desain halaman landing, kami memiliki sejumlah sumberdaya yang bermanfaat di Envato Tuts+. Disini ada beberapa tutorial yang membatu kamu memulai:

Berikut artikel yang tercantum beberapa template terbaik kami dengan desain halaman landing yang terkenal yang bisa kamu unduh dengan cara:

Dapatkan Halaman Landing Kamu dan Berjalan Dengan Cepat Menggunakan Template HTML

Seperti yang kamu lihat, dapatkan halaman landing kamu dengan dan berjalan dengan cepat dengan template HTML. Mulailah kerjakan milik kamu dengan mengunjungi Envato Elements dan temukan template yang sempurna. Kamu juga bisa menemukan beberapa desain halaman landing yang terkenal di ThemeForest. Kemudian, ikuti tutorial kami mengaturnya dan luncurkan halaman landing kamu sehingga kamu bisa mulai mempromosikan penawaran kamu hari ini.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.