Menggunakan Editor

Editor Wahanaweb adalah tempat kamu mendesain dan mengedit website-mu. Tidak perlu coding — cukup klik, seret, dan edit langsung. Panduan ini akan membantumu menguasai editor dengan cepat.

Mengakses Editor

Ada beberapa cara masuk ke editor:

Dari Dashboard

  1. Login ke dash.wahanaweb.com.
  2. Klik pada website yang ingin kamu edit.
  3. Klik tombol "Edit" atau "Buka Editor".

Dari Daftar Website

  1. Di menu Website, cari website-mu.
  2. Hover di atas kartu website.
  3. Klik ikon pensil ✏️ atau tombol "Edit".

Tata Letak Editor

Editor terbagi menjadi beberapa area utama:

1. Toolbar (Bar Atas)

Toolbar ada di bagian atas layar dan berisi:

| Ikon | Fungsi | |------|--------| | Undo (↩️) | Batalkan perubahan terakhir | | Redo (↪️) | Ulangi perubahan yang dibatalkan | | Preview (👁️) | Lihat website seperti pengunjung | | Mode Desktop/Mobile (🖥️/📱) | Ganti tampilan preview | | Save (💾) | Simpan perubahan | | Publish (🚀) | Publikasikan perubahan ke website live |

2. Sidebar Kiri (Panel Komponen)

Sidebar di sebelah kiri berisi:

  • Section/Blok — bagian-bagian yang bisa kamu tambahkan ke halaman
  • Halaman — daftar halaman website-mu
  • Desain — pengaturan warna, font, dan style global
  • Pengaturan — konfigurasi website

3. Canvas (Area Tengah)

Ini adalah area utama tempat kamu melihat dan mengedit website-mu secara visual. Apa yang kamu lihat di sini adalah apa yang dilihat pengunjung.

4. Panel Kanan (Properti)

Saat kamu memilih sebuah elemen (teks, gambar, tombol), panel di sebelah kanan akan menampilkan properti elemen tersebut:

  • Teks — font, ukuran, warna, alignment
  • Gambar — ukuran, alt text, link
  • Tombol — warna, teks, link tujuan
  • Section — background, padding, layout

Drag-and-Drop: Dasar Pengeditan

Wahanaweb menggunakan sistem drag-and-drop untuk memindahkan dan menambah elemen.

Menambah Section Baru

  1. Klik tombol "+" (tambah) di sidebar kiri atau di antara section.
  2. Kamu akan melihat galeri section yang tersedia:

- Hero — banner besar dengan headline - Tentang — profil atau deskripsi - Layanan — daftar layanan atau fitur - Testimoni — review pelanggan - Galeri — kumpulan foto - Kontak — formulir dan info kontak - FAQ — pertanyaan umum - CTA — call-to-action - Pricing — tabel harga - Tim — profil tim

  1. Klik pada section yang diinginkan.
  2. Section akan ditambahkan ke halaman.
  3. Drag section ke posisi yang diinginkan.

Memindahkan Section

  1. Hover di atas section yang ingin dipindahkan.
  2. Kamu akan melihat handle drag (biasanya ikon 6 titik ⠿ atau panah).
  3. Klik dan tahan handle tersebut.
  4. Seret ke posisi baru.
  5. Lepaskan untuk menempatkan.

Menghapus Section

  1. Klik pada section yang ingin dihapus.
  2. Klik ikon hapus (🗑️) atau tombol "Delete".
  3. Konfirmasi penghapusan.
Yang Perlu Diperhatikan: Penghapusan section tidak bisa di-undo setelah kamu menyimpan. Pastikan kamu benar-benar ingin menghapus sebelum konfirmasi.

Mengedit Teks

Mengubah Teks Langsung

  1. Klik dua kali (double-click) pada teks yang ingin diubah.
  2. Teks akan menjadi editable — kamu bisa langsung mengetik.
  3. Setelah selesai, klik di luar teks untuk menyimpan.

Mengubah Style Teks

Saat teks dipilih, panel properti di kanan akan menampilkan opsi:

| Opsi | Fungsi | |------|--------| | Font | Ganti jenis huruf | | Ukuran | Besar kecil huruf | | Warna | Warna teks | | Bold | Tebalkan teks | | Italic | Miringkan teks | | Underline | Garis bawah | | Alignment | Rata kiri, tengah, kanan | | Line Height | Jarak antar baris | | Letter Spacing | Jarak antar huruf |

  1. Pilih teks yang ingin diberi link.
  2. Klik ikon link (🔗) di toolbar atau panel properti.
  3. Masukkan URL tujuan.
  4. Pilih apakah link dibuka di tab baru atau tab yang sama.
  5. Klik "Terapkan".

Mengedit Gambar

Mengganti Gambar

  1. Klik pada gambar yang ingin diganti.
  2. Klik tombol "Ganti Gambar" atau ikon kamera.
  3. Kamu memiliki beberapa opsi:

- Upload — unggah foto dari komputer/HP - Galeri — pilih dari gambar yang sudah di-upload sebelumnya - Stock Photo — pilih dari koleksi gambar gratis

  1. Pilih gambar baru.
  2. Crop/resize jika diperlukan.

Tips Gambar yang Baik

  • Resolusi: Minimal 1200px lebar untuk gambar hero.
  • Format: JPG untuk foto, PNG untuk logo/grafik dengan transparansi.
  • Ukuran file: Kompres gambar sebelum upload agar website cepat. Idealnya di bawah 500KB per gambar.
  • Aspect ratio: Perhatikan rasio aspek — gambar yang terlalu panjang atau lebar bisa terpotong.

Mengatur Alt Text

Alt text penting untuk SEO dan aksesbilitas:

  1. Klik gambar.
  2. Di panel properti, cari kolom "Alt Text".
  3. Tulis deskripsi singkat tentang gambar.
  4. Contoh: "Nasi goreng spesial Warung Mak Sari dengan telur mata sapi"

Mengubah Warna dan Background

Mengubah Warna Section

  1. Klik pada section yang ingin diubah.
  2. Di panel properti, cari "Background".
  3. Pilih:

- Warna solid — satu warna polos - Gradient — transisi antara dua warna - Gambar — gunakan gambar sebagai background

  1. Atur opacity (transparansi) jika diperlukan.

Mengubah Warna Global

Untuk mengubah warna di seluruh website:

  1. Buka panel "Desain" di sidebar kiri.
  2. Klik "Warna" atau "Theme Colors".
  3. Ubah:

- Primary Color — warna utama (heading, tombol) - Secondary Color — warna pendukung - Accent Color — warna aksen (highlight, link) - Background Color — warna latar

  1. Perubahan akan otomatis diterapkan ke seluruh website.

Mobile Preview

Lebih dari 60% pengunjung website biasanya datang dari HP. Jadi sangat penting memastikan website-mu terlihat bagus di mobile.

Cara Preview Mobile

  1. Klik ikon mobile (📱) di toolbar.
  2. Canvas akan berubah menunjukkan tampilan di layar HP.
  3. Scroll untuk melihat seluruh halaman.
  4. Periksa:

- Apakah teks terbaca dengan jelas? - Apakah gambar tidak terpotong? - Apakah tombol cukup besar untuk ditekan jari? - Apakah navigasi mudah digunakan?

Menyesuaikan Tampilan Mobile

Beberapa elemen mungkin perlu disesuaikan khusus untuk mobile:

  1. Saat dalam mode mobile, klik elemen.
  2. Kamu mungkin melihat opsi "Sembunyikan di mobile" atau "Hanya tampil di mobile".
  3. Kamu bisa mengatur ukuran teks, padding, dan layout khusus mobile.
Tips: Jangan hanya preview di desktop! Selalu cek tampilan mobile karena mayoritas pengunjungmu datang dari HP.

Menyimpan & Undo

Menyimpan Perubahan

Wahanaweb otomatis menyimpan perubahan secara berkala. Tapi kamu juga bisa menyimpan manual:

  1. Klik tombol Save (💾) di toolbar.
  2. Atau tekan Ctrl+S (Windows) / Cmd+S (Mac).
  3. Kamu akan melihat konfirmasi "Tersimpan".

Undo dan Redo

Salah edit? Tenang:

  • Undo — klik tombol ↩️ atau tekan Ctrl+Z / Cmd+Z
  • Redo — klik tombol ↪️ atau tekan Ctrl+Shift+Z / Cmd+Shift+Z

Kamu bisa undo beberapa langkah ke belakang.

Yang Perlu Diperhatikan: Undo hanya berlaku untuk sesi editing saat ini. Kalau kamu sudah menutup editor dan membukanya lagi, kamu tidak bisa undo perubahan dari sesi sebelumnya.

Keyboard Shortcuts

Untuk produktivitas lebih:

| Shortcut | Fungsi | |----------|--------| | Ctrl+S / Cmd+S | Simpan | | Ctrl+Z / Cmd+Z | Undo | | Ctrl+Shift+Z / Cmd+Shift+Z | Redo | | Delete / Backspace | Hapus elemen terpilih | | Ctrl+C / Cmd+C | Copy elemen | | Ctrl+V / Cmd+V | Paste elemen | | Esc | Batal pilih / keluar edit |

Tips Produktif Menggunakan Editor

1. Siapkan Konten Sebelum Edit

Siapkan teks dan gambar yang ingin kamu pakai sebelum membuka editor. Ini akan mempercepat proses editing.

2. Gunakan Copy-Paste Section

Kalau kamu perlu section yang mirip, duplikat section yang sudah ada lalu edit — lebih cepat daripada membuat dari awal.

3. Simpan Berkala

Meskipun auto-save aktif, sesekali klik Save manual untuk berjaga-jaga.

4. Preview Sering

Jangan tunggu sampai selesai untuk preview. Preview setiap beberapa perubahan untuk memastikan hasilnya sesuai keinginan.

5. Edit Satu Halaman Selesai Dulu

Fokus menyelesaikan satu halaman sebelum pindah ke halaman berikutnya. Ini lebih efisien daripada bolak-balik.

Troubleshooting

Editor Tidak Muncul

  • Pastikan browser kamu versi terbaru.
  • Coba clear cache browser.
  • Nonaktifkan ad blocker yang mungkin mengganggu.
  • Coba browser lain (Chrome direkomendasikan).

Perubahan Tidak Tersimpan

  • Cek koneksi internet.
  • Klik Save manual.
  • Coba refresh halaman dan edit ulang.

Drag-and-Drop Tidak Berfungsi

  • Pastikan kamu mengklik handle yang benar (biasanya 6 titik ⠿).
  • Coba zoom out browser (Ctrl+-) untuk melihat layout dengan lebih baik.
  • Beberapa elemen mungkin tidak bisa dipindahkan (seperti header/footer).

Gambar Gagal Upload

  • Cek ukuran file — maksimal biasanya 5-10MB.
  • Cek format file — JPG, PNG, WebP, GIF.
  • Cek koneksi internet.
  • Coba kompres gambar sebelum upload.