Advertisement
  1. Web Design
  2. Theme Development

Panduan Untuk Para Author ThemeForest Tentang Template Unbounce

Scroll to top
Read Time: 18 min
Sponsored Content

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

() translation by (you can also view the original English article)

Info Terkini : Kita mendapatkan berita bagus terbaru! Unbounce telah menambahkan beberapa fitur terbaru, memberikan pengguna Unbounce untuk menggunakan fitur baru yang tersebut Fitur tersebut adalah:

  • Parallax Scrolling
  • Color Overlay
  • Transparency
  • Skala Gambar Agar Sesuai dengan Wadah

Pembaruan ini akan memungkinkan pelanggan Unbounce untuk menambahkan fitur ini tanpa menggunakan kode kerja pihak ketiga apa pun. Semua operasi yang ditambahkan dalam pembaruan ini dapat dilakukan dengan cepat dan mudah - desainer web dari semua garis akan dapat memanfaatkan fitur-fitur baru di Unbounce.

Kami telah memperbarui pos lagi untuk mencerminkan perubahan terbaru ini. Kami akan menunjukkan tempat untuk menemukan fitur, dan cara menggunakannya. Anda dapat mempelajari lebih lanjut tentang pembaruan terbaru di akhir Bagian 2 di bawah ini!

Update: Berita besar! Laman landas pencanangan kini responsif seluler, yang berarti desainer dapat membuat dan menjual template yang akan secara otomatis menyesuaikan ke perangkat apa pun. Ini adalah pembaruan produk terbesar Unbounce hingga saat ini dan ribuan pemasar akan mencari untuk meningkatkan halaman arahan mereka sehingga responsif terhadap ponsel. Dengan kata lain, mereka akan membutuhkan template baru secepatnya.

Kami telah memperbarui postingan ini untuk memandu Anda melalui hal yang responsif seluler dan bagaimana Anda dapat mendesain template responsif seluler di Unbounce. Anda dapat melompat ke Bagian 4 di bawah jika Anda sudah menguasai Unbounce dan siap untuk mulai mendesain untuk seluler!

Dalam tutorial ini saya akan memperkenalkan Anda kepada Unbounce, alat untuk membuat halaman arahan khusus kampanye. Kami akan menelusuri anatomi berbagai jenis laman landas, melalui fitur alat, lalu mencakup apa yang diperlukan untuk menjual kerangka Unbounce Anda sendiri di Themeforest.


Memperkenalkan Unbounce

Unbounce dibangun untuk memecahkan masalah yang sangat spesifik; untuk memberdayakan pemasar profesional untuk membuat laman landas khusus kampanye yang indah dan berkinerja tinggi sendiri. Yaitu, tanpa bantuan pengembang atau - di sinilah templat masuk - desainer.

Karena basis pengguna utama Unbounce adalah pemasar yang mungkin tidak akrab dengan alat desain canggih, pembuat laman landas dirancang agar mudah digunakan, dengan antarmuka WYSIWYG, seret dan lepas. Konon, perancang terampil juga bisa merasakan sama seperti di rumah; mungkin untuk menambahkan widget JavaScript, CSS, dan HTML khusus dan elemen halaman penyesuaian halus ke piksel.

Halaman arahan adalah halaman web yang berdiri sendiri yang melayani tujuan tertentu yang ditentukan sebelumnya untuk pemasar. Jika pemasar mencoba untuk menjual produk atau layanan, mereka dapat menggunakan halaman arahan untuk mendidik pengguna sebelum mengarahkan mereka ke halaman harga. Jika mereka mempromosikan sebuah ebook baru, mereka akan membutuhkan halaman arahan untuk mengumpulkan informasi kontak dari pengunjung mereka sebelum menyerahkan file tersebut. Untuk kedua kampanye ini (dan hampir setiap kampanye!) hanya mengirim pengunjung ke beranda mereka - alih-alih laman landas khusus - akan mengeja kegagalan pemasaran.

Singkatnya, laman landas dirancang untuk mendorong pengguna menuju sasaran spesifik yang berpusat pada konversi.

Siapa yang Menggunakan Unbounce?

Pemasar profesional yang paling berpengalaman. Mereka terus menjalankan kampanye pemasaran dan tidak dapat/tidak ingin bergantung pada pengembang internal mereka untuk membuat laman landas unik untuk setiap kampanye. Sekitar sepertiga pelanggan kami adalah bagian dari tim pemasaran perusahaan, pekerjaan ketiga lainnya di agensi pemasaran dan ketiga sisanya adalah wirausahawan.

Bagaimana Pemasar Menggunakan Unbounce?

Jika Unbounce pelanggan tidak memiliki desain potongan untuk merasa nyaman membangun halaman dari awal, mereka akan mulai dari template atau desainer mereka membuat template untuk mereka. Setelah mereka menyesuaikan template agar sesuai dengan kebutuhan kampanye mereka, pelanggan sering menggunakan template yang sama untuk setiap kampanye serupa yang mereka jalankan.

A/B testing adalah fitur inti Unbounce. Pengguna dapat menduplikasi halaman akhir mereka, membuat satu perubahan pada desain atau salinan halaman baru, memisahkan lalu lintas antara dua halaman dan menggunakan pelaporan Unbounce untuk menentukan versi mana yang berkonversi lebih baik. A/B testing memungkinkan pelanggan untuk terus meningkatkan halaman arahan dan kampanye pemasaran mereka.


Merancang Halaman Arahan Unbounce

Panduan ini akan membantu Anda mendesain dan membuat halaman arahan konversi tinggi untuk platform Unbounce.

Kami mendorong penulis template untuk mendaftar ke akun gratis Unbounce dan email templates@unbounce.com untuk memberi tahu mereka bahwa Anda merancang template untuk dijual kembali. Mengirim email ke tim kami akan memastikan bahwa akun Anda tetap gratis jika Anda melebihi 200 pengunjung unik yang biasanya diizinkan pada paket gratis.

Apa yang akan kita bahas

Mari kita jalankan dengan cepat apa yang akan kita bahas dalam tutorial ini.

  • Merancang Halaman Arahan Unbounce
  • Bagian 1: Apa yang ada di Halaman Arahan?
    • Homepage vs Halaman Arahan
    • Anatomi Halaman Pendaratan
    • Lead Gen vs. Halaman Arahan Klik-Tayang
  • Bagian 2: Pedoman Desain
    • Desain dari kisi Unbounce
    • Opsi Font
    • Contoh Halaman Arahan
    • Scale to Fit Container
    • Parallax Scrolling
    • Color Overlay and Opacity
    • Elemen yang harus dihindari
    • inspirasi
  • Bagian 3: Cara Membuat Halaman Arahan di Unbounce
  • Bagian 4: Membuat Halaman Arahan Anda Mobile Responsif
    • Apa itu responsif seluler?
    • Bagaimana cara kerjanya di Unbounce?
  • Bagian 5: Mengirimkan Template Anda ke Themeforest
    • Daftar Periksa Penting Anda
    • Persyaratan Persetujuan Themeforest 
    • Men-download halaman
    • Kemasan Beberapa Layouts Bersama

Bagian 1: Apa itu Halaman Landing?

Homepage vs Halaman Arahan

Mari bandingkan beranda Webmaster (kiri) dengan salah satu laman landasnya (kanan). Homepage dirancang dengan indah dan memungkinkan pengunjung untuk menyelesaikan sejumlah tugas. Ada lima konsep yang disajikan di area promo utama (melalui spanduk berputar), empat pesan tambahan di bawahnya, dan total dua puluh delapan titik interaksi.

Namun, kampanye pemasaran harus berfokus pada laser, mengarahkan pengguna ke satu tindakan tunggal. Ketika mendesain halaman arahan untuk digunakan dalam kampanye pemasaran, konsep rasio Perhatian perlu dipertimbangkan. Attention Ratio (AR) didefinisikan sebagai rasio elemen interaktif (tautan/kebocoran) pada halaman, dengan jumlah sasaran konversi kampanye (yang merupakan salah satu). Di situs ini, rasio perhatiannya adalah 28: 1 yang berarti ada dua puluh tujuh tindakan yang mengalihkan perhatian dan satu tindakan yang diinginkan.

Homepage vs Landing PageHomepage vs Landing PageHomepage vs Landing Page
Beranda vs. Halaman Landing

Bandingkan beranda dengan salah satu laman landas perolehan prospek (kanan). Di halaman landing, hanya ada satu tindakan untuk dilakukan; pengguna diminta untuk mengisi formulir dan mengklik tombol CTA untuk menyelesaikan konversi. Ini menghasilkan pengalaman yang lebih terfokus bagi pengunjung, dengan menjaga rasio perhatian pada 1: 1.


Anatomi Halaman Pendaratan

Ada lima elemen inti yang harus dimiliki di laman landas mana pun, yang dapat diuraikan lebih lanjut menjadi daftar blok bangunan yang lebih terperinci:

  1. Proposisi penjualan unik Anda (USP)

    • Judul utama
    • Judul pendukung
  2. Tembakan pahlawan (gambar/video yang menunjukkan konteks penggunaan)
  3. Manfaat dari penawaran Anda

    • Daftar ringkasan daftar manfaat
    • Manfaat dan fitur secara detail
  4. Bukti sosial ("Saya akan memiliki apa yang dia miliki")
  5. Satu sasaran konversi - Call-To-Action (CTA) Anda (dengan atau tanpa formulir)

Diagram di bawah ini merupakan contoh tata letak. Urutan dan lokasi dari 5 elemen akan ditentukan oleh cerita yang ingin Anda beri tahu pengunjung Anda, dan dapat bervariasi dari contoh ini. Tetapi sangat membantu untuk melihat ini sebagai referensi saat kami berjalan melalui setiap elemen.

anatomyofalandingpage-v2anatomyofalandingpage-v2anatomyofalandingpage-v2

Lead Gen vs. Halaman Arahan Klik-tayang

Ada dua jenis laman landas utama: pembuatan prospek (gen prospek) dan klik-tayang.

Halaman Landing Lead Gen

Lead gen pages digunakan untuk mengambil data pengguna, seperti nama dan alamat email. Satu-satunya tujuan halaman ini adalah mengumpulkan informasi yang memungkinkan komunikasi lebih lanjut dengan prospek di lain waktu. Halaman gen prospek akan berisi formulir bersama dengan deskripsi tentang apa yang akan didapatkan pengunjung sebagai imbalan untuk mengirimkan data pribadi mereka.

CCP-Lead-GenCCP-Lead-GenCCP-Lead-GenMemimpin aliran gen

Halaman Landing Melalui Klik

Halaman arahan klik-tayang memiliki tujuan untuk membujuk pengunjung mengklik ke halaman lain.

Biasanya digunakan dalam corong e-niaga, mereka dapat menawarkan detail tentang produk atau layanan untuk "memanaskan" pengunjung dan membawa mereka lebih dekat untuk membuat keputusan pembelian. Ketika prospek mengklik ke halaman berikutnya, mereka akan dipandu dengan semua informasi yang mereka butuhkan dan kemungkinan besar akan membeli.

ClickThroughClickThroughClickThrough
Klik-through flow

Bagian 2: Pedoman Desain


Desain Dari Grid Unbounce

Pada Unbounce kami menggunakan sistem grid standar yang menggunakan 12 kolom, membuat wadah 940px. Contoh di bawah ini memecah kombinasi kolom yang tersedia. Kami sarankan Anda menggunakan kisi Unbounce untuk hasil desain halaman arahan terbaik.

unbounce-image06unbounce-image06unbounce-image06

Opsi Font

Unbounce menawarkan satu set standar tipografi dalam pembuat halaman arahannya, serta set Google Web Fonts. Kami menyarankan Anda menggunakan tipografi berikut saat mendesain untuk Unbounce.

Google Web Font

Di bawah ini adalah daftar Google Web Fonts yang tersedia di Unbounce, silakan gunakan / unduh hanya font berikut dari Perpustakaan Font Web Google.

  • Abril Fatface
  • Allan
  • Arvo
  • Kabin
  • Dancing Script
  • Droid Sans
  • Gravitas One
  • Josefin Sans
  • Josefin Slab
  • Lato
  • Lobster
  • Merriweather
  • Old Standard TT
  • Open Sans
  • PT Sans
  • PT Serif
  • Playfair Display
  • Quantico
  • Ubuntu
  • Vollkorn

Font standar

Di bawah ini adalah daftar font standar yang tersedia di Unbounce.

  • Arial
  • Courier New
  • Georgia
  • Lucida Sans Unicode
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

Contoh Halaman Arahan

Setiap halaman arahan memiliki satu tujuan dalam pikiran; memindahkan pengunjung untuk melakukan satu ajakan bertindak, seperti mengisi formulir atau mengklik ke halaman lain. Di bawah ini Anda akan menemukan pilihan jenis halaman arahan yang paling umum.

Kedua desain minimalis sederhana serta contoh-contoh yang ditata penuh diperlihatkan.

Lead GenerationLead GenerationLead Generation
Lead Gen Pages
LockwoodLockwoodLockwood
LasanoLasanoLasano
Coming SoonComing SoonComing Soon
Klik-Melalui Halaman
Click-ThroughClick-ThroughClick-Through
denolidenolidenoli

BARU: Desain Rumit Made Simple

Memanfaatkan tren desain web populer dapat membantu mengatur halaman arahan Anda terpisah dari yang lain, tetapi penerapannya bisa sulit untuk dikodekan. Untuk memungkinkan pengguna Unbounce untuk memanfaatkan beberapa tren desain terkini dan efektif, kami telah membangun alat baru ke dalam pembuat Unbounce. Anda sekarang dapat mengintegrasikan fitur seperti paralaks bergulir ke halaman arahan Anda dengan mengklik tombol tanpa harus bergantung pada kode pihak ketiga.

Scale to Fit Container

Anda telah menjelajahi internet untuk mendapatkan gambar yang sempurna untuk halaman Anda. Anda menambahkannya ke bagian Anda dan itu lebih besar dari penampung. Ada perbaikan mudah untuk ini di Unbounce.

Setelah Anda menambahkan gambar ke bagian halaman Anda, pilih saja Stretch untuk menyesuaikan bagian halaman. Jika Anda ingin mengisi seluruh halaman, Anda dapat memilih Stretch untuk menyesuaikan halaman.

Parallax Scrolling

Untuk membuat gambar tetap yang tetap di tempat sementara pengunjung menggulir halaman ke bawah (paralaks), cukup pilih "Tetap latar belakang saat Anda menggulir" kotak centang. Elemen desain yang dapat sangat berdampak pada halaman landing, paralaks bergulir biasanya membutuhkan kode khusus. Unbounce memungkinkan Anda untuk menambahkan fitur ini dengan mengklik tombol.

Catatan: Fitur ini tidak akan ditampilkan ketika pengunjung berada dalam tampilan seluler.

Color Overlay dan Opacity

Dengan menggunakan fitur overlay warna, Anda akan dapat menambahkan tint ke gambar latar belakang Anda yang membawa warna tertentu yang Anda pilih ke latar depan.

Anda dapat menyesuaikan transparansi gambar Anda dengan memilih fitur Opacity. Overlay warna 100 akan meresapi background Anda dengan warna yang Anda pilih sepenuhnya.

Elemen yang Harus Dihindari

Untuk memastikan halaman Anda masih terlihat dan berfungsi sesuai tujuan setelah dibagikan, hindari menggunakan yang berikut:

  • Bentuk tata letak horizontal atau multi-colomn (Formulir harus ditumpuk secara vertikal)
  • Galeri, carousels, atau elemen animasi
  • Custom overlays
  • Gradien dengan lebih dari dua berhenti
  • Drop shadows yang tidak dapat dipotong sebagai bagian dari gambar
  • Teks bayangan
  • Merancang tata liquid layout yang diperluas dengan browser (dan memastikan laman Anda dapat disejajarkan di tengah)
  • Layout yang tidak dicenter-aligned pada halaman.

Inspirasi

  1. Lihat pustaka template Unbounce untuk inspirasi
  2. Baca Panduan Utama untuk Desain Berpusat Konversi atau Merancang untuk Konversi - 8 Teknik Desain Visual untuk Memusatkan Perhatian pada Landing Page Anda oleh Oli Gardner.
  3. Mendaftar untuk Landing Page Ecourse

Bagian 3: Cara Membuat Halaman Arahan di Unbounce

Cara Membuat Halaman Arahan

Terjemahan desain ke halaman arahan pada platform Unbounce harus dieksekusi dengan sempurna. Dalam contoh di bawah ini, halaman arahan disusun oleh bagian halaman dan kolom menggunakan grid Unbounce standar. Ekspor semua aset gambar Anda dalam format .png atau .jpg sebelum Anda mulai.

unbounce-image02unbounce-image02unbounce-image02

Mulai Dengan Halaman Kosong

Ketika membangun halaman arahan dari file photoshop, kami sarankan mulai dari "halaman kosong" pada platform Unbounce.

unbounce-image15unbounce-image15unbounce-image15

Halaman Properti

Menggunakan file photoshop asli Anda sebagai panduan Anda, atur lebar halaman di panel properti halaman. Tetapkan warna background ke page landing. Unggah gambar background jika perlu. Atur warna teks default menjadi warna teks yang paling umum digunakan dalam desain Anda. Tetapkan warna tautan untuk melengkapi properti halaman Anda.

unbounce-image21unbounce-image21unbounce-image21

Bagian Halaman dan Tree Structure

Sekarang saatnya untuk struktur landing page. Drag dan drop bagian page sections ke halaman Anda. Biasanya Anda akan menambahkan satu bagian halaman untuk setiap bagian vertikal yang didefinisikan dengan jelas dari desain Anda. Misalnya, Anda dapat menambahkan bagian halaman untuk: header, area konten 1, area konten 2 dll, footer. Kemudian Anda dapat mengatur tinggi setiap bagian sesuai dengan ukuran dalam file photoshop Anda. Setelah semua bagian halaman telah diatur, buka menu tree structure di sebelah kiri, dan beri nama setiap bagian dengan sesuai. Ini akan mempermudah untuk memodifikasi dan mengatur landing page.

Setiap elemen baru yang dibuat di landing page akan muncul di tree structure, jadi pastikan Anda menamai setiap elemen baru saat ditambahkan, untuk referensi di masa mendatang dan modifikasi mudah.

unbounce-image14unbounce-image14unbounce-image14

Background

Anda dapat menetapkan warna background atau gradien ke bagian halaman, atau Anda dapat mengunggah gambar untuk digunakan untuk background Anda. Gambar juga bisa digolongkan. Dalam contoh di bawah ini, tekstur background diunggah untuk area utama, dan lainnya untuk strip yang lebih gelap di atas dan di bawah.

unbounce-image09unbounce-image09unbounce-image09

Gambar dan Video

Gambar yang telah Anda potong dan ekspor dari Photoshop sekarang dapat diunggah dan ditambahkan ke page landing. Seret dan lepas gambar menggunakan alat gambar di bilah alat kiri, dan posisikan di page landing sesuai dengan desain photoshop Anda

Setelah diposisikan, ingat untuk menamai mereka dalam struktur pohon. Untuk menempatkan video di page landing Anda, gunakan alat video dari toolbar kiri dan tempelkan kode penyematan YouTube / Vimeo Anda di jendela yang muncul. Ubah ukuran dan posisikan sesuai dengan ukuran dan rasio aspek yang diinginkan.

unbounce-image10unbounce-image10unbounce-image10

Teks

Drag dan drop text tool ke halaman. Posisikan setiap blok teks sesuai dengan file photoshop Anda dan masukkan salinan Anda menggunakan editor teks di bawah ini. Anda dapat menyesuaikan salinan, font, ukuran, tinggi garis, dan warna untuk mencocokkan file photoshop Anda.

unbounce-image05unbounce-image05unbounce-image05

Kotak

Anda dapat menggunakan kotak sebagai wadah untuk elemen seperti formulir, gambar, atau teks. Memodifikasi stroke, warna, dan radius sudut untuk hasil visual yang diinginkan, dan bahkan mengubah kotak menjadi lingkaran jika perlu.

Bentuk

Drag and drop elemen formulir Anda ke page landing. Anda akan diminta dengan jendela overlay dari builder. Pilih bidang siap pakai atau buat sendiri. Saat menggunakan bidang email pra-dibuat, aktifkan opsi "Validasi sebagai Alamat Email". Setelah selesai, klik untuk memilih bentuk dan menyesuaikan dengan mode dengan menyesuaikan spasi, font, warna, lebar dan tinggi di panel properti di sebelah kanan.

unbounce-image08unbounce-image08unbounce-image08

Tombol

Stylize tombol berdasarkan warna, gradien atau dengan menambahkan gambar kustom. Status Rollover juga dapat diatur. Edit teks tombol dan ubah pengaturan font agar sesuai dengan desain Anda.

unbounce-image01unbounce-image01unbounce-image01

Halaman konfirmasi

Jika Anda memiliki formulir di halaman Anda, halaman konfirmasi akan dipicu ketika formulir diisi. Anda dapat mengakses tab halaman konfirmasi di sudut kiri atas halaman Anda.

Ubah desain halaman konfirmasi untuk mencocokkan desain halaman arahan Anda. Ini akan meyakinkan pengguna bahwa mereka telah mengikuti jalur yang benar dan memberikan pengalaman yang mulus dari pendaratan ke pasca-konversi

unbounce-image20unbounce-image20unbounce-image20

Tetapkan Sasaran Konversi

Setiap halaman arahan membutuhkan sasaran konversi. Anda dapat mengatur ini dengan mengklik tab "Tujuan Konversi" di panel properti. Jika Anda memiliki formulir, itu harus ditetapkan sebagai "Pengajuan Formulir".

unbounce-image13unbounce-image13unbounce-image13

Final Layout

Setelah semua elemen halaman arahan Anda berada di halaman, cukup seret untuk memposisikan ulang elemen agar sesuai dengan file photoshop Anda dan buat tata letak akhir. Gunakan mode pratinjau untuk melakukan tinjauan akhir halaman arahan Anda.

unbounce-image16unbounce-image16unbounce-image16

BARU - Bagian 4: Membuat Halaman Pendaratan Anda Mobile Responsif

Apa itu Mobile Responsive?

Mobile Responsive in Unbounce memungkinkan Anda untuk menyajikan versi seluler atau desktop dari halaman Anda secara otomatis ke pengunjung tergantung pada ukuran browser mereka tanpa menggunakan pengalihan. Ketika Mobile Responsif diatur dan diaktifkan di suatu laman, setiap pengunjung yang menggunakan perangkat seluler akan melihat tampilan seluler laman Anda, sementara siapa pun yang menggunakan perangkat desktop akan disajikan tampilan desktop.

Bagaimana Cara Kerjanya di Unbounce?

Unbounce menetapkan "break point" untuk halaman Mobile Responsif Anda pada 600px. Ini berarti bahwa setiap jendela browser dengan area pandang 600px atau kurang akan dilayani tampilan seluler halaman. Browser apa pun dengan area pandang lebih besar dari 600 piksel akan melihat versi desktop halaman tersebut.

Catatan: layar retina, seperti iPhone, secara teknis lebih besar dari 600 piksel karena resolusinya yang tinggi, tetapi area pandang berperilaku seperti jendela browser yang lebih kecil, sehingga ponsel retina akan menampilkan versi seluler halaman tersebut

Membangun Page Landing Responsif Seluler Anda

Ada beberapa hal yang perlu Anda sesuaikan laman responsif seluler Anda dan mulai menayangkannya ke pengunjung seluler Anda:

Desktop / Tampilan Seluler

Klik tombol di kanan bawah jendela Page Builder untuk beralih antara tampilan Desktop dan Seluler.

Mengubah Ukuran Teks

Anda dapat mengubah ukuran teks dari versi desktop Anda agar sesuai dengan versi seluler Anda. Pilih kotak teks dan gunakan batang skala di kanan atas Halaman Properti. Kotak teks itu sendiri juga dapat diubah ukurannya secara terpisah di desktop dan seluler.

Catatan: Penyesuaian apa pun untuk font, ukuran font, format atau tinggi garis yang dibuat dari Editor Teks (bukan skala batang) akan mempengaruhi kedua tampilan.

Formulir dan Tombol

Bentuk dan tombol akan sama di seluruh tampilan seluler dan desktop Anda. Anda dapat menyembunyikan tombol pada satu tampilan dan menampilkan yang berbeda pada tampilan lainnya. Formulir Anda harus konsisten di kedua versi tersebut.

Menyembunyikan / Menampilkan Objek

Jika Anda memiliki objek yang ingin Anda sembunyikan dalam tampilan seluler atau desktop, klik objek, lalu klik ikon Visibilitas di Panel Properti.

Anda juga dapat mengontrol visibilitas dengan mengklik Isi Halaman di bagian kiri bawah Page Builder.

Ketika Anda memilih objek di dalam Page Builder, Anda akan melihat mereka disorot dalam Panel Isi Halaman Anda. Anda akan melihat mata ketika elemen terlihat atau lingkaran yang solid jika tidak. Klik untuk beralih di antara keduanya.

Catatan: Jika Anda memilih untuk menyembunyikan kotak atau bagian halaman dengan objek bersarang di dalam, semua item yang bersarang akan disembunyikan.

Elemen Bergerak Antara Bagian Halaman dan Unsur Nested Unparenting

Secara default, jika ada elemen yang dipindahkan di antara bagian halaman, itu akan dipindahkan di kedua tampilan. Untuk memindahkan elemen di luar bagian halaman tanpa benar-benar mengubah bagian halaman, tahan tombol Command (mac) atau tombol Control (Windows) saat Anda menyeret elemen. Anda akan melihat pengingat ini kapan saja Anda memindahkan elemen dari satu bagian halaman ke bagian lain tanpa menahan Command atau Control.

Jika beberapa elemen disatukan dalam kotak, memindahkan elemen-elemen tersebut dalam satu tampilan, juga akan memindahkan semua elemen dalam tampilan lainnya. Anda juga dapat menggunakan Command/Control+klik untuk menghapus item dalam satu tampilan dan memindahkannya secara terpisah dari tampilan lain.

Tip: ingat bahwa Anda juga dapat menggeser + klik untuk memindahkan lebih dari satu elemen dalam satu waktu

Peringatan Luar Batas: Anda akan melihat peringatan jika ada objek Anda di luar batas halaman arahan Anda. Cukup gerakkan objek dalam batas-batas halaman Anda, atau menyembunyikannya, untuk menghapus peringatan. Anda juga dapat menonaktifkan peringatan di luar batas menggunakan kotak centang di bagian kanan atas Page Builder.

Tampilkan Versi Seluler ke Pengunjung

Ketika Anda sudah selesai meletakkan laman Seluler Anda, buka Panel Properti di sebelah kanan dan centang Tampilkan Versi Seluler ke Pengunjung untuk mengaktifkan tampilan seluler. Kemudian simpan dan publikasikan (atau terbitkan ulang) halaman Anda.

Bagian 5: Mengirimkan Template Anda ke Themeforest

Daftar Periksa Penting Anda

  • Verifikasi Properti Page
  • Tinjau Tree Structure
  • Tinjau Gambar dan Tata Letak
  • Tinjau Salinan dan Font
  • Tautan Uji
  • Formulir Tes dan Tombol
  • Tinjau & Tetapkan Sasaran Konversi (jika halaman Anda memiliki formulir)
  • Tinjau halaman konfirmasi bentuk desktop dan seluler (jika halaman Anda memiliki formulir)
  • Verifikasi bahwa opsi "Tampilkan Responsif Seluler" dicentang (jika laman Anda memiliki versi responsif seluler)
  • Publikasikan Halaman
  • Saat membuat dokumen bantuan untuk template, harap sertakan link ini ke petunjuk penggunaan. Jika Anda telah menyertakan Javascript / CSS khusus dalam template Anda, Anda harus menyertakan petunjuk terperinci untuk cara menggunakan atau memperbarui skrip dan fungsionalitas.

Catatan: Memublikasikan halaman Anda memungkinkan Anda menyediakan link pratinjau langsung di pasar template.

Persyaratan Persetujuan Hak Atas Tanah

Template landing page harus dapat disesuaikan. Pengguna akhir harus dapat dengan mudah menukar gambar pahlawan apa pun atau background fotografi. Untuk memastikan bahwa kualitas landing page Anda tetap utuh dan bahwa halaman Anda lolos persetujuan oleh ThemeForest, harap ikuti panduan ini:

  1. Jangan mengedit sumber elemen teks
  2. Biarkan panduan halaman dan panduan bagian dihidupkan
  3. Margin di bagian halaman harus digunakan untuk membuat celah, bukan bagian halaman kosong
  4. Placeholder adalah gambar dan mudah untuk ditukar
  5. Lembar gaya khusus atau Javascrip harus dimulai dengan komentar termasuk info kontak dan instruksi untuk dukungan dari penulis
  6. Struktur pohon Anda tidak dapat memiliki elemen yang rusak
  7. Tombol formulir harus terpasang dengan benar ke formulir
  8. Jika template Anda menyertakan formulir, Sasaran Konversi harus ditetapkan ke "Pengiriman Formulir"
  9. Jika template Anda memiliki versi responsif seluler, opsi "Tampilkan Responsif Seluler" harus dicentang

Mengunduh Halaman

Setelah Anda membuat template laman landas yang indah dan mudah disesuaikan, Anda harus mengunduhnya sebelum Anda dapat membagikannya dengan (atau menjualnya ke) dunia. Untuk mengunduh halaman, masuk ke halaman ikhtisar halaman (bagian yang mencantumkan semua varian dan statistik halaman Anda), temukan ikon roda gigi/gigi di kanan atas dan klik "Download Page".

unbounce-image03unbounce-image03unbounce-image03

Sebuah jendela dialog akan muncul, yang akan mengirimi Anda email ketika file siap untuk diunduh. File akan memiliki ekstensi ".unbounce". Setelah Anda mengunduh file Anda, jangan ragu untuk mengganti namanya seperlunya, tetapi biarkan ekstensi ".unbounce" tetap utuh.

Kemasan Beberapa Layouts Bersama

Ingin mengemas beberapa tata letak dari template yang sama? Harap hindari penggunaan variasi halaman untuk mengemas beberapa tata letak bersama.

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


Penyelesaian

Saya harap ini memberi Anda pengantar yang menyeluruh untuk Unbounce dan pembuatan template Unbounce responsif seluler untuk dijual di pasar seperti ThemeForest. Namun, masih banyak yang harus dipelajari, jadi jika ada pertanyaan, jangan ragu untuk bertanya di komentar.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.