คู่มือการใช้งาน Angie

01 · ทำความรู้จัก

Angie คือ Agentic AI สำหรับ WordPress โดยเฉพาะ

ไม่ใช่แค่ AI Chatbot ธรรมดา แต่เป็น AI ที่เข้าใจบริบทเว็บไซต์ของคุณ และลงมือทำงานแทนคุณได้จริง

สาระสำคัญ

Angie คือ Agentic AI Framework ที่ Elementor พัฒนาขึ้นเฉพาะสำหรับ WordPress โดย WordPress ขับเคลื่อนเว็บไซต์กว่า 43% ของอินเทอร์เน็ตทั้งหมด และ Angie ถูกสร้างมาเพื่อทำงานในระดับที่ลึกกว่า AI ทั่วไปอย่างแท้จริง

ต่างจาก AI Coding Tool ทั่วไปที่สร้างโค้ดใน "สุญญากาศ" — Angie เชื่อมต่อโดยตรงกับ WordPress ของคุณ ทุก Asset ที่สร้างจะ สืบทอด Context ของเว็บไซต์โดยอัตโนมัติ ตั้งแต่ Theme Settings, Plugins ที่ติดตั้ง ไปจนถึงโครงสร้าง Content

🧠

เข้าใจ Site Context

รู้ Theme, Plugin ที่ติดตั้ง และโครงสร้าง Content ของเว็บไซต์คุณ

⚡

Native Integration

ทำงานร่วมกับ Elementor Editor ได้โดยตรง ไม่ต้อง Export/Import

🔒

Sandbox Test Mode

ทุก Asset ถูก Test ใน Isolated Environment ก่อน เว็บ Live ปลอดภัย 100%

💡

ความแตกต่างจาก AI ทั่วไป

ChatGPT หรือ AI Coding Tool อื่นๆ ไม่รู้ว่า Theme หรือ Plugin คุณเป็นอะไร จึงมักต้องแก้โค้ดเยอะ แต่ Angie รู้บริบทเว็บไซต์ทั้งหมด ผลลัพธ์จึง Production-Ready ตั้งแต่ต้น

02 · ความสามารถ

สร้างอะไรได้บ้างด้วย Angie Code?

ครอบคลุม WordPress Asset หลากหลายรูปแบบที่แต่เดิมต้องพึ่งนักพัฒนาหรือ Plugin เฉพาะทาง

🧩

Elementor Widgets

สร้าง Widget แบบ Custom เช่น Pricing Table Dynamic, Interactive Slider, Testimonial Carousel

⚙️

WordPress Admin Snippets

Dashboard Widget, Custom User Roles, Settings Screen เฉพาะทาง

✨

Interactive Snippets

CSS, JS, PHP สำหรับ Custom Cursor, Scroll Animations, Interactive Effects

🎮

Visual Apps

เกม 404, Trivia Quiz, Calculator, Interactive Tool ที่ดึงดูดผู้เยี่ยมชม

📂

Custom Post Types & Fields

ควบคุมโครงสร้าง Content โดยไม่ต้องพึ่ง Plugin Third-party

📌

Cloud Library — กำลังจะมา

เร็วๆ นี้ Angie จะมี Cloud Library บันทึก Asset ที่สร้างไว้ใช้ซ้ำข้ามหน้า ข้ามโปรเจกต์ ข้ามเว็บไซต์ได้ ประโยชน์สูงมากสำหรับ Freelancer และ Agency

03 · วิธีการทำงาน

ขั้นตอนการใช้งาน Angie Code

เปิด Angie ได้จาก Elementor Editor, WordPress Top Bar หรือ WordPress Menu Bar

เปิด Angie Code

เข้าถึงได้จาก Elementor Editor, WordPress Top Bar หรือ WordPress Menu Bar

อธิบายสิ่งที่ต้องการสร้าง

ใช้ภาษาธรรมชาติอธิบาย จะละเอียดหรือกว้างก็ได้ Angie รองรับ 3 รูปแบบ Input

Angie สร้าง Asset ใน Sandbox

Asset ถูกสร้างใน Test-mode Environment ที่แยกออกจากเว็บ Live สมบูรณ์

ปรับแต่งผ่าน Chat หรือ Elementor Editor

แจ้ง Angie ต่อเนื่องใน Chat หรือเปิด Elementor Editor ปรับ Styling แบบ Visual

Publish เมื่อพอใจ

เว็บ Live จะถูกแตะต้องก็ต่อเมื่อคุณยืนยันเท่านั้น

3 รูปแบบ Input ที่ Angie รองรับ

⌨️

พิมพ์ข้อความ

เขียน Prompt ด้วยภาษาธรรมชาติ

🖼️

Upload Screenshot

แนบ Design Reference ให้ Angie ตีความ

🔗

วาง URL

ส่ง URL หน้าเว็บเป็น Reference

04 · หลักการเขียน Prompt

เขียน Prompt อย่างไรให้ ได้ผลสูงสุด

Angie รองรับภาษาธรรมชาติ แต่การเขียน Prompt ที่ดีจะช่วยให้ผลลัพธ์แม่นยำและลดรอบการแก้ไข

กรอบ WFCR — สูตรเขียน Prompt สำหรับ Angie

ครอบคลุม 4 มิติหลักที่ทำให้ Angie เข้าใจความต้องการได้ชัดเจนที่สุด

W · WHAT

ระบุสิ่งที่ต้องการสร้าง

บอกชื่อ Widget ให้ชัดเจน เช่น "Create a widget called Pricing Table" ไม่ใช่แค่ "ทำตารางราคา"

F · FUNCTIONALITY

อธิบายการทำงาน

ระบุพฤติกรรม Interaction เช่น "Toggle ระหว่าง Monthly/Yearly", "Scale based on cursor distance"

C · CONTROLS

กำหนด Controls ที่ต้องการ

ระบุ Elementor Controls เช่น Typography, Color Pickers, Repeater, Slider สำหรับความเร็ว

R · REQUIREMENTS

ข้อกำหนดพิเศษ

ระบุ Technical Requirements เช่น "ใช้ Three.js จาก CDN", "Responsive", "Vanilla JS"

เปรียบเทียบ: Prompt คุณภาพต่ำ vs สูง

หมวด	❌ ได้ผลน้อย	✅ ได้ผลดี
Widget	"ทำ Pricing Table"	"Create a widget called Pricing Table พร้อม Toggle Monthly/Yearly, Repeater สำหรับ Plan, Badge Popular, CTA Button"
Animation	"ใส่ Animation"	"Scroll-triggered Fade In จากด้านล่าง ใช้ Intersection Observer API"
Style	"ทำให้สวย"	"Glassmorphism Container (translucent + backdrop-blur), Tooltip เหนือ Icon เมื่อ Hover"
Technical	"ใช้ JavaScript"	"ใช้ Three.js โหลดจาก CDN, Vanilla JS ไม่มี jQuery, Responsive + Touch-friendly"

⚠️

เคล็ดลับ: ใช้ Prompt Library เป็น Starting Point

Elementor มี Prompt Library ที่ prompts.elementor.com — Copy Prompt สำเร็จรูปแล้วปรับ Requirement ให้ตรง Usecase ของคุณได้เลย

05 · ตัวอย่าง Prompt จริง

Prompt ตัวอย่างจาก Elementor Prompt Library

ตัวอย่าง Prompt จริงที่ใช้ได้ผล พร้อมคำอธิบายว่าแต่ละส่วนทำงานอย่างไร

Elementor Widget🖥️ Interactive Dock Menu

Create a native Elementor widget called Interactive Dock Menu that mimics the macOS dock magnification effect. Layout: Horizontal container with a repeater. Each item includes an icon, link, and tooltip. Magnification: Use JavaScript to scale icons based on cursor distance (1x → 1.5x), including adjacent neighbors. Style: • Glassmorphism container (translucent + backdrop blur) • Tooltip appearing above icons on hover • Controls: Icon base size, max scale, effect distance, container padding, tooltip typography/colors.

🔍 วิเคราะห์: ระบุ ชื่อ Widget → บอก Layout (Horizontal + Repeater) → อธิบาย JS Behavior (Scale based on distance) → ระบุ Style Effect (Glassmorphism) → ลิสต์ Controls ครบทุกมิติ WFCR

Elementor Widget💲 Pricing Table with Monthly/Yearly Toggle

Create a Pricing Table widget with a Monthly/Yearly toggle switcher at the top. Display multiple pricing plans in columns showing plan name, icon, price (updates on toggle), feature list with checkmarks, "Popular" badge on recommended plan, and CTA button. Include a Repeater control for multiple plans with monthly and yearly prices. Add smooth price transition animations, optional discount badge (e.g., "Save 20%"), and customizable column layouts. Support hover effects (lift, glow, scale), currency symbol control, and mobile-responsive stacking.

🔍 วิเคราะห์: เริ่มด้วย Core Feature (Toggle) → บอก Component ทุกชิ้น → ระบุ Repeater Control → บอก Animations → ระบุ Styling → ปิดด้วย Responsive

Technical Widget🌊 Ripple Effect Image Widget (Three.js)

Create a custom Elementor widget named "Ripple Effect Image": 1. Functionality: WebGL-based liquid ripple distortion on hover using Three.js, mouse-driven fluid ripples, smooth performance. 2. Content Controls: Image (media), Title (text), Subtitle (text) 3. Settings Controls: Ripple Intensity (slider), Speed (slider) 4. Style Controls: Dimensions (responsive), Typography for Title, Color control for Title 5. Technical: Use Three.js from CDN. Standard Elementor widget structure (PHP class, render method, JS handler). Enqueue assets only when widget is used.

🔍 วิเคราะห์: จัดหมวดหมู่เป็นข้อๆ → แยก Content / Settings / Style Controls → ระบุ Library (CDN) → บอก WordPress Structure ชัดเจน — เหมาะกับ Widget Technical ซับซ้อน

Simple Widget☀️ Solar System Explorer

Create a Solar System Explorer widget featuring animated orbits for all eight planets, orbiting the Sun. Include smooth animations and allow users to customize each planet's size, speed, color, and orbital distance directly from the widget settings.

🔍 วิเคราะห์: ตัวอย่างที่ กระชับแต่ครบ — ระบุ Concept, Behavior และ Customization Controls ใน 2 ประโยค พิสูจน์ว่า Prompt ไม่จำเป็นต้องยาวเสมอไป ขอแค่ครอบคลุม WFCR

🔖

ดู Prompt เพิ่มเติมที่ Elementor Prompt Library

มี Prompt สำเร็จรูปหลายสิบรายการ ทั้ง Elementor Widgets, WooCommerce, Interactive Snippets, Visual Apps และ Admin Snippets — เข้าได้ที่ prompts.elementor.com

06 · เทคนิคสำคัญ

เทคนิค 8 ข้อ ใช้ Angie ให้ได้ประสิทธิภาพสูงสุด

🎯

ระบุชื่อ Widget ก่อนเสมอเริ่ม Prompt ด้วย "Create a custom Elementor widget called [ชื่อ]" จัดการง่ายในภายหลัง

📋

แยก Controls เป็นหมวดหมู่แบ่ง Prompt เป็น Content / Style / Settings Controls ช่วยให้ Angie สร้าง Elementor Panel ที่ Organize ดี

⚡

ระบุ JavaScript Library ที่ต้องการบอก Library เฉพาะเช่น Three.js, Leaflet.js พร้อมบอกว่า "โหลดจาก CDN" เพื่อหลีกเลี่ยงปัญหา Compatibility

📱

อย่าลืม Mobile Responsiveปิด Prompt ด้วย "Ensure mobile-responsive behavior" หรือระบุพฤติกรรมบน Mobile ให้ชัดเจน

🖼️

ใช้ Screenshot Reference แทนการอธิบายยาวแคปหน้าจอ Widget ที่ชอบจากเว็บอื่น แนบเป็น Input ใน Angie แทนการพิมพ์อธิบาย

🔄

ใช้ Iterative Promptingสร้าง Base Widget ก่อน แล้วค่อย Refine ทีละ Feature เช่น "เพิ่ม Animation เมื่อ Hover" ทีละขั้น

🧪

ทดสอบใน Sandbox เสมอก่อน Publishแม้ Angie สร้าง Production-Ready Code แต่ให้ทดสอบใน Test Mode ก่อนทุกครั้ง

🎨

ผสม Angie + Elementor Editorให้ Angie สร้าง Structure และ Functionality แล้วใช้ Elementor Editor ปรับ Visual Details — ทำงานคู่กันได้ดีที่สุด

07 · เริ่มต้นใช้งาน

เริ่มใช้ Angie Code วันนี้

ติดตั้ง Angie Plugin จาก WordPress Repository

WordPress Dashboard → Plugins → Add New → ค้นหา "Angie" — ฟรีสมบูรณ์ ไม่มีค่าใช้จ่าย

Activate และเชื่อมต่อกับ Elementor

Activate Plugin → Angie ปรากฏใน Elementor Editor และ WordPress Top Bar โดยอัตโนมัติ

เลือก Prompt จาก Library หรือเขียนด้วยกรอบ WFCR

เข้า prompts.elementor.com → Copy Prompt → ปรับตาม Usecase ของคุณ

ทดสอบ → ปรับแต่ง → Publish

Preview ใน Sandbox, ปรับแก้ผ่าน Chat หรือ Elementor Editor, Publish เมื่อพอใจ

🚀 ดาวน์โหลด Angie ฟรีวันนี้

Angie Code พร้อมใช้งานบน WordPress Repository — ฟรีสมบูรณ์ ไม่มีค่าใช้จ่าย

↗ ดาวน์โหลด Angie จาก WordPress.org

🌐

แหล่งข้อมูลเพิ่มเติม

• Blog: elementor.com/blog/introducing-angie-agentic-ai-for-wordpress
• Prompt Library: prompts.elementor.com
• Product Page: elementor.com/products/angie-ai-for-wordpress/