Builder — Styling Komponen & Responsive Design

Hasil akhir: Kamu bisa styling setiap komponen secara mandiri (margin, padding, background, border, shadow, animasi, visibility), mengatur desain global (theme, warna, lebar kontainer), 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.

---

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.

---

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.

---

3. Background

Setiap komponen bisa punya background sendiri.

Background Color

Pilih mode Solid di toggle → 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

Pilih mode Gradient di toggle → 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 tombol 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

---

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

---

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.

---

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

Tip: Komponen yang di-hide tetap terlihat di kanvas builder agar kamu bisa memilih dan mengeditnya. Perubahan hanya berlaku di halaman yang dipublish.

---

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

---

8. Custom Code (Escape Hatch)

Untuk kebutuhan CSS atau script tambahan, gunakan fitur Custom Code di level halaman — bukan per komponen.

Buka tab Settings di panel kiri → bagian Custom Code. Di sini tersedia tiga area injeksi:

Area	Kegunaan
Head	CSS global, tag meta tambahan, font non-Google
Body Start	Script yang butuh diload sebelum konten
Body End	Script analytics, chat widget, atau deferred JS

Contoh CSS custom di Head

/* Gradient text untuk heading */
.my-heading {
  background: linear-gradient(90deg, #f57c00, #e91e63);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Hover scale subtle pada card */
.my-card:hover {
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

Catatan: Custom Code berlaku untuk seluruh halaman. Selalu coba pengaturan native di panel Style dulu sebelum tulis CSS manual.

---

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.

Design tab berisi: Theme Mode (Light/Dark), Container Width, Page Background color, dan Container color.

---

10. Theme Mode

Mode	Tampilan
Light	Background putih/terang, teks gelap
Dark	Background gelap/hitam, teks terang

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

---

11. Warna Halaman

Di Design tab, kamu bisa atur dua warna dasar halaman:

Pengaturan	Fungsi
Page Background	Warna latar belakang keseluruhan halaman
Container Color	Warna area konten di dalam lebar kontainer

Klik color picker di masing-masing field → pilih warna atau ketik hex code → perubahan langsung terlihat di kanvas.

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

---

12. Font

Font di Konvert builder dipilih per komponen teks, bukan di level halaman. Pilihan font tersedia langsung di panel Properties masing-masing komponen Heading atau Text.

Untuk mengganti font:

1. Pilih komponen Heading atau Text di kanvas
2. Di panel kanan → tab Properties → cari field Font Family
3. Pilih dari daftar Google Font yang tersedia
4. Preview langsung terlihat di kanvas

Rekomendasi: Font dari keluarga yang sama untuk semua komponen (misalnya Inter atau Poppins) selalu aman dan konsisten secara visual.

---

13. Container Width

Lebar maksimal konten LP di desktop.

Pilihan	Lebar	Kapan dipakai
Small	672px	Blog, artikel panjang — fokus bacaan
Medium	896px	Landing page dengan konten medium
Large	1024px	LP standard, paling umum
Extra Large	1152px	LP wide dengan banyak kolom
Full Width	100%	Konten edge-to-edge (hati-hati di layar besar)

Di mobile, container otomatis full width.

---

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

---

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

---

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

---

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)