คู่มือการใช้งานธีม Flatsome ( UX Builder )

เข้าสู่ระบบหลังบ้าน

• Link Web : https://www.domainname.com/wp-admin/
• Username : *****
• Password : *****

1. วิธีการแก้ไขหน้าต่างๆ ธีม Flatsome ( UX Builder )

ขั้นตอนแรกให้กดไปยังหน้าเว็บไซต์ ตามรูป

เลือกหน้าที่ต้องการแก้ไข จากนั้นกดที่ “แก้ไขหน้า” ดังรูป

หรืออีกวิธีหนึ่งคือ เข้าไปทีเมนู หน้า ของระบบหลังบ้าน ดังรูป

จากนั้นเลือก หน้าที่ต้องการแก้ไข แล้วกด แก้ไข ดังรูป

เมื่อเข้ามาหน้าแก้ไขแล้ว หากขึ้นมาเป็น UX Builder content แสดงว่าหน้านี้ใช้ UX Builder ในการจัดวาง Layout ต่างๆ จากนั้นให้กดไปที่ Edit with UX Builder ดังรูป

เมื่อเข้าสู่หน้าแก้ไขของ UX Builder แล้ว จะสังเกตได้ว่า ฝั่งซ้าย คือ Layer ของ Section ต่างๆ ฝั่งขวาจะเป็นข้อมูลที่แสดงในหน้าเว็บ หากต้องการแก้ไข ให้เลือก section ที่ต้องการแก้ไขได้เลย โดยคลิกไปที่ตัว Element ของแต่ละส่วนได้เลย เช่น แก้ไขข้อความหน้าแรก ให้คลิกที่ข้อความนั้นๆ ดังรูป

หลังจากคลิกแล้ว สังเกตทางฝั่งซ้ายมือ มันจะพาไปที่ข้อความที่เราคลิกเมื่อสักครู่ จากนั้นแก้ไขตามต้องการได้เลย ดังรูป

เมื่อแก้ไขเสร็จแล้ว ให้กดที่ Apply ข้างล่าง ดังรูป

จากนั้นกด Update เพื่อบันทึกการเปลี่ยนแปลง หลังจากอัพเดตแล้ว สามารถไปรีเฟรชดูหน้าเว็บไซต์ได้เลย ดังรูป

2. วิธีแก้ไขเมนู

เข้าไปที่เมนู รูปลักษณ์ แล้วไปที่คำว่า เมนู

ในเมนูจะมีอยู่ 2 คอลลัม คือฝั่งซ้าย เพิ่มเมนูไอเทม เป็นเมนูที่ยังไม่ได้ถูกเพิ่ม และฝั่งขวา โครงสร้างเมนู คือเมนูที่แสดงอยู่ในเว็บ ณ ปัจจุบัน

หากต้องการเพิ่มเมนูใหม่ ให้คลิกที่ลูกศรสามเหลี่ยมเพิ่มเปิดเมนูต่างๆ จากนั้นติ๊กเลือกเมนูที่ต้องการ แล้วคลิก เพิ่มลงเมนู ได้เลย ดังรูป

เมนูที่ถูกเพิ่ม ก็จะมาอยู่ฝั่งซ้าย หากต้องการสลับตำแหน่งของเมนู ให้คลิกค้างที่เมนูนั้นๆ จากนั้นลากไปวาง ณ ตำแหน่งที่ต้องการได้เลย ดังรูป

เมื่อแก้ไขเสร็จเรียบร้อยแล้ว ให้คลิกที่ บันทึกเมนู เพิ่มบันทึกการเปลี่ยนแปลง ดังรูป

จากนั้นไปดูการเปลี่ยนแปลงหน้าเว็บไซต์ได้เลยครับ

3. วิธีเพิ่มสินค้า

*** หมายเหตุ สำหรับธีม Flatsome เป็นธีมที่ใช้สำหรับเว็บไซต์ประเภท E-Commerce ซึ่งจะมีฟังก์ชันต่างๆ ครบเครื่องสำหรับการใช้งาน ดังนั้นธีมนี้ก็จะมีเมนูสินค้าเพิ่มเข้าด้วย

เข้าไปที่เมนู สินค้า แล้วไปที่ เมนู เพิ่ม ตามรูป

จากนั้นก็จะเข้าสู่หน้าเพิ่มสินค้า ให้กรอกตามนี้

• ชื่อสินค้า ที่ช่อง Product name
• กรอกรายละเอียดสินค้า

เลือกหมวดหมู่สินค้า (Product categories) ตามหมวดของสินค้า

เพิ่มรูปหน้าปกสินค้าที่ (Product image)

เพิ่มรูปสินค้าเพิ่มเติมเพื่อทำเป็น Gallery ที่ช่อง (Product gallery)

ถัดมาที่ Product data จาก Simple product ให้เลือกเป็น Variable product เพิ่มกำหนดหลายตัวเลือก เช่น สี, ขนาด (ดังรูป)

• จากนั้นเลือก Attributes แล้วตรง Custom product attribute ก็ให้เลือก Color หรือ Size แล้ว Add เข้าไปได้เลย
• จากนั้นเมื่อเลือก Color แล้ว ให้เพิ่มสีเข้าไป แล้วติ๊กถูกที่ช่อง  Used for variations จากนั้นกด Save attributes (ตามรูป)

หลังจากกด Save attributes แล้ว ให้คลิกที่ Variations แล้วเลือก Create variations from all attributes แล้วคลิก Go เพิ่มดึงข้อมูลที่เลือกมาทั้งหมด (ตามรูป)

เมื่อคลิก Go แล้ว ระบบก็จะดึงข้อมูลตามข้อมูลที่เราใส่ไป ตามตัวอย่างคือเลือก 2 สี ระบบก็จะดึงมา 2 ตัวเลือก (ดังรูป)

จากนั้นให้ทำการเปิด Field ของแต่ละสี เพื่อใส่ราคา (ดังรูป)

เมื่อใส่ราคาเสร็จหมดแล้วให้เลื่อนลงมาล่างสุดที่ช่อง Product short description เพื่อใส่คำอธิบายสั่นๆ เกี่ยวกับสินค้า (ดังรูป)

เมื่อใส่ข้อมูลหมดแล้วให้กด Publish (เผยแพร่) เพื่อทำการเผยแพร่บนเว็บไซต์ได้เลย (ดังรูป)

หลังจากกดเผยแพร่แล้ว ปุ่มจาก Publish ก็จะกลายเป็น Update เพื่อให้เราแก้ไขสินค้าแล้ว Update สินค้านั้นๆ จากนั้นก็สามารถดูสินค้าที่เราเพิ่มได้จากปุ่ม View product (ดังรูป)

4. ผลลัพธ์ที่ได้

5. วิธีแก้ไขสินค้า

 ให้เข้าไปที่เมนู Products แล้วไปที่ All Products (ดังรูป)

จากนั้น สามารถค้นหาสินค้าที่ต้องการแก้ไข แล้วกดที่ Edit ตามสินค้าที่ต้องการได้เลย (ดังรูป)

หลังจากกด Edit แล้ว ก็จะเข้าสู่หน้าแก้ไขสินค้าตามตัวอย่างตอนเพิ่มสินค้าเลย หลังจากแก้ไขเสร็จแล้ว กด Update เพื่อทำการบันทึกสินค้าที่แก้ไข

• Facebook
• Twitter
• Line