Pusat Bantuan/Seller/Editor AI: Pro Tips

Editor AI: Pro Tips & Tricks

AI Editor ialah cara paling powerful untuk transform page anda - cuma describe apa yang anda nak dalam chat, AI akan implement. Page ini fokus pada feature chat-driven: tambah section, animations, magic components, video embeds, dan prompt patterns yang reliable.

AI Editor vs Visual Edit: Page ini fokus pada perkara yang anda describe dengan chat. Untuk perkara yang anda boleh tunjuk dengan klik (edit text inline, tukar gambar, AI image generation, lightbox toggle, alt text edit) - lihat Visual Edit: Click & Edit.

1. Before / After Image Slider

Untuk transformation, case study, atau “sebelum / selepas” visual (klinik aesthetic, fitness, renovation, photography editing) - AI boleh generate slider yang boleh drag.

Cara 1: Tambah dalam section sedia ada

Click section yang ada (contoh: Services), pastu chat:

“Add a draggable before/after slider for each treatment in this section.”

Cara 2: Buat section baru

Click di luar mana-mana section (chat akan tunjuk “Edit entire page”), pastu chat:

“Add a new Transformations section after Services. Show 2 case studies side-by-side, each with a before/after image slider.”

Selepas section ada, toggle Visual Edit, click pada placeholder, upload before image, click after placeholder, upload after image. Visitor boleh drag divider untuk reveal/hide.

Tips for clean slider: Upload kedua-dua image dengan orientation sama (kedua-dua portrait atau landscape), aspect ratio sama, framing sama (kalau face, both shots positioned same distance). Lighting consistent. Kalau dimensi berbeza, slider akan crop center - boleh nampak tak balance.

2. Magic Components - Just Ask

AI Editor ada beberapa interactive components yang awak tak perlu code sendiri. Cuma sebut nama dalam chat, AI akan generate untuk awak.

Carousel

Untuk testimonials, client logos, atau hero photo gallery (Sales page, Physical product, Local business). Renderer auto-tambah prev/next arrows, dot indicators, swipe support, dan block back-gesture pada Magic Mouse / horizontal trackpad.

“Show the testimonials as a carousel with auto-play.”

Hero photo carousel (slider gambar di hero)

Tukar single hero image kepada multi-slide carousel. Slide pertama kekal gambar sedia ada, slide lain jadi placeholder kosong yang awak boleh klik untuk upload sendiri. Sesuai untuk Sales page, Physical product, dan Local business page.

English

“Turn the hero image into a 4-slide photo carousel. Keep the current photo as slide 1 and add 3 placeholder slides for upload.”
“Replace the hero image with a slider showing 3 product shots - main photo, close-up, lifestyle.”
“Enable auto-rotate on the hero carousel.” (lepas semua slide ada gambar)

Bahasa Malaysia

“Tukar gambar hero kepada carousel 4 slide. Slide pertama kekal gambar sekarang, tambah 3 placeholder untuk upload.”
“Buat hero photo slider - 3 slide: gambar utama, close-up, lifestyle moment.”
“Aktifkan auto-rotate untuk hero carousel.” (selepas semua slide ada gambar)

Default auto-rotate OFF.Sementara placeholder belum diisi, auto-rotate akan tunjuk slide kosong kepada visitor - nampak macam broken. Lengkapkan semua slide dulu, lepas tu prompt “enable auto-rotate” untuk hidupkan rotation 5 saat.

Edit mode: Dalam Visual Edit, carousel auto-tukar kepada grid view supaya awak nampak semua slide serentak dan boleh klik mana-mana placeholder untuk upload tanpa perlu swipe.

Accordion (FAQ)

Untuk FAQ section - questions click-to-expand.

“Make the FAQ section an accordion.”

Marquee (Scrolling Strip)

Untuk client logos, testimonial quotes, atau social proof yang scroll horizontal.

“Add a marquee of client logos under the hero.”

Countdown Timer

Untuk launch dates, sale countdowns, atau event deadlines (pre-launch pages).

“Add a countdown timer to the launch date in the hero.”

Lead Form / Waitlist Form

Real form yang collect leads - bukan placeholder. Untuk lead-gen pages dan portfolio.

“Add a lead capture form in the contact section.”

Lightbox Image (Click to Enlarge)

Bila visitor klik pada gambar, gambar akan pop-up dalam saiz penuh (modal full-screen) dengan backdrop gelap. Tekan Esc, klik backdrop, atau butang × untuk tutup. Sesuai untuk portfolio shots, case study screenshots, gallery, atau certificate proofs.

Penting: Lightbox ini opt-in. AI tidak akan tambah secara default - awak kena minta secara jelas. Sebab kalau setiap gambar boleh klik untuk besarkan (logo, icon, decorative), visitor akan rasa pelik.

English

“Make the project images clickable to enlarge.”
“Add a lightbox to the portfolio photos.”
“Let visitors click the certificates to see them in full size.”
“Make the gallery images zoom open when clicked.”
“Enable click-to-enlarge on the case study screenshots.”

Bahasa Malaysia

“Buat gambar project boleh klik untuk besarkan.”
“Tambah lightbox pada gambar portfolio.”
“Bagi visitor klik certificate untuk tengok saiz penuh.”
“Bila gambar gallery di-klik, buat dia pop-up besar.”
“Aktifkan click-to-enlarge pada gambar case study.”

Specific image sahaja: Kalau awak nak satu gambar tertentu sahaja, sebut konteks dia.

“Make only the hero photo clickable to enlarge - leave the icons and logos as they are.”

“Buat gambar profile saya je yang boleh besarkan, lain biar je.”

Sesuai untuk

Portfolio project shots / case studies
Certificate / award screenshots
Before-after photo gallery (kalau bukan slider)
Product detail photos
Screenshot dashboard / interface preview

Elak

Logo brand / client logos (kecil, tak perlu enlarge)
Icon / decorative graphics
Background images / pattern
Profile avatar dalam testimonial card
Setiap gambar dalam page (overkill, mengganggu UX)

Behavior: Modal akan buka dengan smooth zoom animation, backdrop blur, dan focus auto pindah ke butang close (untuk keyboard / accessibility). Pinch-zoom disokong dalam modal pada mobile. Kalau visitor enable prefers-reduced-motion, animation di-skip.

3. Scroll Animations

Page boleh ada animation bila visitor scroll. AI akan auto-add untuk hero dan card sections, tapi awak boleh request specific kalau nak.

Scroll-in animations

Fade Up

Element naik dari bawah + fade in (default untuk most content)

Fade In

Element appear tanpa pergerakan

Fade Left / Right

Slide dari kiri atau kanan (untuk 2-column layout)

Zoom In

Scale up dari kecil + fade in (untuk hero image)

Text Reveal

Headline muncul satu perkataan satu - premium feel untuk hero

Counter

Number count up dari 0 (untuk stats / metrics)

Stagger

Cards muncul satu-satu (grid animation)

Attention & emphasis effects

Pulse Glow

Halo ring expanding dari button untuk grab attention. Untuk CTAs, "Open now" badges, status dots.

Underline Draw

Underline auto-draw bawah headline atau perkataan tertentu bila scroll. Untuk emphasis.

Contoh prompt:

“Animate the stats with count-up effect.”
“Make the feature cards fade in one by one when scrolled.”
“Use text-reveal animation on the hero headline.”
“Add a pulse glow to the WhatsApp CTA button.”
“Underline the word ‘Premium’ in the heading when scrolled into view.”

Use sparingly: Text Reveal ada impact paling tinggi bila digunakan untuk hero h1 sahaja. Kalau setiap heading guna Text Reveal, page nampak slow dan mengganggu. Sama dengan Pulse Glow - reserve untuk satu CTA paling penting (primary action), bukan setiap button.

4. Adding & Editing Sections

Edit one section (cheap, fast)

Click section dalam sidebar → chat header tukar ke “Editing: [Section]” → tulis instruction. Cuma section tu yang akan regenerate. ~2k credits.

Add a new section

Boleh request section baru dari mana-mana - sistem akan kenal niat awak dan letak section sebagai entry baru di sidebar dengan boundary yang betul. Tak perlu click luar dulu.

“Add a new Pricing section before FAQ with 3 tiers.”
“Tambah section testimoni baru selepas Hero.”

Regenerate specific section

Tak puas hati dengan section? Click section, pastu chat:

“Regenerate this section with a more emotional tone.”
“Try a different layout for this section.”

Cara phrase prompt untuk tambah section baru

Tulis prompt dengan jelas - guna perkataan “new section” atau “section baru” supaya sistem faham awak nak section baharu, bukan ubah section sedia ada. Kalau prompt awak ambiguous, content baru mungkin terjatuh dalam section yang dipilih. Phrasing di bawah paling reliable.

English ✓

“Add a new Pricing section”
“Add a new Testimonials section after Hero”
“Create a new ‘Our Clinic’ section after Social Proof”
“Insert a FAQ section before the final CTA”
“Add a section after Services with...”

Bahasa Malaysia ✓

“Tambah section testimoni baru”
“Tambah section baru selepas Hero”
“Buat section pricing baru selepas Services”
“Cipta section ‘Our Clinic’ baru”
“Masukkan section FAQ sebelum CTA”

Verb yang dikenali: tambah / tambahkan / buat / cipta / letak / masukkan / sisipkan / bina / wujudkan.

Elak phrasing ambiguous

“Add testimonials” - tak jelas; modify atau new section? Tulis “Add a new testimonials section”.
“Tambah testimoni” - tiada keyword “baru” atau “section”. Tulis “Tambah section testimoni baru”.
“Buat satu section pasal X” - tiada “baru”. Tambah “baru” di hujung atau sebut posisi (“selepas X”).
“Add Pricing” - terlalu pendek. Tambah perkataan “section” dan “new”.

Cara semak:Bila prompt awak kena, section baru akan muncul sebagai entry sendiri di sidebar (contoh: “Pricing” atau “Testimoni”). Kalau tiada entry baru dan content terus keluar dalam section yang dipilih, retry dengan phrasing di atas.

5. Power Features

Drag image into chat

Drag-drop file terus ke chat input. AI akan tahu cara guna based on instruction awak - embed sebagai content, atau guna sebagai design reference (“match this style”).

Paste video URLs in chat

Paste YouTube atau TikTok URL terus ke chat untuk embed inline player. Lihat Section 6 - Video Embedsuntuk panduan penuh, contoh prompt, dan do/don't.

Version History

Setiap edit auto-saved sebagai version. Buka panel Version History (right sidebar) untuk rollback ke mana-mana version sebelumnya. Useful kalau AI generate sesuatu yang awak tak suka.

HTML Editor (Power User)

Untuk yang reti code - buka HTML editor untuk edit raw HTML. Save automatic, sanitize automatic. Stuff yang complex ke pelik boleh edit terus tanpa AI.

Smart Edit Tier (Free CSS Tweaks)

Untuk style changes simple (color, padding, font size, alignment) sistem cuba apply CSS-only changes dulu. Kalau berjaya, tak charge AI credits. Kalau complex, baru fall back ke AI.

“Make the heading bigger.”
“Change the button to red.”
“Add more padding to this section.”

6. Video Embeds - YouTube & TikTok

Paste YouTube atau TikTok URL terus dalam chat - AI akan embed sebagai inline player dalam page. Visitor boleh tonton terus tanpa tinggalkan website awak. Boleh letak dalam section baru atau tambah ke dalam section yang sedia ada.

URL formats yang disokong

→YouTube: youtu.be/ID, youtube.com/watch?v=ID, youtube.com/shorts/ID
→TikTok: tiktok.com/@user/video/ID
!TikTok short links (vm.tiktok.com/..., vt.tiktok.com/...) tak auto-resolve. Buka link dulu, copy URL panjang yang ada @user/video/ID, baru paste.

Letak video dalam section yang sedia ada

Click section dalam sidebar (e.g. Hero, Testimonials, Final CTA) - chat akan tukar ke Editing: [Section]. Pastu request video.

“Embed this customer testimonial at the top of the section, before the headline: https://youtu.be/abc123”

“Replace the hero image with this TikTok video on the right side: https://www.tiktok.com/@brand/video/7301234567890”

Buat section baru untuk video

Click section yang awak nak letak section baru selepas dia (e.g. select Social Proof) - pastu cakap “add a new section after this section…”. Section baru akan dijana sebagai entry sendiri di sidebar, di posisi yang awak minta.

“Add a new section after this section called ‘Customer Story’ with this real-patient TikTok testimonial: https://www.tiktok.com/@noori/video/7561022540374707457”

“Create a new ‘CEO Message’ section after social proof. The CEO speaks about our mission: https://youtu.be/1CwnL4mRFyM”

Multiple TikTok videos dalam satu section

Sebab TikTok video portrait (9:16), 2-3 video boleh duduk side-by-side dalam satu section tanpa nampak crowded. Sesuai untuk testimonial wall, social proof, atau content showcase. Paste semua URL dalam satu prompt - AI akan auto-susun dalam grid.

“Add a new ‘Real Customer Stories’ section after this section with these 3 TikTok testimonials in a grid:
https://www.tiktok.com/@user1/video/7301234567890
https://www.tiktok.com/@user2/video/7301987654321
https://www.tiktok.com/@user3/video/7302111222333”

“Create a social proof section with 2 TikTok videos side by side, each with a short caption underneath (customer name + result):
https://www.tiktok.com/@noori/video/7561022540374707457
https://www.tiktok.com/@brand/video/7301234567890”

Layout tips yang AI akan ikut:

2 video → 2-column grid pada desktop, stack pada mobile (grid-cols-1 md:grid-cols-2).
3 video → 3-column grid pada desktop, 1 column pada mobile (grid-cols-1 md:grid-cols-3).
Minta caption / nama bawah setiap video kalau awak nak attribution (e.g. “@username · result”).
Boleh combine YouTube + TikTok dalam section sama - AI akan handle different aspect ratios.

How it renders

→YouTube: Landscape 16:9 iframe, max-width ~768px, centered. Guna youtube-nocookie.com (privacy-enhanced - tak track visitor sebelum click play).
→TikTok: Portrait 9:16 iframe, max-width 325px, centered. Guna TikTok official iframe player.
→Multiple videos: Paste banyak URL sekaligus - AI akan susun dalam grid (2-3 columns).

Do

Cakap kontekstual - “testimonial video”, “founder message”, “product demo” - supaya AI bina copy & layout sekitar video.
Sebut posisi yang awak nak - “at the top”, “below the headline”, “side by side with text”.
Untuk add new section, sebut nama section yang sebelumnya - “after this section” atau “after Social Proof”.
Gabungkan dengan content lain - “add a video + 3 testimonials below”.

Don't

Jangan paste TikTok short link (vm.tiktok.com/SHORTID) - open dulu di browser, copy full URL.
Jangan paste private/unlisted YouTube video - embed tak akan main untuk visitor.
Untuk add new section, sebut posisi yang jelas (“after Hero”, “before FAQ”) - tanpa konteks, AI akan letak section di lokasi default.
Untuk TikTok grid, jangan lebih 3 video per section - lebih dari tu page jadi berat dan susah scroll. Kalau ada banyak testimonial, split ke beberapa section.
Jangan campur 4+ YouTube videos dalam section sama - landscape format ambil banyak ruang vertical.

Note keselamatan: Hanya video dari YouTube, TikTok, dan peta Google Maps yang dibenarkan untuk di-embed. Iframe dari sumber lain akan ditolak demi melindungi pelawat halaman awak.

7. Prompt Cheat Sheet

Quick reference untuk request yang biasa diperlukan:

Apa nak buat	Prompt
Translate to BM	"Translate this section to Bahasa Malaysia."
Make tone more urgent	"Make the copy more urgent and scarcity-driven."
Add testimonials	"Add 3 testimonials with names and roles."
Add stats with counter	"Show 4 stats with count-up animation."
Sticky CTA on mobile	"Add a sticky bottom CTA bar on mobile (WhatsApp + Call)."
Better mobile layout	"Make this section work better on mobile."
Add gradient	"Use a subtle gradient background here."
Soften colors	"Use a softer, warmer palette for this section."
Add a section divider	"Add a curved divider between this and next section."
Embed YouTube video	"Embed this video at the top." + paste YouTube URL in chat
Embed TikTok video	"Add this TikTok in a new section." + paste full @user/video/ID URL
TikTok testimonial wall	"Add a section with these 3 TikToks in a grid: <URL1> <URL2> <URL3>"
Add section with video	"Add a new section after this with this video: <URL>"
Lightbox (click to enlarge)	"Make the portfolio images clickable to enlarge."
Lightbox (BM)	"Buat gambar portfolio boleh klik untuk besarkan."

Tip terakhir: Iterate, jangan over-prompt

Jangan cuba muat semua arahan dalam satu prompt panjang. Buat satu perubahan, tengok hasil, pastu tambah next request. Section-edit murah, awak boleh iterate banyak kali untuk dapat hasil yang awak nak.

Visual Edit Halaman Lead & Portfolio