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

Cara Buat Halaman Pendaratan App Bergerak Dengan Templat

by
Difficulty:BeginnerLength:MediumLanguages:

Malay (Melayu) translation by Muhammad Viqqri (you can also view the original English article)

Semasa anda bersiap-siap untuk melancarkan aplikasi anda dan melepaskannya ke pasar aplikasi, anda perlu merancang untuk promosi dan pemasaran aplikasi anda. Apabila tiba masanya untuk mempromosikan aplikasi anda, lihat menggunakan halaman pendaratan apl. Halaman pendaratan apl lebih baik untuk pemasaran daripada laman web biasa kerana mereka memberi tumpuan kepada mendapatkan pelawat untuk mengambil tindakan tertentu.

Anda boleh menyesuaikan halaman pendaratan anda berdasarkan pada pemanduan keperluan-drive anda melalui pautan kedai aplikasi atau menggalakkan mereka untuk meninggalkan ulasan / mendaftar untuk diberitahu apabila aplikasi dilancarkan, dan banyak lagi.

Halaman pendaratan apl adalah cepat dan mudah dibuat dengan bantuan templat. Manfaat lain menggunakan templat halaman pendaratan apl adalah bahawa anda boleh memberi tumpuan pada menamatkan aplikasi anda dan mempromosikannya daripada merancang halaman pendaratan untuknya.

Dalam siaran ini, kami akan menerangkan apa yang perlu dicari dalam templat halaman pendaratan apl, ciri yang anda perlu sertakan pada halaman pendaratan anda, dan kami akan menunjukkan kepada anda cara membuat halaman pendaratan dari templat.

Apa yang Harus Diperhatikan dalam Templat Halaman Landing App

Tidak ada kekurangan templat halaman pendaratan apl yang dirancang dengan baik, yang bermaksud apabila memilih template halaman pendaratan yang betul untuk aplikasi anda, anda mungkin menghabiskan banyak masa melalui semua pilihan. Berikut ialah ciri yang paling penting untuk dicari dalam templat halaman pendaratan apl:

  • Reka bentuk yang responsif dan menarik. Mempunyai laman web yang responsif dan menarik membolehkan pelawat anda menikmati laman web anda dan melihat semua aplikasi anda yang ditawarkan tidak peduli apa peranti yang mereka gunakan.
  • Keupayaan untuk menyesuaikan templat anda dengan warna jenama anda. Ini akan memudahkan untuk mengekalkan ketekalan jenama.
  • Keupayaan untuk mempamerkan testimonial pengguna. Testimoni akan membantu membuktikan bukti sosial, yang akan membawa kepada kepercayaan dan mengubah pengunjung ke pelanggan.
  • Dokumentasi templat. Dokumentasi menyeluruh akan membantu anda dengan cepat mencari jawapan mengenai templat halaman pendaratan apl mudah alih anda dan membimbing anda melalui proses persediaan.
  • Templat yang ditujukan untuk niche aplikasi mereka. Atau cari templat serba boleh yang boleh digunakan di tempat yang berbeza.

Apa yang Membuat Halaman Pendaratan App Hebat?

Sekarang bahawa kami telah melengkapkan ciri apa yang dicari dalam template halaman pendaratan apl, terdapat beberapa elemen yang anda perlukan di laman web anda untuk memastikan kadar penukaran terbaik.

1. Compelling Copy

Salah satu unsur yang paling penting dalam halaman pendaratan anda adalah salinannya. Tajuk utama anda, subheadline, dan seluruh salinan badan harus berkongsi manfaat menggunakan aplikasi anda untuk meyakinkan pelawat yang perlu membeli dan memuat turunnya. Gunakan tajuk utama untuk menimbulkan rasa ingin tahu, menggalakkan mereka untuk terus membaca dengan subheadline anda, dan kemudian gunakan salinan yang lain untuk menutup perjanjian itu.

2. Skrin App

Jangan berhemat pada tangkapan skrin aplikasi anda hanya kerana ia adalah produk digital. Tunjukkan ikon yang akan muncul di skrin utama dan gunakan papan kekunci telefon pintar untuk menunjukkan bagaimana antara muka aplikasi kelihatan. Ini akan memberi pengguna anda rasa bagaimana mereka boleh menggunakan aplikasi anda.

3. Ulasan Pengguna

Seperti yang dinyatakan sebelum ini, ulasan pengguna akan membantu anda membina kepercayaan dengan pelawat anda yang membantu kadar penukaran. Apabila pengunjung melihat pengguna lain gembira dengan aplikasi anda, mereka lebih cenderung untuk memuat turun dan mencubanya untuk diri mereka sendiri.

4. Call-to-Action

Akhir sekali, anda ingin memastikan halaman pendaratan apl anda mempunyai berbilang panggilan-untuk-tindakan yang menunjuk pelawat ke pasar aplikasinya di mana mereka boleh memuat turun aplikasi atau mendaftar untuk dimaklumkan apabila aplikasi dilancarkan.

Cara Menyediakan Templat Halaman Landing App Anda

Sebelum menyusun templat halaman pendaratan apl anda, anda perlu memahami bagaimana templat HTML berfungsi. Sebaik sahaja anda memahami struktur template HTML, mudah untuk menetapkannya.

Struktur Templat HTML

Templat HTML terdiri daripada HTML, CSS, dan fail JavaScript serta imej yang anda tambahkan ke tapak web anda. Fail HTML mengawal elemen yang ada di halaman pendaratan anda. Ini termasuk tajuk utama, perenggan, testimoni, panggilan untuk tindakan, butang dan banyak lagi. Fail CSS bertanggungjawab untuk bagaimana template kelihatan. Mereka mengawal warna, fon, jarak, dan elemen visual lain.

Fail JavaScript menambah fungsi tambahan dan biasanya mengawal animasi, peralihan, dan pengesahan bentuk.

Dalam sesetengah kes, templat anda mungkin termasuk fail PHP yang digunakan untuk borang hubungan atau borang pendaftaran surat berita.

Templat anda akan masuk dalam folder yang akan memegang semua fail HTML dan fail CSS dan JavaScript, yang akan berada di subfolder masing-masing. Mari lihat bagaimana contoh templat HTML disusun.

Untuk tujuan tutorial ini, saya akan menggunakan template Focus. Templat tumpuan adalah templat halaman pendaratan apl mudah alih pelbagai guna, yang bermaksud ia boleh digunakan untuk memaparkan pelbagai aplikasi. Ia juga responsif, mesra SEO, dan dilengkapi dengan keupayaan untuk menggunakan latar belakang video.

Focus mobile app landing page template

Begini bagaimana template Focus teratur:

  • CSS. Folder ini mengandungi semua stylesheet yang digunakan template.
  • Font. Dalam folder ini, anda akan menemui fon yang digunakan dalam templat yang perlu dimuat naik ke pelayan anda
  • Imej. Folder imej mempunyai semua imej pemegang tempat dan anda boleh menggunakannya untuk menambah imej anda untuk template
  • js. Ini mengandungi kod JavaScript yang diperlukan untuk template
  • php. Ini mengandungi kod PHP untuk borang kenalan dan surat berita
  • Index.html. Halaman utama template halaman pendaratan aplikasi mudah alih anda

Seperti yang anda dapat lihat dari tangkapan skrin di bawah, templat Focus juga mempunyai beberapa versi yang berbeza dalam folder mereka sendiri. Setiap folder tersebut mengikut struktur yang sama seperti di atas.

Focus mobile app landing page template HTML structure

1. Buat Halaman Pendaratan App Anda Dengan Templat

Sekarang bahawa anda memahami bagaimana templat HTML berstruktur, mari kita melalui langkah-langkah untuk menetapkan halaman pendaratan apl anda dengan templat.

1. Sebagai permulaan, anda akan membuka fail HTML dalam penyemak imbas anda. Untuk melakukan ini, klik kanan pada fail index.html dan pilih Open With dan kemudian pilih penyemak imbas lalai anda. Kemudian, klik kanan fail sekali lagi dan kali ini pilih Open With dan pilih editor teks seperti Notepad, Teks Sublime, atau TextEdit. Melakukannya akan membolehkan anda melihat templat anda dan kod yang perlu anda edit:

Inspecting HTML template

2. Sebaik sahaja anda telah mendapat fail yang dibuka di pelayar anda, anda perlu memeriksa elemen yang anda ingin edit. Untuk melakukan itu, klik kanan pada tajuk besar dan pilih Periksa. Anda akan melihat panel muncul di bahagian bawah skrin anda. Panel ini membolehkan anda melihat kod HTML yang membentuk templat halaman pendaratan apl mudah alih anda serta templat CSS yang mengawal bagaimana unsur-unsur pada halaman kelihatan.

Editing HTML template

Seperti yang anda dapat lihat dari tangkapan skrin di bawah, tajuknya dikelilingi dengan tag <h1>. Langkah seterusnya adalah untuk mencari tag tersebut dalam fail html dan menggantikan teks.

3. Tukar ke editor teks anda dan tatal ke bawah sehingga anda melihat u003ch1u003e yang sama. Dalam templat Focus, ia terletak di sekitar baris 105.

Untuk mengedit teks, klik di antara tag <h1>, pilih dan padamkannya, dan kemudian masukkan teks anda sendiri.

4. Untuk mengedit selebihnya template halaman pendaratan apl mudah alih, anda mempunyai dua pilihan. Anda boleh kembali ke penyemak imbas anda dan terus memeriksa bahagian halaman dengan Inspektor, mencari mereka dalam fail HTML, dan menggantikannya.

Pilihan lain ialah tinggal di editor teks anda dan terus meneruskan mengedit tag HTML yang mengandungi teks dummy. Seperti yang anda dapat lihat dari tangkapan skrin di bawah, anda boleh mengedit perenggan yang berada di bawah tag <h1> dan kemudian teruskan dengan menyunting teks butang, teks ciri, dan sebagainya.

Pilihan mana-mana yang anda pilih, terus mengulangi langkah-langkah ini sehingga anda telah menyunting semua kandungan demo.

Apabila anda selesai membuat perubahan, klik pada file>save dalam editor teks anda dan kemudian muat semula tab templat dalam tetingkap pelayar anda. Anda akan melihat semua perubahan anda telah digunakan.

5. Langkah seterusnya adalah untuk menggantikan imej yang digunakan template. Kami akan pergi ke langkah-langkah yang diperlukan untuk menggantikan satu imej dan anda boleh mengulangi langkah yang sama untuk semua imej lain.

Untuk mula menggantikan imej, anda perlu menambah semua itu pada folder imej. Sekali lagi, buka templat index.html anda dalam pelayar, klik kanan pada imej pertama di tajuk dan klik Periksa.

Andaakan melihat kod HTML untuk tag imej yang kelihatan seperti ini : <img src="image/iphones-hero.png"alt="picture"class="hero-picture width-100">

6. Sekarang semua yang anda perlu lakukan ialah mengedit fail index.html dalam editor teks anda. Buka index.html dalam editor teks dan cari baris di atas kod. Padam semua selepas imej / dan ganti nama imej dengan imej anda sendiri.

2. Gaya Templat

Langkah seterusnya selepas menyunting kandungan adalah mengubah cara templat anda kelihatan. Ini boleh dilakukan dengan mengedit fail CSS tetapi pertama, anda perlu tahu gaya mana yang dikaitkan dengan elemen HTML.

1. Anda akan bermula dengan mengklik kanan pada elemen dalam penyemak imbas anda dan memilih Inspect. Kali ini melihat di sebelah kanan skrin dan anda akan dapat melihat kod CSS untuk elemen itu serta garis di mana kod tersebut terletak di fail CSS.

Inspecting CSS file

2. Untuk mengedit fail CSS, pergi ke folder templat anda dan buka folder CSS. Sekarang, klik kanan pada fail style.css, klik Open With dan pilih editor teks anda.

Editing CSS file

3. Sekarang, cari baris kod yang anda lihat di Inspektor. Sebagai contoh, saya ingin menukar warna latar belakang latar belakang yang dipaparkan. Barisan kod itu terletak pada baris 170 sehingga semua yang perlu saya lakukan ialah tatal ke bawah dalam fail CSS dan menggantikan kod warna. Kod ini kelihatan seperti ini:

.section-grey {

background: #f2f7f8;

background: #f2f7f8;

}

Saya telah menukar kod warna hex dan menggantikannya dengan ini:

background: #f4f3f2;

CSS membolehkan anda juga menukar fon dan warna teks anda. Cukup ulang langkah-langkah seperti yang anda lakukan dengan fail HTML dan menyesuaikan gaya mengikut keinginan anda.

3. Muat naik Templat Halaman Pendaratan App anda ke Pelayan

Sekarang template anda disunting dan digayakan, anda perlu memuat naiknya ke pelayan hosting anda supaya halaman pendaratan anda dapat langsung dan anda boleh mula mempromosikannya. Untuk ini, anda memerlukan maklumat FTP untuk pelayan anda. Jika anda belum menerima maklumat ini dari hos anda, anda perlu menghubungi mereka. Anda juga memerlukan klien FTP yang membolehkan anda menyambung ke pelayan anda dan memindahkan fail dari komputer anda.

Pelanggan FTP yang baik yang boleh digunakan merentas platform adalah FileZilla. Muat turun dan lancarkannya dan kemudian masukkan maklumat hosting anda di bar QuickConnect. Kemudian, klik butang Connect.

Sebaik sahaja anda bersambung, cari folder HTML templat anda di sebelah kiri FileZilla. Pilih semua fail dan kemudian seretnya ke sebelah kanan. Jatuhkan fail ke dalam folder public_html. Apa yang perlu dilakukan ialah menunggu proses muat naik selesai dan halaman pendaratan anda siap untuk pelawat.

Dapatkan Halaman Pendaratan App Anda dan Jalankan Cepat Dengan Template

Anda baru sahaja belajar bagaimana membuat halaman pendaratan menggunakan templat. Mendapatkan laman pendaratan apl anda dan berjalan dengan cepat adalah mudah apabila anda mempunyai templat yang tepat dan tahu bagaimana untuk menetapkannya. Mula dengan menuju ke Elemen Envato untuk memilih template halaman pendaratan apl dan gunakan tutorial ini untuk membimbing anda melalui proses penetapannya.

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.