DocsPengenalan Properties
Panduan interaktif memahami properties pada Landingin Editor.
Apa itu Properties?
Setiap elemen (teks, button, paragraf, image, container) memiliki properties.
Properties digunakan untuk mengubah tampilan, posisi, ukuran, dan style elemen agar sesuai desain.
Akses panel properties: Klik elemen → buka tab Style di panel kanan.
Properti yang muncul menyesuaikan jenis elemen.
🔹 Segmen Properti (Ringkas & Interaktif)
| Segmen | Fungsi | Contoh |
|---|---|---|
| Display | Atur tata letak & posisi elemen | Block, Inline, Inline-Block, Position, Float, Opacity |
| Typography | Atur teks: ukuran, ketebalan, font | Font Size, Font Weight, Font Family |
| Size | Atur lebar & tinggi elemen | Min/Max Width, Min/Max Height |
| Margin | Jarak di luar elemen |  |
| Padding | Jarak di dalam elemen |  |
| Border | Garis tepi elemen |  |
| Border Radius | Sudut melengkung elemen |  |
| Background Image | Tambah gambar latar belakang |  |
| Colors | Background & Text Color |  |
🔹 Tips Interaktif
- Hover pada properti untuk melihat tooltip penjelasan
- Klik & ubah nilai → hasil langsung terlihat di canvas
- Reset untuk kembali ke nilai default
- Preview Mobile/Desktop untuk responsive check
🔹 Contoh Interaktif
- Pilih elemen Hero Title
- Ubah Font Size → 48px, hasil langsung terlihat
- Ubah Background Color → #FF5733, hasil langsung update di preview
- Sesuaikan Margin & Padding untuk spacing antar elemen
- Klik Preview Mobile untuk cek tampilan di perangkat lain
🔹 Manfaat
- 🚀 Membuat landing page lebih cepat tanpa coding
- 🎨 Kustomisasi setiap elemen secara real-time
- 📱 Hasil langsung terlihat di semua device
- 🔄 Reusable & konsisten: gunakan block dan style global