Modular Web Builder
Panduan mendalam menggunakan ruang kerja utama Webnity untuk menyusun desain website.
Modular Web Builder adalah inti dari Webnity. Ini bukan editor halaman biasa; ini adalah sistem block-based (berbasis blok/modul) yang memastikan desain Anda selalu responsif (tampil sempurna di HP maupun Desktop) dan pixel-perfect.
Antarmuka Builder dibagi menjadi tiga area utama:
1. Panel Kiri (Library & Pengaturan)
Panel ini adalah kotak peralatan Anda. Terdapat beberapa tab utama:
Tab Blocks (Blok / Komponen)
Di sinilah Anda menemukan ratusan komponen UI siap pakai yang dikategorikan secara logis:
- Navbar/Header: Navigasi atas.
- Hero: Bagian utama yang pertama kali dilihat pengunjung.
- Features/Services: Untuk menjelaskan produk Anda.
- Pricing: Tabel harga.
- Testimonials: Ulasan pelanggan.
- Footer: Bagian bawah website.
Cara pakai: Cukup klik tombol
+pada blok yang Anda inginkan, atau drag-and-drop ke area kanvas tengah.
Tab AI Magic (Co-pilot Desain)
Tidak tahu harus menulis apa? Buka tab ini, pilih blok yang sedang aktif di kanvas, dan berikan instruksi ke AI. Misal: "Ubah teks di bagian Hero ini menjadi gaya bahasa yang persuasif untuk menjual sepatu olahraga." AI akan otomatis mengubah teks secara real-time.
Tab Layers (Struktur Halaman)
Menampilkan struktur hierarki halaman Anda seperti di aplikasi desain (Figma/Photoshop). Anda bisa melakukan drag-and-drop di panel ini untuk mengubah urutan blok (misal: memindahkan blok Testimoni agar berada di atas blok Pricing).
Tab Pengaturan Global (Styling & SEO)
- Mengubah kembali warna tema atau font jika Anda berubah pikiran setelah tahap Configurator.
- Mengatur meta title, deskripsi, dan gambar OpenGraph untuk kebutuhan SEO halaman tersebut.
2. Area Kanvas (Canvas / Workspace)
Berada di tengah layar, ini adalah representasi visual website Anda (What You See Is What You Get - WYSIWYG).
Interaksi di Kanvas:
- Klik Elemen: Jika Anda mengklik teks, Anda bisa langsung mengetik untuk mengubah isinya.
- Hover Elemen: Mengarahkan mouse ke sebuah gambar atau kotak akan memunculkan menu konteks kecil untuk mengganti gambar atau mengubah ukuran.
- Device Preview: Di bagian atas kanvas, terdapat icon Desktop, Tablet, dan Mobile. Klik icon tersebut untuk melihat bagaimana bentuk website Anda di berbagai ukuran layar secara langsung.
3. Panel Kanan (Inspector)
Panel kanan akan otomatis berubah menyesuaikan elemen apa yang sedang Anda klik di Kanvas.
- Jika mengklik Teks: Panel kanan akan menampilkan opsi ukuran font, ketebalan (bold), perataan teks (alignment), dan warna teks.
- Jika mengklik Tombol: Anda bisa mengatur Action (kemana tombol itu diarahkan saat diklik, misal ke URL lain atau ke bagian lain di halaman yang sama), gaya tombol (Solid, Outline, Ghost), dan warnanya.
- Jika mengklik Gambar: Tersedia opsi untuk mengunggah gambar baru dari komputer Anda, mengatur Alt text (untuk SEO), atau mengatur filter/radius sudut gambar.
Auto-Save: Webnity menyimpan setiap perubahan Anda secara real-time ke server. Anda tidak perlu khawatir kehilangan pekerjaan saat listrik mati atau tab browser tertutup.
Publikasi
Di pojok kanan atas layar Builder, terdapat tombol Publish. Klik tombol ini saat Anda sudah puas dengan desain Anda. Sistem Webnity akan mengkompilasi kode dan mendistribusikannya ke Edge Network global kami agar website Anda memuat dengan kecepatan kilat dari seluruh dunia.