บทที่ 7: การนำโค้ดไปใช้ร่วมกับ WordPress Elementor

ขั้นตอนการทำอย่างละเอียด

Step 1: รวมโค้ดเป็นก้อนเดียว

เพื่อความสะดวกใน Elementor ให้รวบรวมโค้ดทั้ง 3 ส่วนไว้ในข้อความชุดเดียวกันตามโครงสร้างนี้:

HTML
<style>
  /* โค้ด CSS */
</style>

<!-- โค้ด HTML เนื้อหา -->

<script>
  // โค้ด JavaScript
</script>

Step 2: สร้างหน้าใหม่และเปิดใช้งาน Elementor

1. เข้าหลังบ้าน WordPress > Pages > Add New Page
2. ตั้งชื่อหน้าเว็บ
3. กดปุ่มสีฟ้าด้านบน Edit with Elementor (แก้ไขด้วย Elementor)

Step 3: วางวิดเจ็ต HTML

1. ที่แถบเครื่องมือค้นหาด้านซ้ายมือ พิมพ์คำว่า HTML
2. คุณจะเห็นวิดเจ็ตชื่อ HTML ที่มีไอคอนรูป </>
3. คลิกค้างไว้แล้วลาก (Drag & Drop) วิดเจ็ตมาปล่อยลงในพื้นที่สร้างเว็บตรงกลาง

Step 4: วางโค้ดและดูผลลัพธ์ทันที

1. แถบเครื่องมือซ้ายมือจะเปลี่ยนเป็นกล่อง HTML Code
2. วางโค้ดทั้งหมดที่เราเตรียมไว้ลงในกล่องนี้
3. หน้าจอตรงกลางจะแสดงผลฟอร์มและดีไซน์จาก Gemini Canvas ขึ้นมาทันทีแบบ Real-time

Step 5: บันทึกและทดสอบ

1. กดปุ่มสีเขียว Update หรือ Publish มุมล่างซ้าย
2. กดไอคอนรูปดวงตา Preview Changes เพื่อทดสอบกรอกฟอร์มบนหน้าเว็บจริง

💡 สำหรับผู้ใช้ Elementor Pro:
แนะนำให้แยกส่วน CSS ไปใส่ที่แท็บ Advanced > Custom CSS ของตัววิดเจ็ต HTML หรือแถบการตั้งค่าของ Section นั้นๆ จะทำให้ระบบประมวลผลได้เป็นระเบียบและเป็นไปตามมาตรฐานมากขึ้น