Mode Kompleks

Mode Kompleks memberikan kebebasan penuh untuk mengedit setiap aspek websitemu, termasuk mengubah komponen hingga level pixel.

Cara Mengaktifkan#

Untuk beralih ke Mode Kompleks, klik ikon gembok di pojok kanan atas editor, lalu geser untuk membukanya. Kamu bisa kembali ke Mode Simple kapan saja dengan mengunci kembali.

6 Tab Editor#

Mode Kompleks memiliki 6 tab yang masing-masing punya fungsi berbeda:

1. Layer#

Menampilkan struktur layer semua komponen di halaman, mirip seperti panel layer di Figma. Kamu bisa melihat hierarki komponen dan memilih elemen yang ingin diedit langsung dari sini.

2. Komponen Library#

Berisi kumpulan komponen yang bisa kamu tambahkan ke halaman. Terbagi menjadi tiga kelompok:

• Dasar — Komponen fundamental seperti container/div, teks, gambar, ikon, tautan, tombol, input, textarea, daftar, item daftar, embed, dan judul (H1)
• Tema — Section-section bawaan dari tema yang kamu pilih saat pendaftaran, misalnya header, hero, CTA, footer, dan lainnya
• Apps — Section dari aplikasi yang sudah diinstall (muncul setelah kamu menginstall apps), misalnya form order, tracking order, testimoni, atau daftar portofolio GitHub

3. AI#

Tab AI menyediakan dua fungsi:

• Default — Membuat komponen baru secara otomatis dengan bantuan AI
• Edit — Mengedit komponen yang sedang dipilih menggunakan AI

4. Lanjutan#

Tab untuk mengatur properti detail komponen, termasuk:

• Lebar dan tinggi
• Margin dan padding
• Tata letak (flexbox, grid)
• Border dan border radius
• Shadow
• Dan properti lainnya

5. Animasi#

Tambahkan animasi pada komponen untuk membuat website lebih hidup. Pilihan animasi yang tersedia antara lain:

• Fade in
• Spin
• Wiggle
• Scale
• Dan berbagai animasi lainnya

6. Pengaturan#

Tab terakhir untuk mengatur hal-hal teknis:

• Nama komponen — Ubah nama untuk memudahkan identifikasi di panel Layer
• CSS langsung — Edit CSS custom secara langsung
• Tailwind — Edit class Tailwind secara langsung untuk kontrol pixel-perfect