Pusat Bantuan/Seller/Visual Edit

Visual Edit: Click & Edit

Visual Edit ialah cara cepat untuk edit page tanpa perlu chat AI. Toggle Visual Edit mode, klik element yang anda nak ubah, dan terus edit. Sesuai untuk text changes, image swap, AI image generation, dan polish detail.

Visual Edit vs AI Editor: Visual Edit untuk perkara yang anda boleh tunjuk dengan klik (text, image, lightbox toggle). Untuk perkara yang anda nak describe (tambah section baru, ubah animation, tukar layout) - guna AI Editor chat. Lihat Editor AI: Pro Tips untuk panduan chat-driven features.

1. Visual Edit Mode - Click & Edit

Toggle Visual Edit button di top bar. Selepas tu awak boleh click terus pada page untuk edit:

✓
Click any text (heading, paragraph, button label) untuk edit inline. Tekan Enter atau click luar untuk save.
✓
Click any image untuk buka popover dengan empat pilihan: Tukar gambar (upload), Pilih dari galeri, Generate dengan AI, atau Enhance dengan AI. Lihat Section 3 untuk detail.
✓
Click image placeholders(dashed border boxes dengan label macam “Click to upload - Hero photo”) untuk upload image yang AI tinggalkan kosong untuk awak isi.
✓
Click any link / button untuk edit text dan URL terus dalam popover - berguna untuk ubah CTA destination, WhatsApp number, atau social link.

Pro tip: Visual edit untuk text changes (typo, copy tweaks, button labels) TIDAK guna AI credits. Most edit di sini free - sistem update HTML attribute terus tanpa panggil AI.

2. Edit Text Inline + Format Toolbar

Klik mana-mana text dalam page anda untuk edit terus - heading, paragraph, list item, button label, footer link, semua boleh.

Keyboard shortcuts semasa edit:

Enter - save dan exit edit (single-line text)
Shift + Enter - new line (untuk paragraph multi-line)
Esc - cancel edit, revert ke text asal
Klik mana-mana tempat lain - save dan exit
Cmd/Ctrl + B - bold selection
Cmd/Ctrl + I - italic selection

Format toolbar

Bila anda mula edit text, toolbar floating akan muncul di atas element. Lima butang utama:

Alignment

Kiri, tengah, atau kanan

Bold

Tebalkan selection atau cursor

Italic

Italicize selection

Warna

Color picker (10+ warna brand)

Note:Color picker disabled bila text ada gradient styling (gradient text effect). Kalau anda nak ubah warna gradient text, minta AI dalam chat - cth: “Tukar warna headline gradient dari biru ke merah jambu”.

Bila guna Visual Edit vs AI Editor

Task	Best tool
Tukar typo, polish copy	✓ Visual Edit (free, terus)
Bold satu word, ubah alignment	✓ Visual Edit (free)
Tukar warna text	✓ Visual Edit (free)
Tulis semula seluruh paragraph	AI chat (lebih natural rewrite)
Tukar tone (urgent, friendly, etc.)	AI chat
Translate ke BM	AI chat

3. Edit Links & Buttons (URL + Text)

Klik mana-mana link atau button dalam page untuk edit text dan URL terus dari popover. Tiada perlu ke HTML editor atau chat AI.

Cara guna:

Klik link atau button - popover “Edit pautan” atau “Edit butang” akan muncul di bawah element
Edit field Teks - text yang appear pada page
Edit field URL - destination link (untuk button, field URL hilang sebab button tak ada URL)
Tekan Enter atau klik Simpan untuk apply
Tekan Esc atau Batal untuk cancel

URL formats yang disokong

→https://... - external link (akan buka di tab baru)
→tel:+60123456789 - tap untuk call dari mobile
→mailto:[email protected] - buka email composer
→https://wa.me/60123456789 - WhatsApp number
→#section-id - anchor scroll (ke section dalam page yang sama)

Templated URLs (locked): Sesetengah link guna placeholder macam {{checkout_url}} atau {{whatsapp}} - URL field akan locked sebab platform yang manage destination tu (checkout flow, WhatsApp config). Anda masih boleh edit text label, tapi URL kena ubah dari Settings yang berkaitan.

Common use cases

Update WhatsApp number bila anda tukar phone
Tukar destination CTA (cth: dari payment ke calendar booking)
Update social media link (Instagram, TikTok, FB) bila handle berubah
Add anchor scroll dalam navigation (cth: #pricing)
Tukar button label tanpa ubah URL

4. Edit Video URLs (YouTube + TikTok)

Hover mana-mana video embed (YouTube atau TikTok) dalam Visual Edit mode - dashed border + butang “Edit URL” akan muncul. Klik untuk swap video URL tanpa hilang aspect ratio atau positioning.

Cara guna:

Toggle Visual Edit ON
Hover mana-mana video iframe - dashed indigo border + pill “Edit URL” muncul
Klik video atau pill - popover akan muncul
Paste new YouTube atau TikTok URL
Klik Simpan - URL auto-validated dan converted ke embed format

URL formats yang accept:

→YouTube: youtu.be/ID, youtube.com/watch?v=ID, youtube.com/shorts/ID
→TikTok: tiktok.com/@user/video/ID
!Tidak accept: TikTok short links (vm.tiktok.com/...) - buka full URL dulu, copy yang ada @user/video/ID.

Aspect ratio preserved: Layout, sizing, dan positioning untuk video tak akan berubah - cuma source URL yang swap. Berguna kalau anda nak update testimonial video tanpa touch design.

5. Image Upload - Auto-optimized

Tak payah risau pasal saiz image. Setiap upload akan diproses secara automatik:

→Resize ke maksimum 1600×1600 pixels (tetap mengekalkan aspect ratio)
→Format auto-convert ke WebP (saiz lebih kecil, kualiti sama)
→Saiz fail dipadatkan ke ~400KB atau lebih kecil - page load laju
→Metadata stripped (EXIF, GPS) untuk privacy

Note: File HEIC (default iPhone) tidak disokong - convert ke JPEG/PNG dulu. Buka image dalam Photos app → Share → Save to Files → pilih format JPEG.

6. AI Image Generation, Enhance & Gallery

Klik mana-mana gambar dalam editor untuk akses tiga power tools: Generate gambar baru dari prompt, Enhance gambar amateur jadi profesional, atau pilih balik dari Galeriworkspace. Powered by Google's Nano Banana (Gemini 2.5 Flash Image).

Generate dengan AI

Generate gambar baru dari text prompt. Powerful untuk replace stock photos generic dengan visual khas untuk produk anda.

Cara guna:

Klik mana-mana gambar dalam editor (atau gambar placeholder kosong)
Pilih Generate dengan AI dari popover
Klik salah satu daripada 19 template prompt (auto-filter ikut page type), atau tulis prompt sendiri
Edit prompt - tukar “a product” jadi nama produk sebenar anda
Pilih bilangan candidate (1, 2, atau 4)
Klik Generate, tunggu ~10-15 saat
Pilih candidate yang paling sesuai - klik “Pilih gambar ini” untuk apply

Tips untuk prompt yang baik:

Spesifik nama produk anda (cth: “Senang Saham course materials” instead of generic “a product”)
Sebut warna, gaya, dan suasana yang anda nak
Mention “Malaysian person” atau “Malaysian setting” untuk dapat orang / suasana lokal
Sebut lighting style: “soft natural light”, “studio lighting”, “warm tones”
Avoid: “cartoon” / “anime” - model trained untuk realistic photography

Template prompts (auto-filter ikut page type)

Sales / Pre-launch:

📕 Ebook cover mockup
💻 Course on laptop
🎓 Student belajar
📱 Mobile app preview
🖼️ Template flat lay
🧑‍🏫 Instructor portrait

Lead-gen / Portfolio:

🤝 Konsultasi
👥 Team meeting
💼 Founder at work
📈 Result / success
🏢 Office exterior

Local Business:

🏬 Storefront / kedai
👨‍⚕️ Khidmat / treatment
🍽️ Makanan
😊 Pelanggan gembira
👥 Team / staff

Universal:

✋ Tangan close-up
🎤 Event / seminar
✨ Lifestyle vibe

Enhance dengan AI

Untuk gambar yang dah ada tapi nampak amateur, pixelated, lighting tak best, atau perlu polish. Enhance akan tingkatkan kualiti tanpa ubah subjek atau composition.

Cara guna:

Klik gambar yang anda nak enhance (mesti ada existing image, bukan placeholder)
Pilih Enhance dengan AI dari popover
Optional: bagi arahan tambahan dalam input box
Klik Enhance, tunggu ~10-15 saat
Compare side-by-side asal vs enhanced, klik Apply jika suka

Bila guna Enhance

Profile photo yang dark / over-exposed
Founder portrait yang nampak amateur
Food photography yang perlu lighting better
Phone photo yang quality boleh ditingkatkan ke commercial-grade
Apa-apa gambar yang composition dah OK tapi finishing tak premium

Optional guidance examples:

“make the lighting warmer”
“remove background clutter”
“make it look more professional”
“sharpen the focus”
“brighten the shadows”

Galeri Workspace

Setiap gambar yang anda pernah upload, generate, atau enhance dalam workspace ini auto-masuk dalam galeri. Re-use across pages tanpa perlu upload semula.

Use cases:

Founder photo sama untuk semua sales page anda
Logo brand consistent across pages
Re-use generated AI image dari satu page ke page lain
Slot OG image dengan gambar yang dah ada di pages lain
Discover gambar AI yang anda lupa pakai dalam page lama

Mana boleh akses

Full AI Pages (Visual Edit)

Setiap gambar dalam page - klik gambar dalam Visual Edit mode

Sales Page Editor

Hero image, instructor photo, pain points, benefits, offer items, bonuses, testimonial avatars

SEO Settings

OG / social preview image (kelihatan bila sharing pada Facebook, WhatsApp, Twitter, dsb.)

Belum tersedia untuk:

Pre-launch templates (templates handle visuals dari data alone) dan logos array (multi-logo brand badges)

AI Credits

Setiap generate atau enhance gambar guna ~1,290 token (sama range dengan section edit). Token sebenar dibilang dari Gemini API dan didebit dari subscription credits anda dengan plan multiplier:

Plan	Multiplier	Cost per gambar (~)
Free	3x	~3,870 credits
Starter	2.5x	~3,225 credits
Growth	2x	~2,580 credits
Scale	1x	~1,290 credits

Cost-saving tips:

Mula dengan 1 candidate dulu, kalau tak suka baru tambah
Refine prompt sebelum Generate semula (lebih murah daripada generate banyak times)
Re-use dari Galeri instead of generate semula
Multi-candidate (2 atau 4) cost N kali ganda - guna bila prompt tak pasti, lebih murah daripada trial-and-error one-by-one

Limitations yang baik anda tahu:

Text-heavy graphics (logos, infographics, screenshots dengan text exact) tidak akurat - lebih baik upload sendiri
Specific brand asset (logo company sebenar) tidak boleh di-replicate accurately
Real person likeness (specific celebrity, real founder) tidak akan dihasilkan accurately - guna untuk fictional people atau Enhance gambar sebenar
NSFW / adult / violent content akan di-filter oleh Google secara automatic
Aspect ratio terhad: 1:1, 2:3, 3:2, 3:4, 4:3, 4:5, 5:4, 9:16, 16:9, 21:9 (auto-snap ikut frame)

7. Before/After Slider - AI Generation Workflow

Before/After slider tunjuk dua gambar (sebelum + selepas) dengan divider yang visitor boleh drag. Sesuai untuk skincare, dental, fitness, hair, renovation, atau cleaning result. Modal Generate dengan AI ada flow khas untuk B/A: template chip pasangan, aspect ratio control, dan reference image - semua untuk pastikan Before dan After konsisten.

Klik gambar dalam slider

Setiap belah B/A slider ialah gambar berasingan. Klik salah satu (left = Before, right = After) dalam Visual Edit mode untuk buka popover yang sama macam gambar biasa - Tukar / Galeri / Generate / Enhance. Modal Generate akan kenal yang awak dalam B/A block dan tunjuk template + tips khas.

Template chips khas (5 pasang Before/After)

Bila modal dibuka dari B/A slider, chip list dihadkan kepada 10 template B/A je (bukan generic page-type chips). Setiap pasang ada Before + After dengan consistency anchors built-in.

Skin (acne, blemishes)

Before: skin issues visible. After: clearer skin, faint residual marks untuk realism.

Smile (dental)

Before: yellowed/misaligned teeth. After: bright aligned smile, healthy gums.

Body (fitness)

Before: untoned physique. After: more defined, improved posture, sama clothing style.

Hair (rawatan)

Before: thinning, scalp visible. After: fuller density, improved hairline coverage.

Interior (renovation)

Before: worn, cluttered home. After: modernized, fresh paint, sama room layout dan camera angle.

Clean (detailing)

Before: dirty surface (car, sofa, carpet). After: fully clean dengan angle dan lighting sama.

Aspect ratio control

Modal Generate ada dropdown Aspect ratio(10 nisbah disokong) - pilihan auto-detect ditandakan “auto”. Untuk B/A slider, auto-detect ambil size frame editor preview, yang kadang-kadang tak sama dengan size pada published page. Override secara manual ikut output yang anda nak (selalunya 4:5 atau 3:4 untuk muka, 16:9 untuk interior atau landscape).

Tip: Pastikan Before dan After guna aspect ratio sama - kalau tak, slider divider akan nampak weird sebab dua gambar size lain.

Reference image - kunci untuk konsistensi

Bawah prompt textarea ada section “Reference image (optional)”. Upload gambar baru atau pilih dari Galeri workspace. Bila reference dipasang, AI akan kunci pada subject yang sama (muka, room, surface) dan apply perubahan yang anda describe - bukan fabricate orang baru.

Untuk B/A slider, reference image hampir wajib untuk After:

Generate (atau upload) gambar Before dulu
Klik After slot dalam slider, buka modal Generate
Bawah Reference image, pilih “Pilih dari galeri” dan select gambar Before yang baru dijana
Pilih chip template After (cth: “Skin - After”)
Generate - hasil akan jadi same person dengan perubahan yang dimaksudkan

Prompt playbook (8 rules)

Image model macam Gemini Nano Banana respond paling baik bila prompt spesifik dan ada anchor konsistensi. Modal Generate ada link “Tips: cara prompt before/after” yang buka rules ni - boleh juga rujuk di sini:

1. Spesifik, jangan vague

Sebut betul-betul masalah atau perubahan. "Acne kat pipi kiri" lebih baik dari "skin tak best". "Hijab dusty blue" lebih baik dari "different hijab".

2. Satu perubahan setiap kali

Jangan minta clear skin + tukar warna hijab + tukar lighting dalam satu prompt. Fokus satu perkara — model akan campur-campur kalau terlalu banyak.

3. Jangan bagi pilihan

Pilih SATU value je. "Dusty blue hijab" - bukan "biru, kelabu, atau beige". Image model bukan macam ChatGPT - bila dia nampak pilihan, dia akan pilih yang paling dekat dengan reference (selalunya kekal sama).

4. Guna kata kerja "replace" atau "change to"

"Replace hijab with a dusty blue hijab" lebih kuat dari "wearing a different colored hijab". Replacement verb beritahu model dengan jelas yang attribute itu kena ubah.

5. After mesti ada consistency anchors

Untuk gambar After, masukkan: "Same person as reference image, identical face, same angle, same lighting and background." Tanpa ni model akan fabricate muka baru atau setting baru.

6. Guna Before sebagai reference untuk After

Workflow paling konsisten: generate Before dulu (atau upload gambar sebenar), kemudian bila generate After, pilih gambar Before sebagai reference image dalam modal. Model akan kunci pada subject yang sama.

7. Tambah realism cues untuk After

Hasil After yang terlalu sempurna nampak fake. Tambah benda macam "faint residual marks", "natural texture", "subtly more confident expression" - supaya output realistic dan boleh dipercayai.

8. Specify photography style

Sebut style: "photorealistic", "documentation photography", "clinical dermatology photography", "real-estate photography". Elakkan "cartoon", "anime", "illustrated" kecuali itu memang tujuan anda.

Pakai ChatGPT / Claude untuk draft prompt

Untuk niche luar dari 5 pasang template (cth: laser hair removal, tattoo removal, pet grooming, lawn care), ada link “Tips” dalam modal yang ada butang Copy system prompt. Paste system prompt tu ke ChatGPT / Claude / Gemini, kemudian beritahu mereka niche awak - AI akan draft Before + After prompts untuk awak. Paste balik ke modal, generate.

Recommended end-to-end workflow

Klik Before slot dalam B/A slider
Pilih chip template Before yang sesuai (cth: “Skin - Before”)
Edit prompt kalau perlu - tambah detail spesifik macam “wanita Melayu muda dengan tudung”
(Optional) Set aspect ratio override kalau auto-detect tak betul
Generate, pilih candidate, apply
Klik After slot
Bawah Reference image: Pilih dari galeri → select gambar Before yang baru dijana
Pilih chip template After yang berpasangan (cth: “Skin - After”)
Edit prompt - sebut perubahan spesifik (pilih SATU value, bukan list)
Generate - kekalkan aspect ratio sama dengan Before
Apply, drag slider untuk preview hasil

Realism reminder:Hasil After yang “perfect” sangat akan nampak fake dan kurang trust. Tambah cues macam “faint residual marks” (skin), “subtly more confident” (expression), atau “some natural patina” (interior) - subtle imperfection buat output lebih believable.

8. Adjust Image Position (Focal Point)

Bila gambar portrait dimasukkan dalam frame landscape (atau sebaliknya), browser auto-crop dari tengah - kadang muka subjek terpotong. Adjust posisi guna drag-able viewport supaya bahagian penting nampak walaupun frame berbeza ratio.

Cara guna:

Klik gambar dalam Visual Edit - popover muncul
Pilih Adjust posisi
Modal akan tunjuk full image dengan bingkai putih (representing frame yang akan visible)
Drag bingkai putih ke bahagian gambar yang anda nak nampak (face / focal point)
Klik Simpan untuk apply - posisi akan locked walaupun frame berubah size

Bila guna

Profile photo orang dalam landscape hero - drag ke atas supaya muka nampak
Group photo wide dimasukkan dalam square frame - center pada subjek utama
Product shot dengan packaging tall - drag ke atas atau bawah ikut what matters
Building exterior dengan signage - frame the sign, bukan langit kosong

Note: Kalau gambar dan frame ada aspect ratio sama, drag tak akan ada effect (tiada slack untuk move). Modal akan kasi message kalau aspect ratio dah match.

Pro tip: Posisi tersimpan as inline CSS (object-position: 50% 25%). Tak guna AI credits - cuma update HTML attribute.

9. Per-image Toggles - Lightbox, Alt Text, Remove

Selain Tukar, Galeri, Generate, dan Enhance - popover image juga ada tiga toggle berguna yang seller selalu terlepas pandang.

Klik untuk besarkan (Lightbox toggle)

Toggle ini buat gambar boleh klik oleh visitor untuk pop-up modal full-screen - sesuai untuk portfolio shots, case study screenshots, certificate proofs, atau gallery. Sebelum ini perlu chat AI “buat gambar boleh klik untuk besarkan”; sekarang toggle ON / OFF terus dari popover.

Cara guna: Klik gambar dalam Visual Edit → toggle “Klik untuk besarkan” ON. Visitor akan nampak cursor zoom-in apabila hover, klik untuk pop-up. Tekan Esc atau klik backdrop untuk tutup.

Sesuai untuk: Portfolio project shots, certificate / award screenshots, before-after photo gallery, product detail photos, screenshot dashboard / interface preview.
Elak: Logo brand, icons, decorative graphics, profile avatar dalam testimonial card, setiap gambar dalam page (overkill).

Edit Alt Text (SEO & accessibility)

Alt text ialah description gambar yang dibaca oleh search engines (Google) dan screen readers (untuk pengguna disabilities). Mempengaruhi SEO ranking dan accessibility score. AI auto-generate alt text masa create page, tapi anda boleh refine ikut SEO strategy anda.

Cara guna:Klik gambar → input field “Alt text” akan muncul dalam popover → tulis description spesifik → tekan Enter atau klik luar untuk save. Tekan Esc untuk batalkan.

Tips:Description sebenar apa dalam gambar, bukan keyword stuffing. Cth: “Pelanggan tersenyum makan nasi lemak di restoran Kuala Lumpur” lebih baik daripada “nasi lemak best”. Tulis untuk pengguna yang tak nampak gambar - mereka faham apa imej tunjuk.

Buang Gambar

Revert gambar balik jadi placeholder upload (dashed border dengan label “Click to upload”). Berguna kalau anda dah letak wrong image dan nak start fresh, atau nak gambar slot kosong sementara.

Cara guna: Klik gambar → tekan butang “Buang gambar” (warna merah) di bawah popover. Gambar di-revert jadi placeholder. Click placeholder kemudian untuk upload semula.

Note: Buang dari page tak akan padam fail dari storage - gambar tetap dalam Galeri workspace untuk re-use kemudian. Hanya remove pointer dari current page.

Anything via popover doesn't cost AI credits. Lightbox toggle, alt edit, dan remove semuanya FREE - mereka hanya ubah HTML attribute pada page anda. Hanya Generate / Enhance yang guna credits sebab panggil Gemini API.

Untuk perkara yang anda nak chat dengan AI

Visual Edit untuk klik dan tunjuk. Untuk perkara yang anda nak describe - tambah section baru, ubah animation, generate Before/After slider, tukar layout - guna AI Editor chat. Lihat panduan penuh di:

Editor AI: Pro Tips & Tricks

Halaman Jualan AI Editor AI: Pro Tips