คอมโพเนนต์

คอมโพเนนต์ เป็นส่วนประกอบย่อยของเว็บไซต์ที่ถูกออกแบบให้ทำหน้าที่เฉพาะเจาะจง สามารถนำไปใช้ซ้ำได้ โดยแต่ละคอมโพเนนต์จะทำงานแยกจากกัน แต่สามารถเชื่อมต่อกันเพื่อสร้างระบบที่สมบูรณ์ ตัวอย่างเช่น ถ้าหากมีการสร้าง คอมโพเนนต์ปุ่ม ขึ้นมา 1 อัน สามารถใช้ซ้ำในหลาย ๆ จุดของเว็บได้ โดยไม่ต้องสร้างใหม่ทุกครั้ง โดยแต่ละคอมโพเนนต์มีรายละเอียด ดังนี้

 

ไฮไลต์สื่อโฆษณา

แบนเนอร์
คอลเลกชันสินค้า
ส่วนท้ายของเว็บไซต์
ส่วนหัวเว็บไซต์
แถบนำทาง
เครื่องมือแก้ไขเว็บ

 

 

ไฮไลต์สื่อโฆษณา

เป็นการเพิ่มวิดีโอที่เกี่ยวข้องกับสินค้าหรือบริการในเว็บไซต์

1. คลิกปุ่ม เพิ่ม ไฮไลต์สื่อโฆษณา

 

 

2. การนำวิดีโอมาใส่ในเว็บไซต์ จะต้องนำไปอัปโหลดใน Youtube ก่อน จากนั้นนำ ID ของวิดีโอมาใช้งาน ดังรูป

 

 

3. การคัดลอก ID คือ ข้อความด้านหลัง URL ของ Youtube ตัวอย่างเช่น 

https://www.youtube.com/watch?v=ABC12345678

ID คือ ABC12345678 เมื่อเรียบร้อยแล้ว คลิก บันทึก

 

การแสดงผลบนหน้าเว็บไซต์

 

 

สามารถใช้เมาส์คลิกค้างไว้แล้วลากเพื่อเลื่อนวิดีโอไปทางด้านซ้าย/ขวา ตามที่ต้องการได้

 

 

คลิกเพื่อกลับสู่เมนูด้านบน

 

แบนเนอร์

ใช้สำหรับเพิ่มหรือแก้ไขแบนเนอร์ที่แสดงบนเว็บไซต์ โดยจะแสดงเป็น Slide show ที่สามารถกำหนดระยะเวลาการสไลด์ได้ตามที่ต้องการ

1. คลิกปุ่ม เพิ่ม แบนเนอร์ หรือแก้ไขจาก Banner ที่มีในระบบ

 

 

2. ข้อมูลทั่วไป ใส่รายละเอียดข้อมูลทั่วไปของแบนเนอร์ ดังนี้

• ชื่อ: กำหนดชื่อของแบนเนอร์ เพื่อให้ง่ายต่อการระบุและจัดการ
• ความกว้าง Section: กำหนดความกว้างของแบนเนอร์ในระดับของ Section (Fluid หมายถึงเต็มพื้นที่)
• ความกว้างเนื้อหา: กำหนดขนาดของเนื้อหาในแบนเนอร์
• สไลด์อัตโนมัติ: หากเปิดใช้งาน แบนเนอร์จะเลื่อนถัดไปโดยอัตโนมัติ
• Slide Delay: ระยะเวลาที่ใช้ในการเปลี่ยนสไลด์ (4000 ms = 4 วินาที)

 

 

3. รายการแบนเนอร์ เป็นส่วนที่แสดงรายการแบนเนอร์ที่มีอยู่ในกลุ่มแบนเนอร์ที่สร้างไว้ สามารถเพิ่ม ลบ หรือจัดลำดับแบนเนอร์ได้ตามที่ต้องการ

 

 

4. ตั้งค่ารายละเอียดต่าง ๆ ของแต่ละแบนเนอร์ ดังนี้

• ลิงก์เป้าหมาย: กำหนดว่าคลิกที่แบนเนอร์แล้วจะพาไปที่ไหน เช่น หน้าอื่นของเว็บไซต์ หรือ URL ที่กำหนด
• รายละเอียด: ใส่รายละเอียดเกี่ยวกับแบนเนอร์ในแต่ละภาษา ทั้งไทยและอังกฤษ
• ลิงก์ URL: กำหนดลิงก์สำหรับแบนเนอร์ เช่น "/" หมายถึงหน้าแรก
• คำอธิบายรูปภาพ: ใส่ Alt Text เพื่อช่วยเรื่อง SEO
• การจัดเรียง: สามารถเปลี่ยนลำดับแบนเนอร์โดยใช้ปุ่มลูกศรขึ้น/ลง

 

5. อัปโหลดรูปภาพแบนเนอร์ที่ต้องการให้แสดงผลบนเดสก์ท็อป และบนมือถือ โดยคลิกไอคอน + ที่มุมบนขวามือ จากนั้นคลิก บันทึก

 

 

การแสดงผลบนหน้าเว็บไซต์

 

 

 

คลิกเพื่อกลับสู่เมนูด้านบน

 

 

คอลเลกชันสินค้า

สามารถสร้างคอลเลคชันสำหรับเลือกการจัดเรียงลำดับการค้นหาข้อมูลสินค้าตามหัวข้อที่ต้องการได้

1. คลิก เพิ่ม หรือ แก้ไข จากคอลเลคชันที่มีในระบบ

 

 

2. ข้อมูลทั่วไป สามารถเลือกใช้งานการจัดเรียงสินค้าเมื่อแสดงผลบนหน้าเว็บไซต์ และกำหนดตัวเลือกที่ต้องการให้เป็นค่าเริ่มต้นการจัดเรียงได้ มีรายละเอียด ดังนี้

• แนะนำ
• ขายดี
• เรียงตามตัวอักษร A-Z
• เรียงตามตัวอักษร Z-A
• ราคา: ต่ำไปสูง
• ราคา: สูงไปต่ำ
• เรียงจากใหม่ล่าสุด

 

 

การแสดงผลบนหน้าเว็บไซต์

 

 

 

 

คลิกเพื่อกลับสู่เมนูด้านบน

 

 

 

ส่วนท้ายของเว็บไซต์

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

1. คลิก เพิ่ม หรือ แก้ไข จากส่วนท้ายของเว็บไซต์ที่มีในระบบ

 

 

2. ระบุรายละเอียดส่วนท้ายของเว็บไซต์  (Footer) คือ ชื่อ, โลโก้เว็บไซต์ , ตำแหน่งการแสดงผล, คำอธิบายรูปภาพ

 

 

3. ตั้งค่า Section ที่ต้องการให้แสดงผลในส่วนท้ายของเว็บไซต์  (Footer) ตามที่ต้องการ

 

 

4. Section ชอปปิ้ง มีการเพิ่มสินค้าแต่ละคอลเลคชัน เพื่อให้แสดงผลที่ส่วนท้ายของเว็บไซต์ (Footer)

 

 

การแสดงผลบนหน้าเว็บไซต์

 

 

 

 

คลิกเพื่อกลับสู่เมนูด้านบน

 

 

 

ส่วนหัวเว็บไซต์

การจัดการข้อมูลที่แสดงตรงส่วนหัวของเว็บไซต์ (Header) สามารถกำหนดรูปแบบ โดยการแบ่งเป็น Section ตามที่ต้องการ เช่น ปุ่ม เข้า/ออกจากระบบ, ปุ่มติดต่อเรา, ปุ่มสลับภาษา, ช่องค้นหา หรือตะกร้าสินค้า เป็นต้น

 

1. คลิก เพิ่ม หรือ แก้ไข จากส่วนหัวของเว็บไซต์ที่มีในระบบ

 

 

2. ระบุรายละเอียดส่วนหัวของเว็บไซต์  (Header) คือ ชื่อ และ Section โดยสร้าง Section หลักได้ตามความต้องการ จากนั้นกำหนดข้อมูลที่แสดงในคอลัมน์ของแต่ละ Section

 

 

หมายเลข 1 Section 1 มีการสร้างคอลัมน์ที่ 1 แสดงรายการ ปุ่ม เข้า/ออกจากระบบ และปุ่มติดต่อเรา

 

 

หมายเลข 2 Section 2  มีการสร้างคอลัมน์ที่ 1 แสดงรายการ ปุ่มสลับภาษาและช่องค้นหา

 

 

หมายเลข 3 Section 2 มีการสร้างคอลัมน์ที่ 2 แสดงรายการ โลโก้เว็บไซต์

 

 

หมายเลข 4 Section 2 มีการสร้างคอลัมน์ที่ 3 แสดงรายการ ไอคอนสมาชิก, ไอคอนรายการโปรด, ไอคอนตะกร้าสินค้า และปุ่มสลับเป็นธุรกิจ

 

 

หมายเลข 5 Section 3 มีการสร้างคอลัมน์ที่ 1 แสดงรายการ แถบนำทาง: Navigation Bar Default ซึ่งก็คือส่วนที่เป็นเมนูหลักของเว็บไซต์

 

 

การแสดงผลบนหน้าเว็บไซต์จากการตั้งค่าทั้ง 5 ส่วน

 

 

คลิกเพื่อกลับสู่เมนูด้านบน

 

แถบนำทาง

การกำหนดโครงสร้างเมนูนำทางของเว็บไซต์ เพื่อให้แสดงผลในแถบเมนูหลัก หากหน้าเว็บไซต์มีการแบ่งเนื้อหาเป็นหน้าข้อมูลธุรกิจ และหน้าสำหรับ E-Commerce ก็สามารถเลือกแถบนำทางที่แตกต่างกันได้

 

1. คลิก เพิ่ม หรือ แก้ไข แถบนำทางที่มีในระบบ

 

 

2. ข้อมูลทั่วไป ระบุชื่อของแถบนำทางตามที่ต้องการ

 

 

3. รายการเมนู สามารถกำหนดรายการเมนูที่ต้องการให้แสดงที่เมนูหลักของเว็บไซต์ โดยการเพิ่ม แก้ไข หรือลบรายการได้

 

 

4. กรณีที่มีเมนูย่อย สามารถเพิ่มข้อมูลภายใต้เมนูหลักที่ต้องการ โดยเพิ่ม แก้ไข หรือลบรายการย่อยได้

 

 

5. กรณีที่ต้องการเปลี่ยนเมนูหลักของเว็บไซต์ ต้องไปที่ ส่วนหัวของเว็บไซต์ ที่ใช้งานอยู่ แล้วเลือกลบแถบนำทางเดิมออก จากนั้นเพิ่มแถบนำทางใหม่ที่ต้องการ

 

 

การแสดงผลบนหน้าเว็บไซต์

 

 

 

คลิกเพื่อกลับสู่เมนูด้านบน

 

เครื่องมือแก้ไขเว็บ

เครื่องมือที่เปรียบเสมือน Text Editor ใช้สำหรับการจัดการเนื้อหาในเว็บไซต์ที่มีรายละเอียดค่อนข้างมากที่ประกอบไปด้วยข้อความ รูปภาพ วิดีโอ ลิงก์ เช่น Blog, How to shop, Review หรือคู่มือการใช้งาน ซึ่งสามารถเพิ่มข้อมูล หรือเลือกรูปแบบได้ตามที่ต้องการ

 

1. คลิก เพิ่ม หรือ แก้ไข จากส่วนหัวของเว็บไซต์ที่มีในระบบ

 

 

2. ระบุ ชื่อ และรายละเอียดของบทความ โดยมีรูปแบบต่าง ๆ ให้เลือกใช้งาน หากต้องการใช้งานให้คลิกค้างไว้ แล้วลากมาทางซ้ายมือบริเวณพื้นที่สีขาว เพื่อออกแบบและใส่ข้อมูลเกี่ยวกับบทความที่ต้องการ

 

 

 

3. ระบบแสดงเครื่องมือสำหรับการจัดการบทความ โดยต้องคลิกไปที่สัญลักษณ์บวก (+) มุมบนขวามือ จะปรากฎเครื่องมือสำหรับจัดการบทความเว็บไซต์ เช่น การแบ่งคอลัมน์, การเพิ่มข้อความ, การเปลี่ยนฟอนต์, การแทรกลิงก์, รูปภาพ, วิดีโอ, Map และอื่น ๆ

 

 

ตัวอย่างการเพิ่มข้อมูลในเครื่องมือแก้ไขเว็บ

 

 

 

คลิกเพื่อกลับสู่เมนูด้านบน