Mengenal Interface Landing Page Builder

Hasil akhir: Kamu paham semua area interface builder, panel kiri, kanvas, panel kanan, toolbar, dan bisa menambah, mengedit, menghapus, serta meng-publish komponen pertamamu. Butuh: Akun Konvert aktif dengan toko yang sudah dibuat.

Ringkasan

Landing Page Builder Konvert adalah visual editor drag-and-drop untuk membuat halaman penjualan, capture leads, atau showcase produk tanpa coding. Tutorial ini fokus pada orientasi interface: kamu akan tahu di mana letak setiap tombol dan apa fungsinya sebelum mulai membangun konten.

Untuk styling detail & responsivitas → lihat Tutorial 14 — Styling & Responsive. Untuk SEO → lihat LP Settings: SEO. Untuk tracking → LP Settings: Meta Pixel / GTM. Untuk publish → LP Settings: Publish.

1. Buka Builder

1.1 Buka halaman Landing Pages

Dari dashboard toko, klik menu Landing Pages di sidebar kiri. Halaman ini menampilkan daftar semua landing page yang sudah pernah dibuat.

halaman store pages — daftar LP / empty state, menu Landing Pages aktif

Kalau belum ada LP sama sekali, muncul empty state dengan tombol besar "Create Page".

1.2 Buat landing page baru

Klik tombol oranye "Create Page" di pojok kanan atas. Dialog pilihan cara membuat akan muncul.

dialog buat landing page — 3 opsi: blank, pilih template, buat dengan AI

Tiga pilihan yang tersedia:

Pilihan	Kapan dipakai
Manual Builder	Kamu kontrol penuh dari nol
Pilih Template	Mulai dari desain yang sudah jadi
Generate by AI	AI otomatis bangun LP dari info produkmu

Untuk tutorial ini pilih "Manual Builder" agar kita bisa menjelajahi setiap area builder dengan detail.

1.3 Builder terbuka

Setelah pilih Blank, sistem langsung membuka builder di URL /store/:storeId/pages/new (atau /pages/:pageId/edit kalau buka LP yang sudah ada).

Tampilan lengkap antarmuka builder Konvert

Sebelum menyentuh komponen apapun, kenali dulu 4 area utama builder.

2. Kenali 4 Area Interface

stateDiagram-v2
    state "Interface Builder" as IF {
        PanelKiri : Panel Kiri\n(Struktur + Komponen)
        Kanvas : Kanvas Tengah\n(Area kerja)
        PanelKanan : Panel Kanan\n(Properties)
        Toolbar : Toolbar Atas\n(Save/Publish/Preview)
    }

Versi teks (jika diagram di atas tidak muncul)

Interface Builder terdiri dari 4 area:

Panel Kiri — Struktur + Komponen (tambah dan atur komponen)
Kanvas Tengah — Area kerja (drag, susun, klik komponen)
Panel Kanan — Properties (edit style, konten, pengaturan komponen terpilih)
Toolbar Atas — Save / Publish / Preview

3. Panel Kiri (Detail)

Panel kiri adalah navigasi dan manajemen struktur LP. Ada 3 tab: Structure, Design, Settings — plus tombol + (Add Component) untuk membuka modal penambahan komponen.

Klik tombol + di panel kiri untuk membuka modal Add Component. Modal ini menampilkan semua komponen yang bisa ditambahkan ke halaman, dikelompokkan per kategori:

Kategori	Komponen
Basic	Heading, Text, Button, Divider, Spacer
Media	Image, Video, Gallery
Content	Countdown, Testimonial, FAQ, Features, Pricing
Forms	Order Form

Panel kiri tab Components di builder

Cara menambah komponen:

Klik kartu komponen di modal — langsung ditambahkan di bawah komponen terakhir di kanvas
Modal otomatis tertutup setelah komponen dipilih

Tab Structure

Menampilkan hierarki semua komponen yang sudah ada di halaman, dalam bentuk tree (seperti file explorer).

Panel kiri tab Layers di builder

Kegunaan:

Reorder — drag komponen di tree untuk pindahkan urutan
Select — klik nama komponen di tree untuk langsung pilih di kanvas
Lihat nested — komponen di dalam container/section terlihat bersarang

Tab Design

Pengaturan global visual LP: theme (Light/Dark), warna halaman, lebar kontainer. Perubahan di sini berlaku ke seluruh halaman.

Detail lengkap Design tab dibahas di Tutorial 14 — Styling & Responsive.

Tab Settings

Pengaturan level halaman: SEO meta tags, custom code, pixel tracking, social proof FOMO.

Detail lengkap Settings tab dibahas di: SEO · Custom Code · Meta Pixel · GTM · Social Proof · Publish.

4. Kanvas (Area Kerja)

Kanvas adalah tempat semua komponen hidup dan tempat kamu berinteraksi langsung.

kanvas builder beberapa komponen — selection box biru di sekeliling Heading

Elemen visual di kanvas yang perlu kamu kenali:

Elemen	Arti
Border biru	Komponen sedang terpilih
Border abu-abu (hover)	Kursor di atas komponen
Handle ⠿ (kiri)	Drag untuk pindahkan komponen
Angka urutan	Nomor urut komponen dari atas
Garis panduan	Helper alignment saat drag

Navigasi kanvas

Scroll — geser halaman naik/turun
Klik — pilih komponen
Klik kosong — deselect, tampilkan page properties
Double-klik teks — langsung edit inline (kalau komponen support)

5. Panel Kanan (Properties)

Panel kanan berubah isinya tergantung apa yang sedang dipilih di kanvas.

Saat tidak ada yang dipilih

Panel kanan menampilkan Page Properties, pengaturan global halaman (sama dengan Tab Settings di panel kiri).

Saat komponen dipilih

Panel kanan menampilkan 2 sub-tab utama, plus beberapa section collapsible di bawahnya:

Sub-tab	Isi
Properties	Konten komponen (text, gambar, items, dll.)
Style	Margin, padding, background, border, shadow, animasi, visibility

Beberapa komponen (seperti Button) juga punya section Tracking (collapsible) di bawah sub-tab Properties — untuk mengatur pixel event dan GTM event yang difire saat interaksi.

Panel kiri tab Design di builder

Properties → ubah konten komponen. Style → ubah tampilan visual komponen (dibahas di Tutorial 14). Tracking (collapsible) → pixel event per interaksi (dibahas di LP Settings: Meta Pixel).

Toolbar di atas kanvas berisi semua aksi global builder.

toolbar builder lengkap — logo back, undo, redo, device toggle, save preview publish

Undo / Redo

Aksi	Shortcut
Undo (batalkan)	`Ctrl + Z`
Redo (ulangi)	`Ctrl + Shift + Z`

Undo/redo berlaku untuk semua perubahan, tambah komponen, edit text, drag reorder, perubahan style.

Device Toggle

Tiga ikon untuk switch tampilan:

Ikon	Ukuran	Kapan pakai
Desktop	1280px+	Default editing
Tablet	768px	Cek layout medium
Mobile	375px	Paling penting — mayoritas traffic dari HP

Panel kiri tab Pages di builder

Penting: Editing di mode Mobile tidak mempengaruhi tampilan Desktop, dan sebaliknya. Kamu bisa set nilai berbeda per device.

Fullscreen

Klik ikon fullscreen untuk menyembunyikan panel kiri dan kanan, kanvas jadi maksimal. Klik lagi untuk keluar.

Save

Simpan perubahan. Konvert juga auto-save periodik, tapi selalu klik Save manual sebelum preview atau publish.

Draft vs Live: Save menyimpan versi draft. LP live tidak berubah sampai kamu klik Publish.

Preview

Buka tab baru dengan tampilan draft LP, persis seperti yang akan dilihat pengunjung, tapi belum live. Bisa diakses siapapun yang punya link preview.

Publish

Mempublikasikan draft ke URL public seketika — tidak ada dialog konfirmasi, LP langsung live begitu kamu klik. Setelah Publish, LP bisa diakses siapapun lewat URL finalnya. Detail pengaturan publish di LP Settings: Publish.

Settings (gear icon)

Shortcut ke pengaturan LP, SEO, domain, custom code. Sama dengan Tab Settings di panel kiri.

7. Tambah Komponen Pertama

Sekarang praktik langsung. Kita tambah komponen Heading.

7.1 Pilih komponen

Klik tombol + di panel kiri untuk membuka modal Add Component. Klik kartu Heading di kategori Basic.

panel kiri tab Components, kursor mengklik kartu "Heading" di kategori Basic

Komponen Heading langsung muncul di kanvas.

kanvas builder dengan Heading baru ditambahkan — selected (border biru), teks default "Your Heading Here"

7.2 Edit komponen

Klik komponen Heading di kanvas. Panel kanan menampilkan Properties untuk Heading:

Text — ganti dengan teks headingmu
Tag — pilih H1, H2, H3, dst. (penting untuk SEO)
Font Size — ukuran teks
Font Weight — tebal/tipis
Color — warna teks
Alignment — kiri/tengah/kanan

panel kanan properties Heading — text Produk Terbaikmu, H1, font size 48

Ubah Text menjadi judul yang kamu mau. Perubahan langsung terlihat di kanvas (live preview).

8. Reorder, Duplicate, Hapus

Tambah 2-3 komponen lagi, lalu coba operasi dasar ini.

Reorder

Cara 1 — Drag handle di kanvas: Hover ke komponen, klik dan tahan ikon ⠿ di kiri komponen, drag ke posisi baru.

Cara 2 — Tree di panel kiri: Buka tab Structure, drag nama komponen ke urutan yang kamu mau.

Mode preview di builder Konvert

Duplicate

Klik komponen → floating icon toolbar muncul di atas selection box → klik ikon Duplicate.

Shortcut: pilih komponen → Ctrl + D

selection box komponen Heading dengan floating icon toolbar — drag move-up move-down duplicate delete

Hapus

Pilih komponen → floating icon toolbar → klik ikon Delete.

Atau tekan Delete / Backspace saat komponen terpilih.

Tip: Kalau tidak sengaja hapus, langsung Ctrl + Z untuk undo.

9. Save vs Publish (Draft vs Live)

stateDiagram-v2
    [*] --> Draft : Buat/Edit LP
    Draft --> Draft : Ctrl+Z Undo
    Draft --> Saved : Klik Save
    Saved --> Preview : Klik Preview
    Preview --> Saved : Tutup preview
    Saved --> Live : Klik Publish
    Live --> Draft : Edit lagi → Save
    Live --> Live : Publish ulang (update)

Versi teks (jika diagram di atas tidak muncul)

Siklus status LP:

Draft → mulai saat kamu buat atau edit LP. Bisa Ctrl+Z untuk undo.
Draft → Saved — klik tombol Save.
Saved → Preview — klik tombol Preview (bisa tutup kembali ke Saved).
Saved → Live — klik tombol Publish. LP sekarang bisa diakses publik.
Live → Draft — edit lagi lalu Save (LP masih live, tapi ada perubahan baru yang belum dipublish).
Live → Live — Publish ulang untuk update LP yang sudah live.

Status	Siapa bisa akses	URL
Draft (belum save)	Hanya kamu di builder	—
Saved	Siapapun dengan link Preview	Link preview
Live (Published)	Publik	URL final LP

10. Preview

Klik Preview di toolbar. LP terbuka di tab baru.

tab browser baru dengan LP versi preview — terlihat watermark atau banner "Preview Mode" di atas halaman

Cek di preview:

Semua teks terbaca dengan baik
Gambar loading
Tombol link ke tujuan yang benar
Tampilan mobile (gunakan DevTools browser)
Tidak ada typo

Preview tidak mengubah LP yang live.

11. Publish

Setelah puas dengan preview, klik Publish di toolbar.

Konvert langsung menyimpan dan mempublikasikan LP. Sebuah toast notifikasi sukses muncul di pojok kanan atas beserta link ke halaman live-mu, dan halaman tersebut otomatis terbuka di tab baru.

toast notifikasi sukses "Landing page berhasil dipublish" di pojok kanan atas, ada link "Lihat Halaman Live"

LP-mu sekarang live dan bisa diakses siapapun.

Catatan: Jika LP-mu mengandung Order Form dan akunmu belum terverifikasi, Konvert akan menampilkan dialog verifikasi terlebih dahulu sebelum publish. Selesaikan verifikasi untuk melanjutkan.

12. Edit Setelah Publish

LP yang sudah live bisa diedit kapanpun:

Buka daftar Landing Pages di dashboard
Klik LP yang mau diedit → klik Edit
Builder terbuka dengan konten terakhir
Lakukan perubahan → Save → Publish lagi

daftar landing pages dengan satu LP "live" — tombol Edit di kanan

Ingat: Edit + Save saja tidak mengubah halaman live. Kamu harus Publish lagi untuk update versi live.

Siap buat landing page pertamamu?