Ingin memiliki halaman promosi yang menarik, rapi, dan langsung bisa menghasilkan penjualan—tanpa perlu repot coding atau menyewa developer? Di UTAS, Anda bisa membuat landing page profesional hanya dalam hitungan menit. Landing page adalah halaman khusus yang dirancang untuk memfokuskan perhatian pengunjung pada satu tujuan utama, seperti membeli produk, mendaftar webinar, atau mengisi formulir konsultasi. Dalam panduan ini, Anda akan belajar langkah demi langkah cara membuat landing page di UTAS secara mudah, cepat, dan tetap terlihat meyakinkan—baik untuk pemula maupun pelaku bisnis digital yang ingin tampil lebih optimal.
1. Cara Membuat Landing Page di UTAS
- Login ke Akun UTAS melalui app.utas.co
- Dari dashboard, pilih menu Landing Page.
- Klik Buat Landing Page Baru.
- Secara default maka akan ada template, seller bisa langsung mengedit landing page.
- Klik komponen yang ingin diedit dan sesuaikan isi serta desainnya.
- Simpan & Publish.
- Anda dapat langsung publish landing page Anda, sehingga bisa langsung dikunjungi oleh customer.
- Atau, jika Anda belum ingin mempublikasikan, Anda bisa menyimpannya sebagai draft terlebih dahulu dan melakukan editing lagi di lain waktu.
2. Mengenal Sidebar Content
Sidebar content adalah panel utama yang menampilkan komponen-komponen yang telah Anda tambahkan ke landing page. Komponen-komponen ini tersusun berurutan dari atas ke bawah, sesuai dengan tampilan di halaman sebenarnya.
Fitur Sidebar Content:
- Sorting Komponen
Gunakan aksi drag dan drop di sisi kanan komponen untuk mengatur urutan tampilan di landing page. - Edit Komponen
Klik komponen langsung di sidebar atau preview, atau klik ikon titik tiga (⋮) lalu pilih Edit. - Menambah Komponen Baru
Klik tombol “Add Component” di pojok kanan atas untuk membuka daftar komponen yang tersedia.
3. Daftar Komponen & Cara Menggunakannya
Text
Komponen Text digunakan untuk menambahkan dan memformat tulisan seperti judul, paragraf, atau penjelasan di landing page Anda. Komponen ini mendukung berbagai pengaturan untuk menyesuaikan tampilan teks agar lebih menarik dan sesuai kebutuhan.
Fitur yang tersedia:
- Ukuran & Rata Teks: Atur ukuran font (kecil, sedang, besar) dan perataan teks (kiri, tengah, kanan, justify).
- Gaya Teks: Gunakan bold, italic, underline, atau strikethrough untuk menyorot bagian penting.
- Warna & Font: Ubah warna teks dan latar belakang. Pilih jenis huruf sesuai gaya visual Anda.
- Daftar: Tambahkan bullet atau numbering untuk membuat poin-poin yang jelas.
- Link: Sisipkan hyperlink untuk mengarahkan pengunjung ke halaman lain.
- Kolom “Enter Text”: Area tempat Anda menulis dan langsung mengatur format teks.
Image
Komponen Gambar berfungsi untuk menampilkan visual yang mendukung konten halaman Anda. Komponen ini sangat cocok digunakan untuk menampilkan ilustrasi, banner promosi, atau gambar produk agar halaman terlihat lebih menarik dan komunikatif. Anda dapat mengunggah gambar dengan resolusi tinggi dan menyesuaikannya dengan tata letak landing page. Komponen ini juga mendukung pengaturan seperti: Ukuran gambar (resize), Border radius, dan deskripsi gambar. Gunakan gambar yang relevan dan berkualitas untuk memperkuat pesan yang ingin Anda sampaikan, meningkatkan daya tarik visual, serta membangun kepercayaan pengunjung terhadap brand atau produk Anda.
Product
Menampilkan informasi produk dari katalog yang sudah dibuat di menu produk. Saat ini Landing Page hanya mendukung untuk 1 produk dalam 1 halaman. Anda dapat melakukan penyesuaian baik ukuran gambar atau template penempatan produk (horizontal atau vertikal).
Checkout Form
Komponen Formulir Pembelian berfungsi untuk menghubungkan landing page secara langsung dengan produk yang Anda tawarkan. Komponen ini terdiri dari form input untuk mengisi data pembeli (seperti nama, email, nomor HP) untuk informasi checkout. omponen ini secara otomatis terhubung dengan produk yang telah Anda pilih untuk halaman tersebut, sehingga proses pembelian menjadi lebih praktis dan efisien. Saat form diisi dan tombol diklik, data akan langsung terekam dan pengunjung dapat melanjutkan ke proses pembayaran tanpa hambatan.
Button
Komponen tombol aksi, digunakan untuk mengarahkan pengunjung ke link tertentu (CTA). Anda bisa mengubah warna tombol dan mengisi teks sesuai dengan keinginan. Selain itu, wajib untuk menginputkan link yang dapat diakses, sehingga akan mengarahkan ke halaman baru jika tombol tersebut di klik oleh pengguna.
HTML
Komponen HTML Kustom menyediakan area khusus bagi pengguna untuk menambahkan kode HTML sendiri secara langsung ke dalam landing page. Fitur ini dirancang untuk pengguna lanjutan yang ingin menambahkan elemen visual, fungsi interaktif, atau integrasi tambahan yang tidak tersedia di komponen standar UTAS.
Image Slider
Komponen untuk menampilkan beberapa gambar dengan mekanisme slide. User bisa melakukan klik pada arrow untuk melihat gambar selanjutnya, atau secara otomatis slide setiap 5 detik dengan mengaktifkan Autoslide.. Cocok untuk menampilkan gallery atau testimoni produk.
Komponen Testimoni
Komponen Testimoni berfungsi untuk menampilkan pengalaman atau ulasan positif dari pelanggan yang sudah menggunakan produk atau layanan Anda. Testimoni membantu membangun kepercayaan, meningkatkan kredibilitas, dan mempengaruhi keputusan beli calon pelanggan secara signifikan. Di UTAS, Anda dapat menambahkan elemen testimoni lengkap dengan klik Tambah Testimoni dan akan disajikan form (Nama pelanggan, Foto atau avatar, Isi testimoni, dan rating).
Formatnya bisa disusun satu per satu atau dalam bentuk slider agar lebih dinamis. Anda juga bisa menyesuaikan gaya tampilan sesuai branding Anda, seperti warna text.
Komponen FAQ
Komponen FAQ (Frequently Asked Questions) digunakan untuk menampilkan daftar pertanyaan yang sering diajukan pengunjung, lengkap dengan jawabannya. Fitur ini membantu menjawab keraguan calon pembeli secara cepat tanpa harus menghubungi Anda langsung. Di UTAS, setiap item FAQ terdiri dari judul pertanyaan dan isi jawaban yang bisa diperluas saat diklik (accordion style). Anda juga dapat mengatur urutan pertanyaan sesuai prioritas atau isu paling umum. Komponen ini sangat cocok ditambahkan pada halaman produk, layanan, webinar, atau konsultasi untuk memberikan informasi tambahan yang praktis dan profesional. Anda dapat menambahkan pertanyaan dengan klik tambah pertanyaan dan akan ada form yang harus di isi.
Komponen Animation
Dengan komponen Animation, Anda dapat menambahkan berbagai elemen animasi pada halaman Anda, seperti ikon-ikon bergerak atau efek visual yang dinamis. Animasi ini membantu memberikan sentuhan profesional dan modern pada tampilan landing page, sekaligus meningkatkan pengalaman pengunjung saat menjelajahi halaman Anda. Selain memperindah tampilan, penggunaan animasi juga dapat membantu mengarahkan fokus pengunjung ke bagian tertentu yang ingin Anda tonjolkan, misalnya tombol CTA, testimoni, atau bagian promosi.
4. Mengenal Sidebar Design
Sidebar Design adalah panel pengaturan tampilan global dari landing page Anda. Melalui fitur ini, pengguna bisa menyesuaikan tampilan visual seperti background dan font utama untuk keseluruhan halaman.
Pengaturan Background
Pengguna dapat mengatur background secara terpisah untuk tampilan desktop dan mobile, sehingga desain tetap responsif dan nyaman dilihat di berbagai perangkat.
Pilihan Background yang Tersedia:
- Warna Solid
- Pilih warna latar menggunakan color picker.
- Cocok untuk tampilan bersih dan minimalis.
- Tips: Gunakan warna kontras agar teks mudah dibaca.
- Gambar Latar (Background Image)
- Unggah gambar dari perangkat atau pilih dari library gambar yang tersedia.
- Bisa digunakan untuk menampilkan visual brand, pattern, atau latar belakang tematik.
- Pastikan resolusi gambar cukup tinggi agar tidak pecah di tampilan desktop.
- Gradient
- Atur kombinasi dua warna untuk menciptakan efek gradasi.
- Pilih arah gradasi: horizontal, vertikal, diagonal, dll.
- Efek ini memberikan tampilan lebih dinamis dan modern.
💡 Tips:
- Gunakan gambar yang ringan agar tidak memperlambat loading halaman.
- Gunakan warna atau gradient yang konsisten dengan branding Anda.
Pengaturan Font Utama
Pengguna dapat memilih font utama (primary font) dari daftar pilihan yang telah disediakan. Font ini akan digunakan secara menyeluruh di landing page untuk memastikan konsistensi tipografi.
Langkah Mengatur Font:
- Buka tab Design pada sidebar.
- Pilih menu Font Utama.
- Pilih salah satu font dari daftar yang tersedia.
- Perubahan akan otomatis diterapkan ke seluruh halaman.
Catatan:
- Pemilihan font berlaku global (judul, paragraf, tombol, dll.)
- Disarankan memilih font yang mudah dibaca dan sesuai dengan karakter brand Anda.
Mulai Buat Landing Pagemu Sekarang!
Baca panduan dan tonton videonya.