/📖คู่มือ
⌘K
เว็บไซต์หลัก
สมัครสมาชิก
หน้าเว็บเพจ (Landing Page)

สตูดิโอ Page Builder

อัปเดตล่าสุด: ล่าสุด•เวลาอ่านโดยประมาณ 3 นาที

ภาพรวมเครื่องมือสร้างหน้าเพจ (Page Builder Studio)

ระบบ Page Builder ของ WaanKit เป็นเครื่องมือออกแบบหน้า Landing Page บนมือถือแบบแสดงผลทันที (Visual Drag & Drop) ผู้ใช้สามารถจัดวางองค์ประกอบ บล็อกข้อความ รูปภาพ แกลเลอรี วิดีโอ ปุ่มกด ฟอร์มแบบสอบถาม และข้อมูลนามบัตร vCard ได้อย่างอิสระโดยไม่ต้องเขียนโค้ด

หน้าต่างภาพรวมพื้นที่ทำงาน Page Builder Studio

1. การเริ่มต้นด้วยเทมเพลตสำเร็จรูป

เมื่อสร้างหน้าเพจใหม่ สามารถเลือกเริ่มต้นจากเทมเพลตดีไซน์มาตรฐานที่แยกตามหมวดหมู่ธุรกิจ:

คลังเทมเพลตหน้าเพจสำเร็จรูป

  1. คลิกเลือกเทมเพลตที่ต้องการตามหมวดหมู่ (Corporate, Creative, Retail, Technology, Personal, Food, Research, Registration, Poll, Order)
  2. คลิกปุ่ม "ดูตัวอย่าง" เพื่อพรีวิวการแสดงผล
  3. คลิกปุ่ม "เลือก" เพื่อนำโครงสร้างเทมเพลตเข้ามาแก้ไขต่อใน Page Builder

2. แถบเครื่องมือควบคุม (Canvas Toolbar)

แถบเครื่องมือด้านบนใช้สำหรับควบคุมมุมมอง การบันทึก และการเผยแพร่:

แถบเครื่องมือและการปรับขนาดหน้าจอ Responsive

2.1 การสลับมุมมองอุปกรณ์ (Responsive Viewport Switchers)

  • Desktop Mode: ตรวจสอบการจัดวางบนหน้าจอขนาดกว้าง
  • Tablet Mode: ตรวจสอบการแสดงผลบนแท็บเล็ต
  • Mobile Mode: หน้าจอมือถือมาตรฐานสำหรับการใช้งานจริง

2.2 ประวัติการแก้ไข (Undo & Redo)

  • Undo: ย้อนกลับการแก้ไขล่าสุด
  • Redo: กู้คืนการแก้ไขที่เพิ่งย้อนกลับ

2.3 ปุ่มบันทึกและการเผยแพร่ (Header Actions)

  • ดูตัวอย่าง (Preview): เปิดหน้าต่างพรีวิวเพื่อทดสอบการแสดงผลและปุ่มกด
  • บันทึกร่าง (Save Draft): บันทึกการเปลี่ยนแปลงในระบบโดยยังไม่เผยแพร่สู่หน้าจริง
  • เผยแพร่ (Publish): อัปเดตการเปลี่ยนแปลงทั้งหมดสู่หน้าสาธารณะทันที
  • เปิดลิงก์จริง (Public URL): เปิดหน้าเว็บไซต์จริงผ่านเบราว์เซอร์

3. คลังบล็อกและองค์ประกอบ (Block Categories)

แผงควบคุมด้านขวาแบ่งบล็อกออกเป็นหมวดหมู่ตามลักษณะการใช้งาน:

3.1 บล็อกเนื้อหาและมัลติมีเดีย (Content Blocks)

บล็อกเนื้อหาและมัลติมีเดีย

  • Text: กล่องข้อความ ปรับขนาดฟอนต์ สี การจัดวาง และแทรกลิงก์
  • Button: ปุ่ม Call-to-Action เชื่อมโยง URL, เบอร์โทรศัพท์, อีเมล หรือ LINE
  • Image: ภาพแบนเนอร์ โลโก้ หรือภาพประกอบ
  • Social: แถบไอคอนโซเชียลมีเดีย (Facebook, Instagram, YouTube, LINE, X/Twitter)
  • Divider: เส้นคั่นแบ่งสัดส่วนเนื้อหา
  • Spacer: ระยะห่างแนวตั้งระหว่างบล็อก
  • Wrapper / Section / Group / Column: กล่องโครงสร้างสำหรับจัดกลุ่มเนื้อหา
  • Hero: ภาพแบนเนอร์ส่วนหัวพร้อมข้อความพาดหัว
  • YouTube: ฝังวิดีโอจาก YouTube ด้วย URL
  • Masonry: แกลเลอรีรูปภาพแบบกริดอิสระ
  • Grid Gallery: แกลเลอรีรูปภาพแบบตาราง
  • Slide Gallery: แกลเลอรีรูปภาพแบบสไลด์เลื่อน

3.2 บล็อกโครงสร้างเลย์เอาต์ (Layout & Column Grids)

บล็อกการจัดโครงสร้างคอลัมน์

  • 2 คอลัมน์ (2 Columns): สัดส่วนความกว้าง เช่น 50% : 50%, 33% : 67%, 67% : 33%, 25% : 75%, 75% : 25%
  • 3 คอลัมน์ (3 Columns): สัดส่วน 33.33% : 33.33% : 33.33%, 25% : 25% : 50%, 50% : 25% : 25%
  • 4 คอลัมน์ (4 Columns): สัดส่วนเท่ากัน 4 ช่อง 25% : 25% : 25% : 25%

3.3 ระบบแบบสอบถามและฟอร์มรับข้อมูล (Questionnaire & Form Blocks)

บล็อกแบบสอบถามและฟอร์มรับข้อมูล

บล็อก คำอธิบายฟังก์ชัน ตัวอย่างการใช้งาน
Short Text ช่องกรอกข้อความสั้น 1 บรรทัด ชื่อ-นามสกุล, เบอร์โทรศัพท์, รหัสสมาชิก
Long Text กล่องข้อความยาวหลายบรรทัด ข้อเสนอแนะ, รายละเอียดปัญหา, ที่อยู่จัดส่ง
Radio Button ตัวเลือกแบบวงกลม (เลือกได้ 1 ข้อ) เพศ, ช่วงอายุ, แผนกที่ต้องการติดต่อ
Checkbox ตัวเลือกแบบสี่เหลี่ยม (เลือกได้หลายข้อ) รายการสินค้าที่สนใจ, กิจกรรมที่ต้องการเข้าร่วม
Dropdown เมนูดร็อปดาวน์เลือกรายการ จังหวัด, สาขาที่เข้ารับบริการ
Linear Scale สเกลวัดระดับตัวเลข (เช่น 1-5 หรือ 1-10) วัดระดับความพึงพอใจ
Date ปฏิทินเลือกวันที่ วันเกิด, วันนัดหมาย
Time เมนูเลือกเวลา เวลาที่สะดวกให้ติดต่อกลับ
Range Star ให้คะแนนดาว 1-5 ดาว ประเมินความพึงพอใจสินค้าหรือบริการ
Upload Image กล่องแนบไฟล์รูปภาพ แนบสลิปโอนเงิน, ภาพสินค้า
Choice Table ตารางคำถามเมทริกซ์ (เลือก 1 ตัวเลือกต่อแถว) ประเมินหัวข้อย่อยด้านต่างๆ
Checkbox Table ตารางคำถามเมทริกซ์ (เลือกหลายตัวเลือกต่อแถว) สำรวจความสนใจในหลายมิติ
Submit Button ปุ่มกดส่งข้อมูลฟอร์ม ส่งข้อมูลเข้าสู่ระบบพร้อมแจ้งเตือนผ่าน Telegram Bot

[!NOTE] การดูข้อมูลแบบสอบถาม: ข้อมูลที่ลูกค้าส่งผ่านฟอร์มจะถูกบันทึกและแสดงในแท็บ "ผลแบบสอบถาม" (Questionnaire Results) ของ Smart Link นั้นโดยอัตโนมัติ

3.4 องค์ประกอบนามบัตรดิจิทัลและข้อมูลติดต่อ (Business Card & Contacts Blocks)

สำหรับ Smart Link ประเภทกลุ่มนามบัตร จะมีบล็อกพิเศษสำหรับดึงข้อมูลพนักงานมาแสดงผลอัตโนมัติ:

บล็อกองค์ประกอบนามบัตรดิจิทัลและข้อมูลติดต่อ

  • Contacts: รวมช่องทางการติดต่อทั้งหมด
  • Item Contacts: ข้อมูลติดต่อรายบุคคลของเจ้าของนามบัตร (เบอร์โทร, อีเมล, โซเชียล)
  • Image Profile: รูปโปรไฟล์พนักงานพร้อมกรอบรูปตามธีม
  • Save Contacts: ปุ่มบันทึกรายชื่อลงสมุดโทรศัพท์มือถือ (.vcf vCard)

4. การจัดการโครงสร้างเลเยอร์ (Layer Tree)

คลิกที่แท็บ "Layer" ด้านบนขวาเพื่อดูโครงสร้างลำดับชั้นของหน้าเว็บ:

โครงสร้างเลเยอร์ของหน้าเพจ

  • Tree Hierarchy: แสดงลำดับชั้นตั้งแต่ Page > Wrapper > Section > Column > Block
  • Drag to Reorder: ลากสลับตำแหน่งเลเยอร์ขึ้น-ลงเพื่อจัดลำดับการแสดงผล
  • Select & Inspect: คลิกที่เลเยอร์เพื่อเข้าสู่แผงแก้ไขสไตล์ขององค์ประกอบนั้นโดยตรง

5. ขั้นตอนการสร้างหน้าเพจ

  1. เลือกเทมเพลตหรือวางโครงสร้าง Section: เริ่มต้นจากเทมเพลต หรือลาก Section และ Column มาวางบนพื้นที่ทำงาน
  2. ใส่เนื้อหาและมัลติมีเดีย: ลากบล็อก Text, Image, Button, Social หรือ YouTube ใส่ลงในคอลัมน์
  3. ปรับแต่งสไตล์: กำหนดสีพื้นหลัง ระยะห่าง (Padding/Margin) และขนาดตัวอักษร
  4. พรีวิวและเผยแพร่: ตรวจสอบความถูกต้องผ่านปุ่ม ดูตัวอย่าง (Preview) จากนั้นคลิก "เผยแพร่" (Publish)
ก่อนหน้าหน้าเว็บเพจ (Landing Page)ถัดไปผลแบบสอบถาม (Feedback)