Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Conversion
Webdesign

Membangun Landing Page Instapage Anda

by
Difficulty:BeginnerLength:MediumLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

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

Di bagian pertama dari seri pendek kali ini kita telah membahas dasar dari apa itu landing page. Di bagian ini, kita akan melihat proses pembuatan dari landing page Instapage.

Bagaimana Membangun Halaman Anda

Desain yang telah kita buat di Photoshop harus di ubah menjadi landing page yang sempurna di platform Instapage. Semua halaman dibangun dengan menggunakan sistem grid 960 dan dengan menggunakan bagian halaman horisontal yang dijelaskan di bawah ini.

Mulai dengan Halaman Kosong

Instapage menawarkan penggunanya bermacam-macam template yang bisa dipilih. Walau kita fokus kepada template industri yang spesifik untuk pengguna umum kita, Anda akan memulainya dari kanvas kosong.

Anda tidak perlu menggunakan program lainnya untuk benar-benar membuat template Instapage Anda, namun Anda bisa mengubah atau mengimpor tema yang telah Anda desain sebelumnya jika Anda ingin. CSS dan JavaScript kustom juga didukung.

Menambahkan Elemen Landing Page

Dengan Instapage Anda bisa mulai menambahkan elemen landing page Anda dengan mengklik opsi ADD NEW pada toolbar utama dan pilih elemen yang ingin ditambahkan.

Biasanya, menambahkan satu elemen pada satu bagian halaman yang sudah didefinisikan sangatlah ideal. Namun Anda memiliki kapabilitas penuh untuk menata halaman Anda sesuka Anda. Anda juga bisa mengatur tinggi dari bagian halaman sesuai dengan elemen yang telah Anda tambahkan.

Di dalam aplikasi terdapat tooltip X/Y yang akan muncul kapanpun Anda menggerakan elemen. Ini akan membantu jika Anda terbiasa mendesain dengan metode sepert ini atau jika Anda mengkonversi dari tema lain. Koordinat ditentukan dari titik tengah elemen yang sedang digerakan relatif terhadap berapa jarak dari atas kiri dari kolom halaman utama.

Kolom halaman utama memiliki ukuran standar yang telah ditentukan yaitu 960px.

Anda bisa menambahkan elemen berikut ke template landing page buatan Anda:

  • Page Sections
  • Headline
  • Text (Paragraph)
  • Image
  • Video
  • CTA Button
  • Forms
  • Maps
  • Social Sharing Buttons
  • HTML Links
  • Shapes

Semua ini ditambahkan dengan mengklik elemen yang Anda ingin tambahkan dan kemudian menempatkan/mengeditnya pada halaman Anda. Kita akan mendiskusikan menambahkan elemen secara lebih mendetail di bawah.

Section Halaman & Kotak

Bagian halaman digunakan untuk memisahkan area konten yang berbeda pada landing page Anda. Section selalu memanjang sepanjang lebar dari halaman dan tidak bisa di ubah ukurannya secara horisontal. Section halaman bisa di posisikan ulang secara vertikal dimanapun di halaman (di demonstrasikan di video).

Anda dapat mengelompokkan konten dengan section dan kotak dengan dua cara. Jika Anda sudah memiliki konten di halaman Anda, Anda dapat menambahkan sebuah kotak (dengan memilihnya dari elemen shape) dan kemudian menyeret konten Anda ke dalam kotak itu. Atau, Anda bisa membuat kotak terlebih dahulu lalu drag dan drop objek langsung ke kotak yang akan menjadi sarang dari mereka.

Setelah objek di letakan, Anda sekarang dapat memindahkannya ke halaman Anda sebagai satu objek tunggal. Pilih kotak dan lanjutkan dari sana.

Shape kotak biasanya digunakan untuk membuat persegi panjang atau persegi panjang standar yang dapat Anda gunakan untuk menyorot bentuk, gambar, teks, dan banyak lagi. Ini seharusnya tidak melebar sepanjang lebar halaman.

Saat mengedit section halaman atau shape kotak Anda akan diberi atribut berikut:

  • Warna Latar Belakang: Klik disini mengizinkan Anda untuk memilih warna primer untuk latar belakang shape.
  • Warna Border: Klik disini megizinkan Anda untuk memilih warna untuk border di sekitar kotak.
  • Lebar Border: Masukan angka disini untuk menentukan ketebalan dari border.
  • Style Border: Solid, dashed, dotted, double.
  • Gambar Latar Belakang: Anda mengatur gambar seperti pola sebagai latar belakang dari shape Anda.
  • Sudut Bulat: Klik pada panah atas / bawah di sudut manapun untuk mengatur seberapa bulat yang Anda inginkan.
  • Transparan: Anda bisa menggunakan ini untuk meningkatkan penampilan dari halaman Anda dengan melakukan sesuatu seperti memperlihatkan latar belakang halaman di bawah.

Menambahkan Teks ke Landing Page Anda

Anda bisa menambahkan headline dan teks paragraf dengan mengklik pada opsi yang mewakilinya dari toolbar. Ketika Anda mengklik pada tombol paragraf atau headline Anda akan melihat paragraf preset muncul di halaman Anda, Anda kemudian bisa mengedit paragraf ini.

Editor teks mengizinkan Anda untuk memodifikasi warna, ukuran font, peletakan dan Anda juga bisa menambahkan list menggunakan angka atau membuat tautan.

Menambahkan Gambar dan Video

Setelah mengklik untuk menambahkan elemen gambar baru Anda akan diberikan opsi untuk memilih dari yang sudah ada di folder atau mengunggah yang baru. Gambar apapun yang Anda unggah akan disimpan di server kita dan Anda bisa menggunakannya nanti tanpa perlu mengunggahnya ulang.

Anda bisa mengganti gambar kapanpun dengan memilih gambar > klik Edit > pilih replace

Gunakan gambar untuk menampilkan produk atau layanan Anda (foto lebih bermakna dari pada kata), tapi jangan terlalu sering. Terlalu banyak visual akan membuat pengguna terganggu dari tujuan konversi.

Untuk mempelajari lebih lanjut tentang bagaimana menggunakan gambar pada landing page bisa meningkatkan konversi lihat Menggunakan Gambar pada Landing Page Anda untuk Meningkatkan Konversi.

Anda bisa mengunggah video ke landing page Anda dengan memilih opsi video dan menautkannya ke video YouTube atau Vimeo pilihan Anda. Anda bisa mengubah ukuran dan posisi video berdasarkan kemampuan Anda. Lalu pilih baik Anda ingin video berjalan secara otomatis atau menyembunyikan progress bar.

Menambahkan Forms

Pilih ADD NEW dari toolbar utama lalu klik FORMS. Ini akan menambahkan form ke landing page Anda. Anda dapat drag dan drop dan mengubah ukuran form agar sesuai dengan kebutuhan desain spesifik Anda dan Anda dapat menyesuaikan style tombol, style form, warna, font dengan mengklik tombol EDIT setelah Anda mengklik form.

Anda juga dapat mengatur bidang yang dibuat sebelumnya atau membuat dropdown kustom Anda sendiri. Form dapat dikaitkan dengan layanan email yang terintegrasi seperti Mailchimp atau Aweber atau bisa bekerja sendiri. Kita juga menyediakan opsi pengalihan (baik pengintegrasian dan pengalihan form tidak boleh digunakan di laman Anda).

Menambahkan Tombol

Untuk menambahkan sebuah tombol ke halaman Anda klik ADD NEW dari toolbar utama. Ini akan menambahkan sebuah tombol pada landing page Anda. Jika Anda mengklik tombol Anda akan dapat mengubah ukurannya, mengubah warna atau font, dan men-drag dan drop fitur yang Anda inginkan.

Setelah mengklik tombolnya, di atas Anda akan melihat ikon link. Ini adalah fitur event link. Ini akan membuka pengelola tautan yang memungkinkan Anda menambahkan tautan keluar ke tombol Anda, pop up (Lightbox) ke tombol Anda, unduhan berkas, atau tautkan ke laman landing page Instapage yang lain.

Menambahkan Pop-up

Banyak landing page menggunakan proses pendaftaran dua langkah di mana pengunjung mengklik tombol yang membuka pop-up. Di dalam pop-up adalah form untuk mengenerate sebuah lead. Karena itu dan karena pop-up dapat berguna untuk menampilkan lebih banyak informasi, kami telah membuatnya sangat mudah untuk menambahkan pop up ke tombol, Images, dan text links.

Cukup klik salah satu dari tiga jenis elemen ini > klik tombol link> lalu pilih opsi pop up.

Anda bisa mengubah ukuran kotak dari pop-up seperti pada elemen lainnya. Konten apapun bisa ditambahkan di dalam pop up.

Mengimplementasikan Versi Mobile (Diharuskan)

Karena Instapage menawarkan kustomisasi drag & drop yang lengkap, kami saat ini tidak mendukung desain responsif yang otomatis. Karena ini Anda harus membuat ulang halaman desktop Anda pada tampilan mobile berdasarkan dari ukuran layar yang lebih kecil dan yang sesuai untuk konteks mobile.

Anda bisa memindahkan elemen antara versi desktop dan mobile dengan menyalin dan menempelkannya.

Pengguna Mac:

  • ⌘Command-C = Copy
  • ⌘Command-V = Paste

Pengguna PC

  • Ctrl-C = Copy
  • Ctrl-P = Paste

Meninjau Halaman Anda

Untuk melihat versi akhir layout dari template Anda sendiri klik pada opsi Preview dan tinjau template Anda sebelum mengklik Publish.

Daftar Cek Anda

  • Tinjau Gambar dan Layout
  • Review Copy dan Font
  • Tes Tautan
  • Tes Form dan Tombol
  • Publikasikan Halaman
  • Ketika membuat dokumen bantuan untuk template Anda, tolong sertakan tautan ini untuk instruksi penggunaan. Jika Anda telah menyertakan JavaScript/CSS kustom di template Anda, Anda harus menyertakan instruksi detail bagaimana menggunakan atau memperbaharui skrip dan fungsionalitasnnya.

Catatan: Mempublikasikan halaman Anda mengizinkan Anda untuk menyediakan tautan pratinjau secara langsung pada pasar template.

Persyaratan Persetujuan ThemeForest

Semua template-template landing page harus bisa di kustomisasi. Pengguna Instapage harus bisa mengubah secara mudah elemen yang mereka inginkan.

Untuk memastikan agar template tidak kehilangan kualitasnya saat pengguna akhir melakukan perubahan, penting agar halaman Anda melewati persetujuan ThemeForest. Harap perhatikan pedoman berikut ini:

  • Gambar harus mudah di ganti
  • Section halaman harus digunakan secara bener untuk memisahkan halaman Anda
  • Kode JavaScript harus dimulai dengan komentar termasuk informasi kontak penulis dan dukungan instruksi.
  • Tidak boleh ada elemen yang tidak berfungsi
  • Tombol form harus di letakan di form yang benar.
  • Halaman Anda harus memiliki versi mobile yang aktif.

Mengunduh Template Anda

Untuk menggunakan, berbagi, atau menjual template akhir Anda, Anda harus mendownloadnya. Untuk mendownload, klik tombol more options yang ada di dasbor dan pilih Download Page.

File akan memiliki ekstensi ".instapage". Setelah mendownload file Anda, silakan ganti namanya sesuai kebutuhan, tapi tinggalkan ekstensi ".instapage" secara utuh.

Mengemas Beberapa Layout Bersamaan

Ingin mengemas beberapa layout dari template yang sama? Silakan menghindari menggunakan varian halaman untuk mengemas beberapa layout bersama-sama.

Sebagai gantinya, buat setiap layout sebagai halaman terpisah dan unduh setiap layout secara terpisah. Ini akan memastikan Anda memiliki tautan pratinjau fungsional untuk setiap layout dan ini akan mengurangi kebingungan dari pengunduh, karena varian digunakan khusus untuk pengujian A/B.

Kesimpulan

Mudah-mudahan ini telah memberi Anda pengantar yang menyeluruh terhadap Instapage dan membuat template Instapage untuk dijual di pasar seperti ThemeForest. Masih banyak lagi yang harus dipelajari, jadi jika Anda memiliki pertanyaan, silakan kirim komentar.

Periksa juga kompetisi Most Wanted Instapage dari Envato yang sedang berlangsung saat ini juga!

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.