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, tracking, dan publish → lihat Tutorial 15 — Tracking, SEO, Publish.

Bagian 1 — Buka Builder

Langkah 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".

Langkah 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.

Langkah 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.

Bagian 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

Bagian 3 — Panel Kiri (Detail)

Panel kiri adalah navigasi dan manajemen struktur LP. Ada 4 tab:

Tab Components

Menampilkan semua komponen yang bisa ditambahkan ke kanvas, 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 terbuka — 4 kategori, kartu komponen, kursor hover

Cara menambah komponen:

Klik kartu komponen — langsung ditambahkan di bawah komponen terakhir
Drag kartu ke kanvas — taruh di posisi yang persis kamu mau

Tab Layers (Structure)

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

Panel kiri tab Components 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, warna, font, lebar kontainer. Perubahan di sini berlaku ke seluruh halaman.

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

Tab Settings (Pages)

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

Panel kiri tab Layers di builder

Detail lengkap Settings tab dibahas di Tutorial 15 — Tracking, SEO, Publish.

Bagian 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)

Bagian 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 atau 3 sub-tab:

Sub-tab	Isi
Properties	Konten komponen (text, gambar, items, dll.)
Style	Margin, padding, background, border, shadow, animasi, custom CSS
Action (kalau ada)	Event pixel yang difire saat interaksi komponen

Panel kiri tab Design di builder

Properties → ubah konten komponen. Style → ubah tampilan visual komponen (dibahas di Tutorial 14). Action → pixel event per interaksi (dibahas di Tutorial 15).

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.

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).

Bagian 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 Layers, drag nama komponen ke urutan yang kamu mau.

Mode preview di builder Konvert

Duplicate

Klik komponen → klik menu ⋮ (tiga titik) di pojok kanan atas selection box → pilih Duplicate.

Shortcut: pilih komponen → Ctrl + D

selection box komponen Testimonial dengan menu ⋮ terbuka — opsi Duplicate terlihat

Hapus

Pilih komponen → tekan Delete atau Backspace.

Atau: menu ⋮ → Delete.

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

Bagian 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

Bagian 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.

Bagian 11 — Publish

Setelah puas dengan preview, klik Publish di toolbar.

dialog konfirmasi Publish — menampilkan URL live LP dan tombol "Publish Sekarang" oranye

Sistem akan menampilkan URL live LP-mu. Klik "Publish Sekarang".

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

LP-mu sekarang live dan bisa diakses siapapun.

Bagian 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.

Selanjutnya

Sekarang kamu sudah kenal interface builder. Lanjut ke:

Tutorial 14 — Styling & Responsive — style tiap komponen, global design, dan responsivitas multi-device
Tutorial 15 — Tracking, SEO, Publish — pasang pixel, atur SEO, dan publish ke custom domain

Referensi lain:

Bangun LP dengan AI — cara tercepat buat LP dalam 10 menit
Upload Produk dengan AI — dari brosur ke LP otomatis