Konvert.id
← Konvert.id

LP - Overview

Bangun Landing Page Manual dengan Visual Builder

Bangun landing page lengkap dari nol menggunakan visual builder Konvert

Pemula~20 menit

Prasyarat

Hasil akhir: Sebuah landing page lengkap, hero section, section produk, social proof, sudah dipublish dan bisa diakses siapa saja lewat URL publikmu. Butuh: Akun Konvert aktif dengan toko yang sudah dibuat. Siapkan juga konten dasar: judul produk, deskripsi singkat, dan gambar (opsional).

Ringkasan

Visual builder Konvert adalah editor drag-and-drop di mana kamu menyusun landing page layaknya menyusun blok. Kamu menambah komponen dari sidebar, mengatur kontennya di panel kanan, lalu publish dengan satu klik. Tutorial ini memandu langkah demi langkah dari halaman daftar landing page sampai halaman live pertamamu.

Langkah-langkah

1. Buka halaman Landing Pages

Dari Dashboard, klik Landing Pages di sidebar kiri. Kamu akan masuk ke halaman /landing-pages.

Di sini terlihat daftar semua landing page milikmu (kosong jika baru pertama kali). Di pojok kanan atas ada tombol Create Page berwarna oranye.

Halaman daftar landing pages

2. Buat landing page baru

Klik tombol Create Page. Muncul halaman pilihan cara membuat landing page dengan tiga opsi: Generate by AI, Manual Builder, dan Import with AI.

Pilih Manual Builder (pilih template atau mulai dari blank, tulis konten sendiri). Ini membuka builder dengan kanvas kosong.

Kalau kamu ingin pakai template atau AI, lihat tutorial Bangun Landing Page dengan AI.

Pilih cara buat landing page: AI, Manual Builder, atau Import
Pilih cara buat landing page: AI, Manual Builder, atau Import

3. Kenali tampilan builder

Setelah memilih Blank, builder terbuka di /builder/[pageId]. Ada tiga area utama:

Toolbar atas (full lebar):

  • Tombol panah kiri (Exit) untuk keluar ke daftar
  • Tombol Undo/Redo
  • Nama halaman di tengah
  • Indikator status simpan (oranye = ada perubahan belum tersimpan)
  • Tombol Save, Preview, dan Publish di kanan

Panel kiri (sidebar, bisa diubah lebarnya):

  • Tab Structure (ikon layer) — pohon komponen dan tombol "Add Component"
  • Tab Design (ikon palet) — tema, warna, dan lebar halaman
  • Tab Settings (ikon gear) — SEO, URL slug, pixel, kode kustom

Kanvas tengah:

  • Area utama tempat halaman ditampilkan secara langsung
  • Saat masih kosong: tampil tulisan "Add your first component to get started"

Panel kanan (properties):

  • Muncul saat kamu mengklik sebuah komponen
  • Berisi field untuk mengedit konten dan tampilan komponen tersebut
tampilan lengkap builder: panel kiri Structure, kanvas, dan toolbar atas
tampilan lengkap builder: panel kiri Structure, kanvas, dan toolbar atas

4. Tambah komponen pertama (Hero Section)

Hero section biasanya terdiri dari Heading + Text + Button yang dibungkus dalam satu Group.

Cara menambah komponen:

  1. Di panel kiri, pastikan kamu di tab Structure
  2. Klik tombol "Add Component" di bagian bawah panel Structure
  3. Dialog Add Component terbuka, komponen dikelompokkan per kategori
  4. Cari komponen yang kamu inginkan atau ketik di kolom pencarian "Search components…"

Tambahkan Group terlebih dahulu:

  1. Klik kategori Layout, lalu klik Group
  2. Group muncul di kanvas sebagai container kosong

Tambahkan Heading di dalam Group:

  1. Klik komponen Group di kanvas untuk memilihnya
  2. Klik tombol + yang muncul di dalam Group (atau klik "Add Component" lagi)
  3. Pilih kategori Basic → Heading
  4. Heading muncul di dalam Group

Edit teks Heading:

  1. Klik komponen Heading di kanvas atau di pohon Structure
  2. Panel kanan terbuka dengan field properti Heading
  3. Isi field Text dengan judul produkmu (misalnya: "Kursus Digital Marketing Terbaik 2025")
  4. Pilih Level H1 untuk heading utama
  5. Atur Alignment ke Center
  6. Ubah Font Weight ke 800 untuk tampil lebih tebal
dialog Add Component dengan kategori komponen
dialog Add Component dengan kategori komponen
panel properti Heading: field Text, Level H1, Alignment
panel properti Heading: field Text, Level H1, Alignment

5. Tambah subheadline dan tombol CTA

Masih di dalam Group yang sama, tambahkan dua komponen lagi:

Tambah Text (subheadline):

  1. Klik komponen Heading di pohon Structure untuk memilihnya
  2. Klik tombol + yang muncul antara komponen di kanvas, atau klik "Add Component"
  3. Pilih Basic → Text
  4. Di panel kanan, isi field Content dengan deskripsi singkat produkmu
  5. Atur Alignment ke Center

Tambah Button (CTA):

  1. Tambahkan komponen Basic → Button
  2. Di panel kanan, isi field Text dengan teks tombol (misalnya: "Daftar Sekarang")
  3. Di bagian Action, pilih tipe:
    • Link — isi URL tujuan
    • WhatsApp — isi nomor HP dan pesan otomatis
    • Scroll — tombol scroll ke section lain di halaman
  4. Pilih Variant: Solid untuk tombol penuh warna
  5. Pilih Size: Large

Beri background pada Group:

  1. Klik Group di pohon Structure
  2. Di panel kanan, gulir ke bagian Style
  3. Atur Background Color ke warna pilihanmu (misalnya #fff8f0 untuk krem muda)
  4. Atur Padding atas-bawah sekitar 64px agar ada ruang napas
kanvas builder menampilkan hero section landing page
kanvas builder menampilkan hero section landing page

6. Tambah section produk (Image + Order Form)

Section ini menampilkan gambar produk dan formulir pemesanan.

Tambah Image:

  1. Klik tombol + di bawah Group yang sudah ada (di luar Group)
  2. Pilih Media → Image
  3. Di panel kanan, isi field Src dengan URL gambar produkmu
  4. Isi Alt dengan deskripsi gambar untuk aksesibilitas
  5. Pilih Object Fit: Cover untuk gambar penuh

Tambah Order Form:

  1. Tambahkan komponen Forms → Order Form
  2. Di panel kanan, cari field Product ID, pilih atau ketik ID produk yang ingin ditampilkan
  3. Aktifkan field-field yang ingin ditampilkan: Nama, Nomor HP, Email
  4. Atur teks tombol submit di Submit Button Text (misalnya: "Pesan Sekarang")

Catatan: Order Form perlu terhubung ke produk yang sudah dibuat di menu Products. Jika belum punya produk, buat dulu di /products/new.

section order form di landing page dengan field Nama, Email, HP
section order form di landing page dengan field Nama, Email, HP

7. Tambah social proof (Testimonial)

Testimoni membantu membangun kepercayaan calon pembeli.

  1. Tambahkan komponen Content → Testimonial
  2. Di panel kanan, pilih Layout: Cards
  3. Pilih Columns: 3 untuk tampilan tiga kolom
  4. Di bagian Items, tambahkan minimal 2–3 testimonial:
    • Name: nama pelanggan
    • Role: jabatan atau kota (misalnya: "Ibu Rumah Tangga, Jakarta")
    • Content: isi testimonial
    • Rating: 1–5 bintang
  5. Aktifkan toggle Show Rating dan Show Avatar
section testimonial pelanggan dalam kartu
section testimonial pelanggan dalam kartu

8. Susun ulang komponen (opsional)

Jika urutan komponen perlu diubah:

Cara 1 — Drag di kanvas: Arahkan kursor ke komponen hingga ikon drag (⠿) muncul, lalu seret ke posisi baru.

Cara 2 — Drag di pohon Structure: Di panel kiri tab Structure, seret baris komponen ke atas atau bawah sesuai urutan yang diinginkan.

pohon Structure di panel kiri builder
pohon Structure di panel kiri builder

9. Atur desain halaman

Klik tab Design di panel kiri untuk mengatur tampilan keseluruhan halaman:

  • Theme: pilih Light (latar putih, teks gelap) atau Dark (latar gelap, teks terang)
  • Container Width: pilih lebar konten, Medium (896px) cocok untuk kebanyakan LP
  • Page Background: warna latar luar konten
  • Container Color: warna latar area konten utama
panel Design: pilihan Theme dan Container Width
panel Design: pilihan Theme dan Container Width

10. Atur SEO dan URL

Klik tab Settings di panel kiri:

Di bagian Page Info:

  • URL Slug: alamat halaman publik kamu (misalnya: kursus-digital-marketing). Otomatis diformat menjadi huruf kecil dan tanda hubung.
  • Preview URL-nya: [nama-toko].<your-domain>/kursus-digital-marketing

Di bagian SEO:

  • Meta Title: judul halaman yang muncul di Google (disarankan 50–60 karakter)
  • Meta Description: deskripsi singkat untuk preview di hasil pencarian (120–160 karakter)
  • OG Image URL: gambar yang muncul saat halaman dibagikan di WhatsApp atau media sosial
panel Settings dengan accordion SEO terbuka
panel Settings dengan accordion SEO terbuka

11. Simpan perubahan

Klik tombol Save di toolbar atas, atau tekan Cmd+S (Mac) / Ctrl+S (Windows/Linux).

Status simpan berubah dari teks oranye "Unsaved changes" menjadi teks hijau "Auto-saved X min ago" setelah berhasil tersimpan.

Penting: Tombol Publish tidak bisa diklik selama masih ada perubahan yang belum disimpan. Selalu simpan dulu sebelum publish.

toolbar builder dengan status Auto-saved dan tombol Publish
toolbar builder dengan status Auto-saved dan tombol Publish

12. Preview halaman

Sebelum publish, cek tampilan di berbagai ukuran layar:

  1. Klik tombol Preview di toolbar atas
  2. Modal Preview terbuka dengan pilihan viewport: Mobile (375px), Tablet (768px), Desktop (1200px)
  3. Klik setiap mode untuk melihat tampilannya
  4. Pastikan teks tidak terpotong, tombol terlihat jelas, dan gambar proporsional di semua mode
modal Preview dalam mode Mobile
modal Preview dalam mode Mobile

13. Publish halaman

Setelah puas dengan tampilan:

  1. Pastikan halaman sudah tersimpan (indikator hijau di toolbar)
  2. Klik tombol Publish berwarna oranye di toolbar atas
  3. Proses publish berjalan beberapa detik
  4. Muncul notifikasi sukses: "Published! Your page is now live at [URL kamu]"
  5. Browser otomatis membuka halaman publikmu di tab baru

Hasilnya

Landing page pertamamu sudah live! Kamu bisa mengaksesnya di https://[nama-toko]./[slug-kamu], dan URL ini bisa langsung dibagikan ke pelanggan.

Dari daftar landing page (/landing-pages), kamu bisa memantau statistik halaman: jumlah views, konversi, dan revenue.

landing page yang sudah dipublish tampil di browser
landing page yang sudah dipublish tampil di browser

Tips Tambahan

Duplikat komponen: Di pohon Structure, hover baris komponen dan klik ikon Copy untuk duplikat komponen dengan cepat, berguna saat membuat item testimonial atau fitur yang mirip.

Sembunyikan di mobile: Di panel kanan setiap komponen, gulir ke bagian Style → aktifkan Hide on Mobile untuk komponen yang terlalu lebar untuk layar kecil.

Countdown untuk urgensi: Tambahkan komponen Content → Countdown dengan mode Evergreen, timer selalu berjalan mundur sejak pengunjung membuka halaman, menciptakan urgensi.

FAQ: Tambahkan komponen Content → FAQ untuk menjawab pertanyaan umum dan mengurangi hambatan pembelian.

Troubleshooting

  • Tombol Publish masih abu-abu (tidak aktif): Kamu masih punya perubahan yang belum disimpan. Klik Save terlebih dahulu.
  • Order Form tidak menampilkan produk: Pastikan produk sudah dibuat di menu Products dan Product ID sudah diisi dengan benar di panel kanan Order Form.
  • Gambar tidak muncul: Pastikan URL gambar bisa diakses publik (coba buka URL-nya di tab browser baru). Gunakan layanan hosting gambar seperti Supabase Storage, Imgbb, atau Cloudinary.
  • Komponen tidak bisa dimasukkan ke dalam Group: Coba klik Group di pohon Structure terlebih dahulu, baru tambahkan komponen baru, komponen akan masuk sebagai anak dari Group.
  • Halaman live masih menampilkan versi lama: Tunggu beberapa detik setelah publish, lalu refresh halaman. Cache diperbarui otomatis setiap publish.

Siap buat landing page pertamamu?

Daftar Konvert gratis dan mulai jualan online hari ini.

Daftar Sekarang