Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Business
  2. Mobile App
Business

Cara Membuat Landing Page Aplikasi Mobile Dengan Template

by
Difficulty:BeginnerLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Dian Sapta Priambogo (you can also view the original English article)

Saat Anda bersiap untuk meluncurkan aplikasi dan merilisnya ke pasar aplikasi, Anda harus mulai merencanakan promosi dan pemasaran aplikasi Anda. Ketika tiba saatnya untuk mempromosikan aplikasi Anda, lihatlah menggunakan Landing Page aplikasi. Landing Page aplikasi lebih baik untuk pemasaran daripada situs web biasa karena mereka berfokus pada menjaring pengunjung untuk mengambil tindakan tertentu.

Anda dapat menyesuaikan Landing Page Anda berdasarkan kebutuhan Anda — mendorong unduhan melalui tautan toko aplikasi atau mendorong mereka untuk meninggalkan ulasan/mendaftar untuk diberi tahu saat aplikasi diluncurkan, dan lainnya.

Landing Page aplikasi cepat dan mudah dibuat dengan bantuan template. Manfaat lain menggunakan template Landing Page aplikasi adalah Anda dapat fokus menyelesaikan aplikasi dan mempromosikannya daripada mendesain Landing Page untuk aplikasi tersebut.

Dalam postingan ini, kami akan menjelaskan apa yang harus dicari dalam template Landing Page aplikasi, fitur yang harus Anda sertakan pada Landing Page Anda, dan kami akan menunjukkan kepada Anda cara membuat Landing Page dari template.

Apa yang Harus Diperhatikan dalam Template Landing Page Aplikasi

Tidak ada kekurangan template Landing Page aplikasi yang didesain dengan indah, yang berarti bahwa ketika harus memilih template Landing Page yang tepat untuk aplikasi Anda, Anda mungkin menghabiskan banyak waktu untuk menelusuri semua opsi. Berikut adalah fitur paling penting yang harus dicari dalam template Landing Page aplikasi:

  • Desain responsif dan menarik. Memiliki situs web yang responsif dan menarik memungkinkan pengunjung menikmati situs Anda dan melihat semua yang ditawarkan aplikasi Anda, apa pun perangkat yang mereka gunakan.
  • Kemampuan untuk menyesuaikan template Anda dengan warna merek Anda. Ini akan membuatnya mudah untuk mempertahankan konsistensi merek.
  • Kemampuan untuk menampilkan testimonial pengguna. Testimonial akan membantu membangun bukti sosial, yang mengarah pada membangun kepercayaan dan mengubah pengunjung menjadi subscriber.
  • Dokumentasi template. Dokumentasi yang menyeluruh akan membantu Anda menemukan jawaban tentang template Landing Page aplikasi mobile dengan cepat dan memandu Anda melalui proses penyiapan.
  • Template yang ditujukan untuk niche (ceruk) aplikasi mereka. Atau cari template yang dapat digunakan di berbagai tempat yang berbeda.

Apa yang Membuat Landing Page Aplikasi Luar Biasa?

Sekarang kita telah membahas fitur apa yang harus dicari dalam template Landing Page aplikasi, ada beberapa elemen yang perlu Anda miliki di situs Anda untuk memastikan tingkat konversi sebaik mungkin.

1. Tulisan yang Memikat

Salah satu elemen terpenting Landing Page Anda adalah tulisannya. Judul, subjudul, dan seluruh tulisan pada halaman Anda harus membagikan manfaat dalam menggunakan aplikasi Anda untuk meyakinkan pengunjung bahwa mereka harus membeli dan mengunduhnya. Gunakan judul untuk menyulut rasa ingin tahu, dorong mereka untuk terus membaca dengan dubjudul Anda, dan kemudian gunakan sisa salinan untuk menyegel transaksi.

2. Tampilan Layar Aplikasi

Jangan berhemat pada tampilan layar aplikasi Anda hanya karena itu adalah produk digital. Tampilkan ikon yang akan muncul di layar beranda dan gunakan mockup ponsel pintar untuk menunjukkan tampilan antarmuka aplikasi. Ini akan memberi pengguna Anda perasaan bagaimana mereka dapat menggunakan aplikasi Anda.

3. Ulasan Pengguna

Seperti yang disebutkan sebelumnya, ulasan pengguna akan membantu Anda membangun kepercayaan dengan pengunjung Anda yang membantu tingkat konversi. Setelah pengunjung melihat bahwa pengguna lain senang dengan aplikasi Anda, mereka akan lebih cenderung untuk mengunduhnya dan mencobanya sendiri.

4. Call-to-Action

Terakhir, Anda ingin memastikan Landing Page aplikasi Anda memiliki beberapa call-to-action yang mengarahkan pengunjung ke pasar aplikasi tempat mereka dapat mengunduh aplikasi atau mendaftar untuk diberi tahu saat aplikasi diluncurkan.

Cara Mengatur Template Landing Page Aplikasi Anda

Sebelum menyiapkan template Landing Page aplikasi Anda, Anda perlu memahami cara kerja template HTML. Setelah Anda memahami struktur template HTML, maka mudah untuk mengaturnya.

Struktur Template HTML

Template HTML terdiri dari file HTML, CSS, dan JavaScript serta gambar yang Anda tambahkan ke situs web Anda. File HTML mengontrol elemen apa yang ditampilkan di Landing Page Anda. Ini termasuk headline, paragraf, testimonial, call-to-action, tombol, dan lainnya. File CSS bertanggung jawab atas bagaimana template terlihat. Mereka mengontrol warna, font, spasi, dan elemen visual lainnya.

File JavaScript menambah fungsionalitas tambahan dan biasanya mengontrol animasi, transisi, dan validasi formulir.

Dalam beberapa kasus, template Anda mungkin menyertakan file PHP yang digunakan untuk formulir kontak atau formulir pendaftaran newsletter.

Template Anda akan datang dalam folder yang akan menampung semua file HTML, CSS, dan JavaScript, yang akan berada di masing-masing subfolder. Mari kita lihat bagaimana contoh template HTML disusun.

Untuk keperluan tutorial ini, saya akan menggunakan template Focus. Templat Focus adalah template Landing Page aplikasi mobile multiguna, yang artinya dapat digunakan untuk menampilkan berbagai aplikasi. Ia juga responsif, SEO-friendly, dan dilengkapi dengan kemampuan untuk menggunakan latar belakang video.

Focus mobile app landing page template

Berikut adalah bagaimana template Focus diatur:

  • CSS. Folder ini berisi semua stylesheet yang digunakan template.
  • Fonts. Di folder ini, Anda akan menemukan font yang digunakan dalam template yang perlu diunggah ke server Anda.
  • Images. Folder images memiliki semua gambar placeholder dan Anda dapat menggunakannya untuk menambahkan gambar Anda untuk template.
  • js. Folder ini berisi kode JavaScript yang diperlukan untuk template.
  • php. Folder ini berisi kode PHP untuk formulir kontak dan newsletter
  • Index.html. Halaman utama template Landing Page aplikasi mobile Anda

Seperti yang dapat Anda lihat dari tangkapan layar di bawah ini, template Focus juga memiliki beberapa versi berbeda yang ada di folder mereka sendiri. Masing-masing folder tersebut mengikuti struktur yang sama seperti di atas.

Focus mobile app landing page template HTML structure

1. Membuat Landing Page Aplikasi Anda dengan Template

Sekarang setelah Anda memahami bagaimana template HTML terstruktur, mari kita pergi ke langkah-langkah mengatur Landing Page aplikasi Anda dengan template.

1. Sebagai permulaan, Anda ingin membuka file HTML di browser Anda. Untuk melakukan ini, klik kanan pada file index.html dan pilih Open With dan kemudian pilih browser default Anda. Kemudian, klik kanan file itu lagi dan kali ini pilih Open With dan pilih editor teks seperti Notepad, Sublime Text, atau TextEdit. Dengan begitu, Anda dapat melihat template dan kode yang perlu Anda edit:

Inspecting HTML template

2. Setelah file dibuka di browser Anda, Anda perlu memeriksa elemen yang ingin Anda edit. Untuk melakukan itu, klik kanan pada judul besar dan pilih Inspect. Anda akan melihat panel muncul di bagian bawah layar Anda. Panel memungkinkan Anda melihat kode HTML yang membentuk template Landing Page aplikasi seluler Anda serta template CSS yang mengontrol bagaimana elemen-elemen pada laman itu terlihat.

Editing HTML template

Seperti yang Anda lihat dari tangkapan layar di bawah, heading dikelilingi dengan tag <h1>. Langkah selanjutnya adalah menemukan tag-tag itu di file html dan mengganti teksnya.

3. Beralih ke editor teks Anda dan scroll ke bawah hingga Anda melihat <h1> yang sama. Di template Focus, ini terletak di sekitar baris 105.

Untuk mengedit teks, klik di antara tag <h1>, pilih dan hapus, lalu masukkan teks Anda sendiri.

4. Untuk mengedit template Landing Page aplikasi seluler lainnya, Anda memiliki dua opsi. Anda dapat kembali ke peramban dan melanjutkan memeriksa bagian-bagian halaman dengan Inspector, menempatkannya di file HTML, dan menggantinya.

Opsi lainnya adalah tetap di editor teks Anda dan cukup mengedit tag HTML yang berisi teks dummy. Seperti yang Anda lihat dari tangkapan layar di bawah ini, Anda dapat mengedit paragraf yang tepat di bawah tag <h1> dan kemudian melanjutkan dengan mengedit teks tombol, teks fitur, dan sebagainya.

Opsi mana pun yang Anda pilih, teruskan langkah-langkah ini sampai Anda telah mengedit semua konten demo.

Setelah selesai membuat perubahan, klik File > Save di editor teks Anda dan kemudian segarkan tab template di jendela browser Anda. Anda akan melihat semua perubahan Anda telah diterapkan.

5. Langkah selanjutnya adalah mengganti gambar yang digunakan template. Kita akan membahas langkah-langkah yang diperlukan untuk mengganti satu gambar dan Anda kemudian dapat mengulangi langkah yang sama untuk semua gambar lainnya.

Untuk mulai mengganti gambar, Anda harus menambahkan semuanya ke folder images. Sekali lagi, buka template index.html Anda di browser, klik kanan pada gambar pertama di header dan klik Inspect.

Anda akan melihat kode HTML untuk tag gambar yang terlihat seperti ini: <img src="images/iphones-hero.png" alt="picture" class="hero-picture width-100">.

6. Sekarang yang harus Anda lakukan adalah mengedit file index.html di editor teks Anda. Buka index.html di editor teks dan cari baris kode di atas. Hapus semuanya setelah images/ dan ganti nama gambar dengan gambar Anda sendiri.

2. Memberi Gaya ke Template

Langkah selanjutnya setelah mengedit konten adalah mengubah tampilan template Anda. Ini dapat dilakukan dengan mengedit file CSS tetapi pertama-tama, Anda perlu tahu gaya mana yang terkait dengan elemen HTML jenis apa.

1. Anda akan mulai dengan mengklik kanan pada elemen di browser Anda dan memilih Inspect. Kali ini lihat di sisi kanan layar dan Anda akan dapat melihat kode CSS untuk elemen itu serta garis di mana kode tersebut berada di file CSS.

Inspecting CSS file

2. Untuk mengedit file CSS, buka folder template Anda dan buka folder CSS. Sekarang, klik kanan pada file style.css, klik Open With dan pilih editor teks Anda.

Editing CSS file

3. Sekarang, cari baris kode yang Anda lihat di Inspector. Sebagai contoh, saya ingin mengubah warna latar belakang dari latar belakang yang ditonjolkan. Baris kode itu terletak di baris 170 sehingga yang perlu saya lakukan adalah scroll ke bawah di file CSS dan ganti kode warna. Kode ini terlihat seperti ini:

.section-grey{

background: #f2f7f8;

padding: 70px 0;

}

Saya telah mengubah kode warna hex dan menggantinya dengan ini:

background: #f4f3f2;

CSS memungkinkan Anda untuk juga mengubah font dan warna teks Anda. Cukup ulangi langkah-langkah seperti yang Anda lakukan dengan file HTML dan sesuaikan gaya sesuai keinginan Anda.

3. Unggah Templat Landing Page Aplikasi Anda ke Server

Sekarang template Anda sudah diedit dan diberi gaya, Anda harus mengunggahnya ke server hosting Anda agar Landing Page Anda dapat ditayangkan dan Anda bisa mulai mempromosikannya. Untuk ini, Anda akan memerlukan informasi FTP untuk server Anda. Jika Anda belum menerima informasi ini dari host Anda, Anda harus menghubungi mereka. Anda juga akan memerlukan klien FTP yang memungkinkan Anda terhubung ke server dan mentransfer file dari komputer Anda.

Klien FTP yang bagus yang dapat digunakan lintas platform adalah FileZilla. Unduh dan luncurkan, lalu masukkan informasi hosting Anda pada bar QuickConnect. Kemudian, klik tombol Connect.

Setelah terhubung, cari folder HTML template Anda di sebelah kiri FileZilla. Pilih semua file dan seret ke sisi kanan. Letakkan file ke folder public_html. Yang perlu dilakukan hanyalah menunggu proses pengunggahan selesai dan Landing Page Anda siap untuk pengunjung.

Dapatkan Landing Page Aplikasi Anda dan Luncurkan Segera dengan menggunakan Template

Anda baru saja belajar cara membuat Landing Page menggunakan template. Mendapatkan Landing Page aplikasi Anda dan berjalan dengan cepat itu mudah ketika Anda memiliki template yang tepat dan tahu cara mengaturnya. Mulailah dengan menuju ke Envato Elements untuk memilih template Landing Page aplikasi dan gunakan tutorial ini untuk memandu Anda melalui proses pengaturannya.

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.