Builder — Styling Komponen & Responsive Design

Hasil akhir: Kamu bisa styling setiap komponen secara mandiri (margin, padding, background, border, shadow, animasi, custom CSS), mengatur desain global (theme, warna, font), dan memastikan LP tampil baik di desktop maupun mobile. Butuh: LP yang sudah punya beberapa komponen (ikuti dulu Tutorial 13).

---

Ringkasan

Setiap komponen di builder punya dua lapisan pengaturan:

1. Properties — konten spesifik komponen (text, gambar, items, dll.)
2. Style — tampilan visual yang universal untuk semua komponen

Tutorial ini fokus pada lapisan Style plus pengaturan Design level halaman. Semua perubahan style bersifat non-destruktif — kamu bisa ubah dan undo kapanpun.

---

Bagian 1 — Universal Style Object

Setiap komponen — dari Heading sampai Order Form — punya Style tab yang isinya sama. Ini yang dimaksud "universal style object".

Klik komponen apapun di kanvas → panel kanan → tab Style.

Kenapa penting?

Ini yang membedakan tampilan LP yang biasa vs yang terlihat profesional. Spacing yang tepat, border yang halus, animasi yang subtle — semuanya diatur dari sini.

---

Bagian 2 — Margin & Padding

Margin dan padding adalah dua pengaturan spacing paling sering dipakai.

Konsep	Fungsi	Contoh
Margin	Jarak komponen dari komponen lain (luar)	Beri jarak antara Heading dan Button
Padding	Jarak konten dari tepi komponen (dalam)	Tambah ruang dalam card

Unit yang tersedia

Kamu bisa ketik langsung nilai dengan unit:

Unit	Kapan dipakai
px	Ukuran tetap, paling umum
%	Relatif terhadap parent — berguna untuk spacing fleksibel
rem	Relatif terhadap font size root, bagus untuk konsistensi
em	Relatif terhadap font size elemen itu sendiri
vh	Relatif tinggi viewport — cocok untuk section full-height
vw	Relatif lebar viewport

Rekomendasi praktis: Untuk majority kasus, cukup pakai px. Pakai % atau vh kalau kamu butuh layout yang proportional terhadap layar.

4 sisi independen

Klik ikon link di tengah padding/margin controls untuk unlock 4 sisi secara independen (top, right, bottom, left). Berguna untuk, misalnya, padding bawah yang lebih besar dari atas.

---

Bagian 3 — Background

Setiap komponen bisa punya background sendiri.

Background Color

Klik tab Color → klik color picker → pilih warna atau ketik hex code.

Untuk warna transparan, set opacity ke 0%. Untuk semi-transparan, set opacity antara 10-90%.

Background Gradient

Klik tab Gradient → pilih arah (linear 0°-360°, radial) → set warna start dan end.

Tip: gradient halus (perbedaan warna tidak terlalu jauh) terlihat lebih elegan dibanding gradient kontras.

Background Image

Klik tab Image → upload gambar atau paste URL.

Pengaturan tambahan setelah pilih gambar:

Setting	Opsi
Size	Cover (penuh), Contain (muat semua), Custom
Position	Center, Top, Bottom, Left, Right, Custom
Repeat	No repeat, Repeat, Repeat X, Repeat Y
Overlay	Warna di atas gambar (biasanya gelap semi-transparan agar teks terbaca)

---

Bagian 4 — Border

Border memberikan batas visual yang tegas atau halus pada komponen.

Property	Pilihan
Width	0-10px (tiap sisi bisa beda)
Style	Solid, Dashed, Dotted, None
Color	Color picker + opacity
Radius	0-999px untuk rounded corners (tiap sudut bisa beda)

Tips penggunaan border

• Card product: border: 1px solid, warna abu-abu muda, radius 12px → tampak bersih
• Highlight section: border kiri tebal (border-left: 4px solid) warna primary → efek aksen
• Rounded button-style: radius tinggi (misal 999px) untuk bentuk pil

---

Bagian 5 — Shadow

Shadow menambah kesan depth dan membuat komponen "terangkat" dari background.

Pilih preset atau set manual:

Preset	Kapan pakai
None	Flat design, no depth
sm	Sentuhan ringan untuk cards
md	Card yang lebih prominent
lg	Modal, popup, hero cards
xl	Efek dramatis, gunakan sparingly

Prinsip: Kurang lebih lebih baik. Shadow yang terlalu berat membuat LP terasa "berat" dan tidak modern. Gunakan sm atau md untuk mayoritas kasus.

---

Bagian 6 — Hide on Mobile / Hide on Desktop

Setiap komponen bisa di-hide per device tanpa menghapus.

Toggle	Kegunaan
Sembunyikan di Mobile	Komponen tidak muncul di layar < 768px
Sembunyikan di Desktop	Komponen tidak muncul di layar ≥ 768px

Kapan berguna

• Hero image: Tampilkan di desktop, hide di mobile (ganti dengan image kompak atau tidak perlu image)
• Komponen mobile-only: Buat versi heading lebih kecil khusus mobile, hide versi desktop
• CTA sticky bottom: Tampilkan hanya di mobile sebagai sticky button

---

Bagian 7 — Animation

Animasi membuat LP terasa hidup dan membantu arahkan perhatian pengunjung.

Jenis animasi yang tersedia

Animasi	Efek
Fade In	Muncul perlahan dari transparan
Slide Up	Naik dari bawah sambil muncul
Slide Left	Datang dari kanan
Slide Right	Datang dari kiri
Zoom In	Membesar dari kecil sambil muncul

Pengaturan timing

Setting	Nilai rekomendasi
Duration	400ms–800ms (terlalu lama terasa lambat)
Delay	0ms–300ms per elemen untuk staggered effect

Tips penggunaan animasi

• Jangan animasikan semua komponen — pilih yang perlu menarik perhatian (headline, CTA, testimonial)
• Staggered effect: beri delay berbeda per elemen dalam satu section untuk efek "berurutan masuk"
• Hindari animasi pada komponen di "above the fold" (bagian yang langsung terlihat saat halaman load) — pengunjung sudah lihat sebelum animasi selesai

---

Bagian 8 — Custom CSS (Escape Hatch)

Kalau tidak ada pengaturan native yang kamu butuhkan, gunakan Custom CSS.

Kapan pakai Custom CSS

• Effect yang tidak ada di preset (misalnya gradient text, clip-path)
• Animasi CSS yang tidak tersedia di animation builder
• Override style yang tidak bisa diganti dari panel

Kapan jangan pakai

• Kalau ada pengaturan native yang sudah handle — selalu coba panel dulu
• Kalau kamu tidak familiar dengan CSS — hasilnya bisa unpredictable di mobile

Contoh yang valid

/* Gradient text */
background: linear-gradient(90deg, #f57c00, #e91e63);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

/* Hover scale subtle */
transition: transform 0.2s ease;

/* Kalau perlu set di atas container */
&:hover {
  transform: scale(1.02);
}

Catatan: CSS di sini scoped ke komponen itu saja — tidak bocor ke komponen lain.

---

Bagian 9 — Page-Level Design Tab

Setelah styling per-komponen, ada pengaturan global di level halaman. Klik tab Design di panel kiri.

Perubahan di Design tab berlaku ke seluruh halaman dan menjadi nilai default untuk semua komponen baru yang ditambahkan.

---

Bagian 10 — Theme Mode

Mode	Tampilan
Light	Background putih/terang, teks gelap
Dark	Background gelap/hitam, teks terang
Custom	Kamu set sendiri setiap token warna

Tips: Dark mode bagus untuk produk tech, game, atau brand premium. Light mode lebih aman untuk mayoritas produk.

---

Bagian 11 — Color Tokens

Setiap theme punya 5 color token yang berlaku global:

Token	Fungsi
Background	Warna dasar halaman
Foreground	Warna teks utama
Primary	Warna aksen utama (tombol CTA, link, highlight)
Secondary	Warna pendukung
Accent	Warna highlight tambahan

Mengubah primary color

Klik swatch Primary → color picker → ubah ke warna brand-mu. Semua tombol CTA, highlight, dan elemen primary di LP langsung update.

Prinsip: Gunakan maksimal 2-3 warna utama. Terlalu banyak warna = chaos visual.

---

Bagian 12 — Font Pair

Field	Fungsi
Heading Font	Font untuk H1-H6
Body Font	Font untuk paragraf, label, button
Mono Font (opsional)	Font untuk kode, harga, angka

Klik dropdown → cari nama Google Font → pilih → preview langsung berubah di kanvas.

Rekomendasi pasangan: Heading Bold + Body Regular dari keluarga yang sama (Inter/Inter, Poppins/Poppins) selalu aman. Kalau mau kontras, Bold serif heading + clean sans-serif body.

---

Bagian 13 — Container Width

Lebar maksimal konten LP di desktop.

Pilihan	Lebar	Kapan dipakai
sm	640px	Blog, artikel panjang — fokus bacaan
md	768px	Landing page dengan konten medium
lg	1024px	LP standard, paling umum
xl	1280px	LP wide dengan banyak kolom
full	100%	Konten edge-to-edge (hati-hati di layar besar)

Di mobile, container otomatis full width.

---

Bagian 14 — Responsive: Device Toggle

Inilah tempat kamu memastikan LP-mu terlihat baik di semua ukuran layar.

Cara kerja nilai per-device

stateDiagram-v2
    direction LR
    Default : Nilai Default\n(berlaku semua device)
    Desktop : Override Desktop\n(1280px+)
    Mobile : Override Mobile\n(< 768px)
    
    Default --> Desktop : Kalau ada override desktop
    Default --> Mobile : Kalau ada override mobile
    Default --> Default : Tidak ada override = pakai nilai default

Versi teks (jika diagram di atas tidak muncul)

Cara kerja nilai per-device:

• Nilai Default — berlaku di semua device kecuali ada override.
• Override Desktop (1280px+) — hanya aktif saat kamu set nilai di mode Desktop. Menggantikan nilai default untuk layar besar.
• Override Mobile (< 768px) — hanya aktif saat kamu set nilai di mode Mobile. Menggantikan nilai default untuk layar kecil.
• Jika tidak ada override untuk suatu device, device tersebut otomatis pakai nilai default.

• Nilai default berlaku di semua device kecuali ada override
• Override desktop — set saat device toggle di Desktop
• Override mobile — set saat device toggle di Mobile
• Kalau tidak ada override, device itu pakai nilai default

---

Bagian 15 — Per-Device Value Editing

Langkah praktik

1. Pilih komponen Heading di kanvas
2. Device toggle: Desktop
3. Tab Style → Margin top: 64px
4. Sekarang switch ke Mobile
5. Tab Style → Margin top: 32px (lebih kecil karena layar sempit)

Perubahan di Mobile view tidak mempengaruhi Desktop view.

Hal yang sering perlu disesuaikan per-device

Property	Desktop	Mobile
Font size heading	48-64px	28-36px
Padding section	80px atas/bawah	40px atas/bawah
Padding container	0px	16-24px kiri/kanan
Gap antar komponen	48px	24px

---

Bagian 16 — Resep Responsive: Hero Mobile vs Desktop

Ini contoh konkret paling umum: hero yang tampil beda di mobile dan desktop.

Desktop: Side by side

[ Text & CTA ]  |  [ Gambar produk ]

Mobile: Stack vertikal

[ Gambar produk ]
[ Text & CTA    ]

Cara implementasi di builder

1. Buat section hero dengan 2 kolom (kiri: text, kanan: gambar)
2. Di Desktop view: layout 2 kolom normal
3. Switch ke Mobile view: ubah layout kolom jadi stack (1 kolom), reorder gambar ke atas
4. Atau: buat 2 versi komponen (satu for desktop, satu for mobile) → toggle Hide on Mobile / Hide on Desktop

---

Bagian 17 — Test Responsive

Setelah styling dan responsive selesai, selalu test:

Test di builder

1. Switch device toggle ke Mobile → cek semua section satu per satu
2. Switch ke Tablet → spot-check layout medium
3. Switch balik ke Desktop → pastikan tidak ada yang berubah

Test di browser

1. Klik Preview di toolbar
2. Di tab preview, buka DevTools browser (F12)
3. Klik ikon device/responsive di DevTools
4. Test beberapa ukuran: iPhone SE (375px), iPhone 14 (390px), iPad (768px)

Checklist responsive

Sebelum publish, pastikan:

• Heading terbaca (tidak terpotong atau terlalu kecil)
• Tombol CTA mudah di-tap (minimal 44px height)
• Gambar tidak memotong bagian penting
• Form fields tidak terlalu sempit untuk diketik
• Tidak ada horizontal scroll
• Jarak antar elemen cukup (tidak terlalu rapat)

---

Selanjutnya

Styling sudah — saatnya atur SEO dan tracking sebelum publish:

• Tutorial 15 — Tracking, SEO, Publish — Meta Pixel, TikTok Pixel, GTM, SEO meta, dan proses publish

Referensi lain:

• Tutorial 13 — Builder Overview — kembali ke dasar interface kalau perlu
• Connect Meta Ads — setup pixel sebelum pasang di LP
• GTM dan TikTok Pixel — konfigurasi detail GTM