การใช้งาน UX Builder

UX Builder คือ Page builder ที่ไว้ใช้สำหรับการออกแบบเว็บไซต์ของเราให้มีดีไซต์สวยงาม ซึ่งเป็น Builder ที่ติดมากับธีม Flatsome โดยเฉพาะ

การจะใช้งาน UX Builder ได้อย่างมีประสิทธิภาพ เราต้องเข้าใจคอนเซปการทำงานของ Page Builder ต่างๆ ก่อน สิ่งที่มาพร้อมกับ Page Builder คือชิ้นส่วนหลายชิ้น ซึ่งเราเรียกันว่า Element อารมณ์ประมาณเหมือนเราไปซื้อตัวต่อเลโก้มา 1 กล่อง เราจะได้ชิ้นส่วนมา 1 ถุงใหญ่ๆ หน้าที่เราคือเอาชิ้นส่วน (Element) เหล่านั้นมาต่อเป็นเว็บตามไอเดียที่เราต้องการ ดูภาพประกอบนะ แล้วจะเข้าใจสิ่งที่ผมสื่อสาร

lego

Page Builder = ชิ้นส่วน Lego

ชิ้นส่วนที่มากับ Page Builder

ตัวอย่างชิ้นส่วนต่างๆ ที่คุณได้รับเมื่อซื้อธีม ด้านบนเป็นชิ้นส่วนที่มากับธีม Flatsome การใช้งานชิ้นส่วนเหล่านี้ เราจะใช้งานผ่าน Page builder ที่มากับธีม ซึ่งแต่ละธีมมีการใช้งานที่ไม่เหมือนกัน

ดูตัวอย่างเพิ่มเติมว่าแต่ละ Element ใช้ทำอะไรบ้างได้ที่ Flatsome Element Preview

คุณต้องลองไล่กดดูทีละ Element แล้วถึงจะเห็นภาพ เหมือนเราจะสร้างบ้าน เราต้องรู้ก่อนว่าชิ้นส่วนที่เราต้องการนำมาสร้างบ้านมันมีชื่อเรียกว่าอะไรกันบ้าง เราถึงจะหยิบนำมาใช้ได้ถูกต้อง

วิธีการใช้งานเบื้องต้น

ต้องการออกแบบเว็บหน้าไหน ให้เปิดเว็บหน้านั้นครับ เลื่อนเม้าส์ไปชี้ที่คำว่า Edit Page (แก้ไขหน้า) แต่ให้เลื่อนมาคลิกที่ Edit with UX Builder แทน

ux builder

เราก็จะเข้าสู่หน้าการทำงานบน UX Builder สิ่งที่แสดงอยู่ทางซ้ายคือ Elements ต่างจัดเรียงกันเป็น Layer เหมือน photoshop ซึ่งเป็น Elements ที่ทางธีมเข้าต่อมาให้ดูเป็นตัวอย่าง แต่เดี๋ยวตอนทำงานจริงเราต้องลบทิ้งแล้วต่อใหม่ครับ

ส่วนทางด้านซ้ายคือการแสดงผลลัพธ์แบบ Live Preview ปรับแต่งตรงจุดไหน เขาจะแสดงผลให้เราเห็นทันที

live preview

การเพิ่ม elements

หากต้องการเพิ่ม Elements ให้เราคลิกที่คำว่า Add Element ได้เลยครับ

จากนั้นให้คลิกเลือกชิ้นส่วน Elements ที่เราต้องการใช้ได้เลย ซึ่งตรงจุดนี้เราต้องค่อยๆฝึกลอกเล่นกันดูนะ

element option

แต่ละ Element เขาจะมี option สำหรับการออกแบบเว็บได้หลากหลายรูปแบบ การเปิดใช้งาน option ให้เราคลิกไปที่รูปเฟืองของ Element นั้นๆ

การลบ elements

หากต้องการลบ Elements ให้เราคลิกที่รูปเฟือง จากนั้นคลิก delete ได้เลยครับ

clear element

หากคุณต้องการลบ Element ทั้งหมด ให้เราคลิกที่รูปเฟืองอันสุด ที่เป็นเฟืองตัวใหญ่ จากนั้นให้ดูด้านล่างคลิก Clear ได้เลยครับ

การใช้งาน UX Builder มันยากมากที่ผมจะอธิบายให้คุณเข้าใจผ่านบทความ ผมแนะนำให้คุณดูคลิปสอนการใช้งานด้านบนประกอบนะ จะเข้าได้มากขึ้นนั้นเอง