Advertisement
  1. Business
  2. Web Design

Bagaimana Cara Membuat Sebuah Website Halaman Peluncuran Produk yang Baik (Coming Soon)

by
Read Time:11 minsLanguages:

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

Meluncurkan sebuah produk baru adalah usaha bisnis yang menarik, yang dapat berarti sebuah dunia yang berbeda dari bisnis kamu. Namun, saat kamu mempersiapkan peluncuran bisnis, penting untuk memikirkan bagaimana kamu mempromosikan produk kamu sebaik mungkin agar masyarakat membelinya. Disini ada dua cara:

  1. Buatlah sebuah halaman coming soon pada situs web kamu  untuk produk baru kamu.
  2. Buatlah sebuah web halaman landing coming soon (atau halaman landing pra-peluncuran) yang berdedikasi hanya untuk produk itu.

Manfaat dari halaman landing peluncuran produk HTML adalah lebih mudah untuk mempersiapkan sebuah Sistem Manajemen Konten atau sebuah platform e-commerce. Halaman landing coming soon yang berdedikasi juga memberikan kamu keuntungan pada halaman landing kamu berfokus pada satu tujuan yaitu untuk promosi produk dan mendorong masyarakat untuk membelinya.

Dalam tutorial hari ini, kami akan memandu kamu melalui langkah-langkah mengatur halaman landing peluncuran produk berdasarkan pada contoh dan tips-tips penulisan naskah halaman landing seperti promosi produk. Kamu dapat menemukan beberapa contoh halaman landing yang terkenal, itu akan bekerja dengan baik seperti halaman landing peluncuran produk (atau hanya beberapa macam halaman landing) di Envato Elements atau ThemeForest.

Cara Mengatur Template Halaman Landing Peluncuran Produk Kamu 

Segera unduh template kamu, mulailah mengatur situs web coming soon kamu atau halaman landing peluncuran produk.

Terdapat beberapa cara memproses pengaturan template situs web halaman landing peluncuran kamu. Pertama, kamu harus terbiasa dengan cara kerja template HTML. Kemudian, kamu harus memodifikasi file HTML dan CSS agar kamu dapat mengganti konten dengan milikmu sendiri dan gaya template yang cocok dengan merek kamu. Langkah terakhir adalah unggah file-file pada server hosting kamu agar halaman landing coming soon kamu bisa diakses secara online. Mari kita ikuti langkah-langkahnya, satu per satu:

Langkah 1. Dapatkan Susunan Dengan HTML yang Mudah Dikenal

Saat kamu mendapatkan sebuah template HTML, kamu akan mengunduhnya sebagai zip file. Kamu harus membuka unzip-nya dan kemudian kamu akan bisa melihat setiap file yang kedepannya melengkapi halaman landing kamu.

Dalam beberapa kasus, kamu akan menemukan satu atau beberapa file HTML yang menunjukkan halaman-halaman perorangan pada situs kamu atau berbagai variasi halaman. Setiap file HTML akan diberi nama yang sama sesuai dengan halaman. File-file ini mengontrol elemen-elemen yang digunakan pada halaman landing. Ini termasuk beberapa blok seperti judul, paragraf, gambar, dan sebagainya.

Template kamu juga akan memiliki beberapa folder yang akan berisi file CSS, file JavaScipt, dan gambar placeholder. Di beberapa kasus, kamu mungkin menemukan folder-folder dengan membuat file atau file PSD dimana kita gunakan untuk mendesain tampilan template. Terakhir, ini juga akan menjadi folder dokumen atau sebuah file yang memberikan informasi tentang template itu dan instruksi untuk memodifikasinya.

File CSS mengontrol tampilan template dan file JavaScript biasanya mengontrol animations dan transitions.

Untuk tutorial ini, Saya akan menggunakan template Proland dari Envato Elements. Ini adalah template halaman landing yang responsif dan multi guna yang dipadukan dengan MailChimp, PayPal, dan email. Fitur-fitur ini memuat seperti beberapa variasi halaman arahan, video latar belakang, alat pencetak, dan sebagainya. Lihatlah berikut ini:

Proland templateProland templateProland template
Template Proland bagus digunakan sebagai halaman landing peluncuran produk.

Kamu bisa melihat tangkapan layar berikut, template yang memuat semua file tersebut beserta folder tambahan seperti PHP yang memuat file PHP digunakan untuk kontak, pesanan, dan form laporan secara berkala.

template structuretemplate structuretemplate structure

Langkah 2. Memodifikasi Kode HTML

Langkah selanjutnya adalah memodifikasi file HTML. Saat kamu tidak akan merubah kode HTML yang asli, kamu akan memindahkan pesan dan informasi kosong pada milikmu.

Mengedit file HTML itu mudah, setelah kamu memahami apa yang sedang terjadi. Cara termudah untuk memahami kode HTML adalah dengan melihat langkahnya. Mulailah dengan menekan kanan kursor pada index.html dan kemudian pilih Open With Google Chrome atau browser pilihan kamu.

Setelah template itu dimuat di browser, klik kanan pada beberapa bagian dari halaman dan pilih Inspect. Pada contoh ini, Saya memeriksa lebar header di bagian atas halaman.

Inspecting the headerInspecting the headerInspecting the header

Saat kamu memeriksa elemen, kamu akan melihat panel di bagian bawah jendela browser kamu. Panel itu menunjukkan kepada kamu kode HTML yang mendasari pembuatan template kamu. Seperti yang kamu lihat, lebar teks header diantara tag <h2>. Ini berarti kita harus menemukan beberapa tag pada file index.html dan memindahkan teks tersebut.

Saat kamu ingin kembali pada folder template kamu, klik kanan file index.html lagi, dan pilih Open With, tapi kali ini pilih editor teks seperti Notepad atau TextEdit.

editing the HTML templateediting the HTML templateediting the HTML template

Ketika membuka file di editor teks kamu, carilah tag dan teks yang sudah kamu periksa. Dalam kasus saya, beberapa tag terletak pada baris 106 pada file HTML. Sekarang semua yang harus kamu lakukan adalah klik diantara beberapa tag <h2>, hapus teks kosong, dan gantilah dengan judul yang kamu inginkan.

Kembalilah pada template HTML kamu di browser kamu, periksalah teks yang di bawah judul. Teks ini adalah paragraf yang di ulas pada tag <p>, yang berarti kita harus kembali dan menemukan beberapa tag dalam editor teks.

Pada editor teks kamu, kamu akan melihat paragraf itu langsung di bawah judul yang seperti sebelumnya, klik diantara tag <p>, hapuslah teks yang ada, dan masukkan deskripsi kamu.

Mengedit template yang tersisa itu mudah. Hanya dengan mengikuti langkah-langkah yang sama sampai merubah semua konten: klik kanan elemen, periksalah, carilah tag dalam editor teks, dan gantilah informasi yang kosong.

Setelah kamu mengganti semua konten, klik File > Save. Refresh jendela browser kamu dan kamu akan melihat perubahannya.

Langkah 3. Mengedit File CSS

Setelah kamu mengganti semua konten dengan milikmu sendiri, kamu harus mengatur template sesuai dengan keinginan kamu. Dilanjutkan dengan mengedit file CSS. Dimulai dengan mencari subfolder CSS pada folder template kamu dan mencari nama file style.css. Ini biasanya menunjukkan file CSS utama yang harus kamu edit. Di beberapa kasus, Kamu mungkin mempunyai lebih dari satu file CSS jadi periksa kembali dokumentasi templat kamu untuk informasi mana yang harus kamu edit.

Seperti halnya untuk memodifikasi HTML, kamu akan lebih mudah saat mengedit dan mengatur template jika kamu mengerti gaya seperti apa yang cocok digunakan untuk elemen yang seperti apa. Cara termudah untuk mencari hal itu adalah dengan klik kanan pada elemen dan memeriksanya. Panel Inspector yang sudah dikenal akan muncul lagi dan kamu akan melihat gaya CSS pada sisi kanan panel. Sisi CSS pada pane Inspector akan menunjukkan padamu baris kode mana yang berisi gaya tertentu. Jika template kamu mempunyai file CSS yang banyak, ini juga akan menunjukkan padamu file CSS mana yang harus kamu edit.

Inspecting a button in CSSInspecting a button in CSSInspecting a button in CSS

Kamu juga bisa melihat pada tangkapan layar, Saya ingin mengubah warna pada tombol biru. Sesuai pada Inspector, Saya harus mengubah baris 45 pada kode CSS dalam file blue-orange.css.

Jika kamu mengikutinya, buka file itu dengan editor teks dan carilah baris 45. Sekarang, masukkan kode hex milikmu pada warna background. Dalam kasus saya, kode itu akan terlihat seperti ini:

background: #8a6d3b;

Simpan perubahan dan kemudian refresh jendela browser kamu. Kamu bisa teruskan mengedit file CSS dengan cara ini sampai kamu puas dengan tampilan template kamu. Kamu bisa menggunakan gaya CSS untuk mengubah font, menyesuaikan spasi, dan sebagainya. Cukup ingat untuk memeriksa elemen gaya yang kamu inginkan, tempatkan baris kode yang benar dan file CSS yang tepat dan kemudian sesuaikan gayanya.

Langkah 4. Unggah Template Halaman Landing Peluncuran Produk Kamu Ke Server Hosting Kamu

Langkah terakhir adalah unggah semua file template kamu ke server hosting kamu. Ingatlah bahwa jika kamu menggunakan situs web halaman landing peluncuran, tidak harus ada yang diunggah selain file HTML. Tapi, kamu harus mengunggah CSS, JavaScript, dan folder lainnya yang letaknya di dalam folder HTML.

Untuk memulai proses mengunggah, kamu harus menggunakan informasi FTP yang disediakan oleh host kamu. Kamu juga akan membutuhkan program FTP yang memungkinkan kamu terhubung dengan server kamu. FileZilla adalah klien FTP gratis yang bisa digunakan pada komputer Windows, Mac, dan Linux dan itulah yang akan Saya gunakan.

Unduh FileZilla dan luncurkan. Gunakan bilah QuickConnect pada bagian atas untuk memasukkan informasi hosting kamu. Kemudian, klik tombol Connect.

Setelah koneksi telah terhubung, tempatkan template folder HTML disisi kiri pada jendela FileZilla. Pilih file HTML dan semua folder dan kemudian pindahkan semua ke sisi kanan. Tempatkan file kedalam folder public_html. Kemudian, tunggulah hingga proses pengunduhan selesai. Kamu bisa mengunjungi URL halaman landing peluncuran produk dan pastikan semuanya bekerja sebagaimana mestinya.

Lima Tips Penulisan Naskah untuk Halaman Landing Produk Kamu

Sekarang kita sudah membahas cara menyiapkan template halaman landing produk kamu, Kamu harus pastikan memberi segel pada naskah halaman kamu dan meyakinkan pengunjung untuk melakukan pembelian. Disini ada lima tips yang akan membantu kamu menulis naskah berbintang untuk halaman landing produk kamu:

1. Hindari Jargon

Cara pertama adalah hindari jargon dan bahasa teknis yang tidak dipahami pengunjung. Saat kamu harus menjelaskan itu produk apa dan bagaimana itu bisa membantu mereka, sebaiknya kamu menggunakan bahasa sehari-hari. Bayangkan kamu menjelaskan produk kamu pada temanmu. Kamu akan heran betapa wajarnya suara kamu.

2. Fokus pada Manfaatnya

Naskah kamu harus membuat pengunjung menjadi menginginkan dan membutuhkan produk kamu. Hal ini harus membiarkan mereka dengan reaksi "Aku harus memilikinya". Langkah pasti untuk mencapainya adalah dengan fokus pada manfaat produk. Lebih tepatnya, kamu harus memberi mereka gambaran yang jelas tentang produk kamu yang bisa membuat hidup mereka menjadi lebih baik. 

3. Kerjakan Judul Kamu Dahulu

Judul akan menjadi hal pertama yang dilihat oleh pengunjung kamu dan perlu mengaitkannya sejak awal. Judul kamu akan membantu kamu membentuk naskah kamu jadi itu adalah ide yang bagus untuk menyusun judul kamu dahulu dan membutuhkan waktu yang lebih untuk memastikan kamu mendapatkannya dengan tepat.

4. Gunakan Poin-Poin

Halaman landing biasanya panjang jadi gunakan poin-poin untuk memisahkan naskahnya dan membuatnya menjadi lebih mudah dipahami. Poin-poin sangat bagus untuk menjelaskan manfaat serta menguraikan fitur-fitur produk kamu.

5. Fokuslah pada Pelanggan Ideal Kamu

Terakhir, fokuslah pada pelanggan ideal kamu. Pikirkanlah tentang sesuatu yang disukai mereka, masalah mereka, dan bagaimana produk kamu menyelesaikan masalah mereka. Dengan melakukan itu, kamu tidak akan mempunyai masalah dengan naskah kamu yang meyakinkan pada halaman landing peluncuran produk kamu.

Cara Mempromosikan Halaman Landing Coming Soon Kamu

Setelah kamu mendapatkan naskah kamu dan halaman landing peluncuran sudah siap, inilah waktunya untuk mempromosikannya dan mengarahkannya. Disini ada beberapa cara untuk memasarkan halaman arahan coming soon kamu:

  • Gunakan sebagai tautan default di bio media sosial kamu dan pastikan untuk membuat postingan tentang pengumuman produk kamu dengan tautan kembali ke halaman landing kamu
  • Kirimkan email untuk pelanggan kamu yang ada dan perkenalkan pada mereka produk kamu yang masih tersedia
  • Buatlah kontes di media sosial dimana pengikutmu harus melakukan sesuatu (misalnya, caption foto, sampai pada foto yang dikaitkan dengan produk kamu atau memberi tag pada teman yang yang mendapat manfaatnya) pada kesempatan untuk memenangkan produk itu.

Pelajari Lebih Lanjut Halaman Landing

Jika kamu ingin mempelajari halaman landing lebih lanjut, berikut tutorial:

Untuk pilihan lebih banyak template halaman landing yang bagus, lihatlah berikut:

Membuat Lebih Banyak Penjualan Dengan Template Halaman Peluncuran Produk

Template halaman landing yang bagus dapat membuat kamu lebih banyak penjualan produk kamu dan peluncuran ini menghasilkan keuntungan. Temukan template halaman arahan coming soon produk kamu yang sempurna di Envato Elements atau ThemeForest dan kemudian gunakan tutorial ini untuk membantu kamu mempersiapkannya.

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.