UX Builder เป็นเครื่องมือที่ใช้ในการสร้างและปรับแต่งหน้าเว็บได้อย่างสะดวกและรวดเร็ว โดยเครื่องมือนี้เป็นส่วนหนึ่งของธีม Flatsome ซึ่งช่วยให้ผู้ใช้งานสามารถออกแบบเว็บไซต์ให้ดูสวยงามตามต้องการ
เพื่อการใช้งาน UX Builder อย่างเต็มประสิทธิภาพ การเข้าใจหลักการของ Page Builder ถือเป็นเรื่องสำคัญ เครื่องมือนี้มีส่วนประกอบหลักที่เรียกว่า “Element” ซึ่งทำหน้าที่คล้ายกับชิ้นส่วนเลโก้ที่คุณต้องนำมาต่อกันเพื่อสร้างเว็บไซต์ในแบบที่คุณต้องการ ดูภาพประกอบแล้วจะช่วยให้คุณเห็นภาพและเข้าใจสิ่งที่ผมกำลังอธิบายได้ชัดเจนขึ้น
เมื่อคุณซื้อธีม Flatsome คุณจะได้รับชุดชิ้นส่วนต่างๆ ที่สามารถใช้งานได้ผ่าน Page Builder ที่มาพร้อมกับธีมนี้ โดยการใช้งานแต่ละชิ้นส่วนหรือ Element เหล่านี้จะมีรูปแบบการใช้งานที่แตกต่างกันไปในแต่ละธีม
หากต้องการทราบเพิ่มเติมว่า Element แต่ละชิ้นสามารถนำไปใช้งานในลักษณะใดได้บ้าง คุณสามารถดูตัวอย่างได้ที่ Flatsome Element Preview โดยการสำรวจและทดลองใช้แต่ละ Element คุณจะเข้าใจภาพรวมของการใช้งานมากยิ่งขึ้น เหมือนการสร้างบ้านที่เราต้องรู้จักชิ้นส่วนต่างๆ ก่อน เพื่อที่จะสามารถเลือกใช้งานได้อย่างถูกต้องตามความต้องกา
วิธีการใช้งานเบื้องต้น
หากต้องการออกแบบหน้าเว็บใด ให้เปิดหน้าเว็บนั้นก่อน จากนั้นให้เลื่อนเม้าส์ไปที่คำว่า “Edit Page (แก้ไขหน้า)” แต่แทนที่จะคลิกที่ “Edit Page” ให้เลื่อนลงมาคลิกที่ “Edit with UX Builder” แทน
เมื่อเข้าสู่หน้าการทำงานใน UX Builder คุณจะเห็นว่าแถบทางซ้ายจะแสดง Elements ที่ถูกจัดเรียงเป็น Layer คล้ายกับใน Photoshop
ด้านขวาของหน้าจอคือ Live Preview ที่จะแสดงผลลัพธ์ของการปรับแต่งทันทีที่คุณทำการเปลี่ยนแปลง ซึ่งช่วยให้คุณเห็นภาพรวมของการออกแบบแบบเรียลไทม์
หากจะต้องการแก้ไขภาพให้ดับเบิ้ลคลิ๊กที่ด้านขวา ด้านซ้ายจะขึ้นให้เปลี่ยนภาพ
หากจะต้องการแก้ข้อความให้ดับเบิ้ลคลิ๊กที่ ข้อความ ด้านขวา ด้านซ้ายจะขึ้นให้ ข้อความ
หากจะต้องการแก้ ภาพแกลลอรี่ ให้ดับเบิ้ลคลิ๊กที่ ข้อความ ด้านขวา ด้านซ้ายจะขึ้นให้แก้ ภาพแกลลอรี่
อธิบาย Element แต่ละชิ้น
Row (แถว)
แถวใช้สำหรับจัดกลุ่มคอนเทนต์หรือ Elements หลายๆ ชิ้นให้อยู่ในแถวเดียวกัน คุณสามารถแบ่งแถวออกเป็นคอลัมน์ย่อยเพื่อจัดเรียงคอนเทนต์ได้ตามต้องการ เช่น การแบ่งหน้าเว็บออกเป็นส่วนๆ เพื่อจัดวางรูปภาพและข้อความเคียงข้างกัน หรือแสดงคอนเทนต์ในรูปแบบกริด
Column (คอลัมน์)
คอลัมน์เป็นส่วนย่อยของแถวที่ใช้ในการจัดวางคอนเทนต์ต่างๆ ให้อยู่ในพื้นที่ที่จำกัด คุณสามารถเพิ่มคอลัมน์หลายๆ อันในแถวเดียวกันเพื่อสร้างเลย์เอาต์ที่ซับซ้อนขึ้นได้ เช่น การวางภาพและข้อความในคอลัมน์ที่แยกกัน หรือการสร้างแถบเมนูและแบนเนอร์ที่จัดเรียงในแนวนอน
Text (ข้อความ)
Text Element ใช้สำหรับแทรกข้อความลงในหน้าเว็บ มีตัวเลือกการปรับแต่งมากมาย เช่น ขนาดฟอนต์ สี การจัดเรียง และการเน้นข้อความ ทำให้คุณสามารถแสดงข้อความในรูปแบบต่างๆ ได้อย่างยืดหยุ่น เช่น การสร้างพาดหัว ข้อความบรรยาย หรือคำอธิบายที่ดึงดูดความสนใจ
Image (รูปภาพ)
Image Element ช่วยให้คุณแทรกรูปภาพลงในหน้าเว็บได้อย่างง่ายดาย คุณสามารถปรับขนาดรูปภาพ การจัดเรียง และการแสดงผลให้เข้ากับหน้าจอทุกขนาดได้อย่างดี เหมาะสำหรับการแสดงภาพสินค้า ภาพประกอบ หรือแบนเนอร์โปรโมชันต่างๆ
Button (ปุ่ม)
Button Element ใช้สำหรับเพิ่มปุ่มที่สามารถคลิกได้ลงในหน้าเว็บ คุณสามารถปรับแต่งขนาด สี สไตล์ และการกระทำเมื่อผู้ใช้คลิกปุ่ม เช่น การนำไปยังลิงก์หน้าอื่น การส่งแบบฟอร์ม หรือการเพิ่มสินค้าลงในตะกร้าสินค้า
Icon Box (กล่องไอคอน)
Icon Box เป็น Element ที่ประกอบด้วยไอคอนและข้อความอธิบาย เหมาะสำหรับการเน้นคุณสมบัติเด่นหรือข้อเสนอสำคัญ เช่น การแสดงบริการที่บริษัทมีให้ หรือการนำเสนอคุณลักษณะของผลิตภัณฑ์ในลักษณะที่เป็นมิตรและเข้าใจง่าย
Slider (สไลเดอร์)
Slider ใช้สำหรับแสดงคอนเทนต์หลายๆ ชิ้นในพื้นที่เดียวกัน โดยผู้ใช้สามารถเลื่อนเพื่อดูคอนเทนต์อื่นๆ ได้ เหมาะสำหรับแสดงรูปภาพ วิดีโอ หรือโปรโมชั่นที่เปลี่ยนแปลงได้ตลอดเวลา
Video (วิดีโอ)
Video Element ช่วยให้คุณแทรกวิดีโอจากแหล่งต่างๆ เช่น YouTube หรือ Vimeo ลงในหน้าเว็บ คุณสามารถตั้งค่าให้วิดีโอเริ่มเล่นอัตโนมัติหรือให้ผู้ใช้ควบคุมการเล่นได้เอง ทำให้วิดีโอเป็นส่วนหนึ่งของการนำเสนอเนื้อหาที่น่าสนใจ
Map (แผนที่)
Map Element ใช้สำหรับฝังแผนที่จาก Google Maps ลงในหน้าเว็บ คุณสามารถตั้งค่าตำแหน่งที่ต้องการแสดงบนแผนที่เพื่อให้ผู้เข้าชมเว็บไซต์สามารถค้นหาที่ตั้งของบริษัทหรือร้านค้าของคุณได้ง่ายๆ
Tabs (แท็บ)
Tabs Element ใช้สำหรับจัดแบ่งคอนเทนต์ออกเป็นหลายแท็บ ซึ่งผู้ใช้สามารถคลิกเพื่อดูเนื้อหาในแต่ละแท็บได้ เหมาะสำหรับการจัดแสดงข้อมูลที่มีหลายส่วน เช่น ข้อมูลสินค้า รายละเอียดทางเทคนิค หรือคำถามที่พบบ่อย (FAQ)
Accordion (อะคอร์เดียน)
Accordion ใช้สำหรับแสดงคอนเทนต์ที่สามารถยุบและขยายได้ ซึ่งเหมาะสำหรับการแสดงข้อมูลที่ไม่ต้องการให้ผู้ใช้เห็นทั้งหมดในคราวเดียว เช่น การจัดกลุ่มคำถาม-คำตอบ หรือแสดงรายละเอียดผลิตภัณฑ์ในรูปแบบที่กระชับ
Gallery (แกลเลอรี)
Gallery Element ช่วยให้คุณแสดงชุดของรูปภาพในรูปแบบแกลเลอรีที่สวยงาม สามารถเลือกจำนวนคอลัมน์และการจัดเรียงรูปภาพได้ ทำให้เหมาะสำหรับการแสดงพอร์ตโฟลิโอ ผลงาน หรือภาพถ่ายจากกิจกรรมต่างๆ
Countdown (นาฬิกานับถอยหลัง)
Countdown ใช้สำหรับแสดงนาฬิกานับถอยหลังไปยังเหตุการณ์สำคัญ เช่น การเปิดตัวสินค้าใหม่ หรือโปรโมชั่นพิเศษ ซึ่งช่วยสร้างความตื่นเต้นและกระตุ้นความสนใจของผู้เข้าชมเว็บไซต์
Pricing Table (ตารางราคา)
Pricing Table เป็น Element ที่ช่วยให้คุณแสดงแพ็กเกจหรือแผนการบริการต่างๆ ในรูปแบบตาราง ช่วยให้ผู้ใช้สามารถเปรียบเทียบราคาและคุณสมบัติของแต่ละแพ็กเกจได้ง่ายขึ้น เหมาะสำหรับเว็บไซต์ที่มีการนำเสนอแผนการบริการหรือสินค้าที่มีหลายตัวเลือก
Social Icons (ไอคอนโซเชียล)
Social Icons ใช้สำหรับแสดงไอคอนลิงก์ไปยังโซเชียลมีเดียต่างๆ ของคุณ เช่น Facebook, Twitter, Instagram ช่วยให้ผู้เข้าชมเว็บไซต์สามารถเชื่อมต่อกับคุณบนแพลตฟอร์มโซเชียลต่างๆ ได้ง่ายขึ้น
Product Grid (ตารางสินค้า)
Product Grid ใช้สำหรับแสดงสินค้าต่างๆ ในรูปแบบกริด ซึ่งเหมาะสำหรับเว็บไซต์อีคอมเมิร์ซที่ต้องการจัดเรียงสินค้าเป็นหมวดหมู่ ทำให้ผู้ใช้สามารถเลือกชมและค้นหาสินค้าที่ต้องการได้อย่างสะดวก
Testimonials (คำรับรอง)
Testimonials Element ใช้สำหรับแสดงคำรับรองหรือรีวิวจากลูกค้า ทำให้เว็บไซต์ของคุณดูน่าเชื่อถือมากขึ้นโดยการแสดงความคิดเห็นของลูกค้าที่เคยใช้บริการหรือซื้อสินค้าของคุณ
Block
Block Element ใช้สำหรับแทรกบล็อกของเนื้อหาที่สร้างไว้ก่อนแล้ว คุณสามารถสร้างบล็อกเหล่านี้แล้วนำไปใช้ซ้ำในหลายๆ หน้าได้ ซึ่งช่วยประหยัดเวลาและทำให้การออกแบบมีความสม่ำเสมอ
Banner (แบนเนอร์)
Banner Element ใช้สำหรับแสดงแบนเนอร์ที่มีภาพและข้อความ เหมาะสำหรับการโปรโมตสินค้า บริการ หรือประกาศสำคัญบนหน้าแรกหรือหน้าหมวดหมู่
Blog Posts
Blog Posts Element ใช้สำหรับแสดงโพสต์จากบล็อกของคุณในรูปแบบต่างๆ เช่น กริดหรือรายการ คุณสามารถตั้งค่าให้แสดงโพสต์ล่าสุดหรือโพสต์จากหมวดหมู่เฉพาะได้ ทำให้คุณสามารถดึงดูดความสนใจของผู้ใช้ด้วยเนื้อหาที่เกี่ยวข้อง
Breadcrumbs
Breadcrumbs ใช้สำหรับแสดงเส้นทางนำทางของผู้ใช้ในเว็บไซต์ ช่วยให้ผู้เข้าชมสามารถกลับไปยังหน้าเดิมหรือหน้าแรกได้อย่างง่ายดาย เพิ่มประสบการณ์การใช้งานที่ดีขึ้น
Buttons
Buttons Element ใช้สำหรับเพิ่มปุ่มในสไตล์ต่างๆ ที่คุณสามารถปรับแต่งขนาด สี และการกระทำเมื่อคลิก ทำให้คุณสามารถสร้างการนำทางและการกระตุ้นการคลิกที่มีประสิทธิภาพ
Divider
Divider Element ใช้สำหรับเพิ่มเส้นแบ่งระหว่างคอนเทนต์หรือส่วนต่างๆ ของหน้าเว็บ ช่วยให้การออกแบบมีความเป็นระเบียบและอ่านง่ายขึ้น
Image Box
Image Box ใช้สำหรับแสดงภาพพร้อมข้อความหรือคำอธิบายที่อยู่ด้านล่าง ช่วยให้คุณนำเสนอภาพและข้อมูลที่เกี่ยวข้องกันในรูปแบบที่น่าสนใจ
Menu
Menu Element ใช้สำหรับแทรกเมนูนำทางของเว็บไซต์ในหน้าใดๆ ช่วยให้ผู้ใช้สามารถเข้าถึงหน้าอื่นๆ ของเว็บไซต์ได้อย่างสะดวก
Portfolio
Portfolio Element ใช้สำหรับแสดงผลงานในรูปแบบกริดหรือรายการ เหมาะสำหรับผู้ที่ต้องการนำเสนอผลงานหรือโปรเจคที่ทำ ให้ผู้เข้าชมเว็บไซต์ได้เห็นความสามารถและคุณภาพของงาน
Grid
Grid ใช้สำหรับแสดงแกลเลอรีผลงานที่ถูกจัดกลุ่มไว้ คุณสามารถตั้งค่าการแสดงผลและการจัดเรียงเพื่อให้ผู้เข้าชมสามารถดูได้อย่างชัดเจน
Product Flip
Product Flip ใช้สำหรับแสดงผลิตภัณฑ์ที่สามารถหมุนภาพกลับเพื่อดูรายละเอียดเพิ่มเติมได้ เหมาะสำหรับการแสดงสินค้าที่มีหลายมุมมองหรือรายละเอียดที่ต้องการให้ผู้ใช้เห็นทั้งสองด้าน
Product Category
Product Category Element ใช้สำหรับแสดงหมวดหมู่สินค้าในรูปแบบกริดหรือสไลด์ เหมาะสำหรับเว็บไซต์อีคอมเมิร์ซที่ต้องการจัดกลุ่มสินค้าเป็นหมวดหมู่ ทำให้ผู้ใช้สามารถเลือกซื้อสินค้าที่ต้องการได้ง่ายขึ้น
Recent Products
Recent Products Element ใช้สำหรับแสดงสินค้าที่เพิ่งถูกเพิ่มเข้ามาในร้านค้า คุณสามารถตั้งค่าให้แสดงเฉพาะหมวดหมู่หรือสินค้าที่เลือกได้ ทำให้ผู้ใช้สามารถติดตามสินค้าล่าสุดได้อย่างง่ายดาย
Section
Section Element ใช้สำหรับแบ่งหน้าเว็บออกเป็นส่วนต่างๆ คุณสามารถปรับแต่งพื้นหลัง สี และการจัดวางคอนเทนต์ภายในแต่ละส่วนได้ ช่วยให้การออกแบบมีความหลากหลายและดูเป็นระเบียบ
Share Icons
Share Icons ใช้สำหรับแสดงไอคอนแชร์ไปยังโซเชียลมีเดียต่างๆ เช่น Facebook, Twitter, Instagram ทำให้ผู้ใช้สามารถแชร์คอนเทนต์ของคุณไปยังแพลตฟอร์มโซเชียลได้อย่างง่ายดาย
Slider
Slider Element ใช้สำหรับแสดงสไลด์ของภาพหรือคอนเทนต์ที่เปลี่ยนแปลงได้อัตโนมัติหรือควบคุมด้วยมือ เหมาะสำหรับแสดงโปรโมชั่นหรือสินค้าที่ต้องการให้ผู้ใช้เห็นก่อน
Title
Title Element ใช้สำหรับเพิ่มหัวข้อหรือชื่อเรื่องในหน้าเว็บ คุณสามารถปรับขนาดฟอนต์ สี และการจัดวางได้ ทำให้คุณสามารถสร้างหัวข้อที่ดึงดูดความสนใจและช่วยให้ผู้ใช้เข้าใจเนื้อหาของคุณได้ง่ายขึ้น
Video Box
Video Box ใช้สำหรับแทรกวิดีโอพร้อมกับข้อความหรือคำอธิบายที่อยู่รอบๆ วิดีโอ ทำให้คุณสามารถนำเสนอเนื้อหาในรูปแบบที่ดึงดูดและเข้าใจง่ายขึ้น
Logo
Logo Element ใช้สำหรับแสดงโลโก้ของแบรนด์หรือพันธมิตร คุณสามารถแสดงโลโก้หลายอันในรูปแบบสไลด์หรือกริด ซึ่งเหมาะสำหรับเว็บไซต์ที่ต้องการแสดงความน่าเชื่อถือผ่านการร่วมมือกับแบรนด์อื่นๆ
Top Rated Products
Top Rated Products ใช้สำหรับแสดงสินค้าที่มีการจัดอันดับสูงสุดในร้านค้า เหมาะสำหรับการนำเสนอสินค้าที่ได้รับความนิยมและความพึงพอใจจากลูกค้า
Wishlist
Wishlist Element ใช้สำหรับแสดงสินค้าที่ผู้ใช้เพิ่มไว้ใน Wishlist ทำให้ผู้ใช้สามารถกลับมาดูและซื้อสินค้าที่พวกเขาสนใจในภายหลังได้
