Komponen Spacer — Jarak Vertikal Eksplisit

Apa itu: Blok kosong vertikal yang memberi jarak eksplisit antara dua komponen. Kapan pakai: Saat margin/padding bawaan komponen lain tidak cukup, atau kamu butuh kontrol presisi atas jarak antar section — terutama untuk fine-tuning tampilan di mobile vs desktop.

Apa Itu Spacer?

Spacer adalah komponen paling sederhana di builder: hanya sebuah kotak kosong dengan tinggi yang bisa kamu atur. Tidak ada teks, tidak ada gambar, tidak ada border. Tugasnya satu: memberi napas di antara komponen lain.

Berbeda dari margin/padding yang melekat pada komponen tertentu, Spacer adalah entitas mandiri — kamu bisa hapus, pindah, atau duplikat secara independen.

Properties

Property	Tipe	Default	Keterangan
Height	Angka + unit (px / rem / vh)	40px	Tinggi ruang kosong

ℹ️Hanya 1 property

Spacer memang hanya punya satu property: Height. Panel Style dan panel Spacing dinonaktifkan untuk komponen ini karena tidak relevan — Spacer sendiri sudah adalah spacing.

Unit Height

Unit	Contoh	Kapan Pakai
`px`	`40px`	Jarak fixed, konsisten di semua layar
`rem`	`2rem`	Proporsional terhadap font-size root (1rem = 16px)
`vh`	`5vh`	Proporsional terhadap tinggi viewport — berguna untuk full-page layout

Untuk kebanyakan kasus, px sudah cukup dan paling mudah diprediksi.

Contoh Penggunaan

1. Breathing Room Setelah Hero

Tambahkan Spacer 48px di antara section hero (Heading + Button) dan section fitur produk. Ini memberi pembaca jeda visual sebelum membaca konten berikutnya.

2. Spacing Presisi di Mobile

Kamu bisa menambahkan dua Spacer berukuran berbeda, lalu sembunyikan salah satunya di perangkat tertentu via Style > Hide on Mobile atau Hide on Desktop. Contoh: Spacer 80px untuk desktop, Spacer 32px untuk mobile — keduanya ditempatkan di posisi yang sama, tapi salah satu disembunyikan sesuai breakpoint.

Section CTA paling bawah (tombol beli / WhatsApp) sering butuh jarak ekstra dari konten di atasnya agar tidak terasa sesak. Spacer 60px sebelum CTA memberi emphasis visual yang lebih kuat.

Gotchas

Jangan tumpuk banyak Spacer. Kalau kamu menemukan diri menambahkan 3–4 Spacer berturut-turut, pertimbangkan untuk menaikkan margin bawah komponen di atasnya atau padding atas komponen di bawahnya.
Spacer tidak collapse di mobile secara otomatis. Kalau kamu set 80px dan terasa terlalu besar di HP, gunakan fitur Hide on Mobile + Spacer terpisah yang lebih kecil.
Spacer tidak bisa diklik atau diinteraksikan oleh pengunjung — aman dipakai di mana saja.