คู่มือการใช้งานระบบปรับแต่งหน้าเว็บไซต์รูปแบบใหม่

• แชร์
• ทวีต
• ส่งไลน์
• ส่งไลน์

1. ภาพรวมระบบปรับแต่งหน้าเว็บไซต์

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

2. การเพิ่มโมดูลลงในหน้าเว็บไซต์

2.1 เปิดหน้าต่างเพิ่มโมดูล

เลือกเมนูสำหรับเพิ่มโมดูลในหน้าปรับแต่งเว็บไซต์ ระบบจะแสดงหน้าต่าง เพิ่มโมดูล ซึ่งแบ่งโมดูลออกเป็นหมวดหมู่ตามลักษณะการใช้งาน ดังนี้

1. โครงสร้างหน้า

• Section: พื้นที่หลักสำหรับรวบรวมโมดูลที่เกี่ยวข้อง และกำหนดพื้นหลัง ระยะห่าง และการแสดงผลของพื้นที่
• Row: ใช้จัดเรียงเนื้อหาในรูปแบบแถว
• Tab: ใช้แบ่งเนื้อหาออกเป็นแท็บ เพื่อให้ผู้เข้าชมเลือกดูข้อมูลแต่ละส่วน
• Accordion: ใช้จัดเนื้อหาเป็นรายการที่สามารถขยายหรือย่อเพื่อดูรายละเอียดได้

2. ป้ายโฆษณา

• ภาพสไลด์
• แบนเนอร์ + ข้อความ
• แบนเนอร์
• โปรโมชั่น

3. เนื้อหาหลัก

• คอร์สแนะนำ : สามารถเลือก เลือกรูปแบบการแสดงผล ได้ 3 แบบ Slide, Grid, Single
• รายการคอร์ส
• หมวดหมู่คอร์ส
• ผู้สอน
• บทความ

4. ข้อมูล

• วิธีการซื้อ
• แผนที่
• ติดต่อเรา
• สมัครรับข้อมูล
• ธนาคาร
• รีวิว
• สถิติ
• FAQ

2.2 เลือกโมดูลที่ต้องการ

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

สำหรับโมดูลประเภท Section ระบบมีรูปแบบพื้นหลังให้เลือกหลายแบบ เช่น ธรรมดา พื้นหลังสี พื้นหลังรูปภาพ ไล่สีบนล่าง ไล่สีแบบโค้ง และคลื่นด้านล่าง

3. การปรับแต่งการแสดงผลตามอุปกรณ์

ระบบรองรับการปรับแต่งหน้าเว็บไซต์แยกตามขนาดหน้าจอ เพื่อให้ผู้ดูแลเว็บไซต์สามารถกำหนดรูปแบบการแสดงผลให้เหมาะสมกับแต่ละอุปกรณ์ได้

3.1 เลือกหน้าจอที่ต้องการปรับแต่ง

ในหน้าตั้งค่าของโมดูล ให้เลือกอุปกรณ์ที่ต้องการปรับแต่ง โดยมีตัวเลือกดังนี้

• กำลังแก้: จอคอม ใช้ปรับแต่งการแสดงผลบนคอมพิวเตอร์
• กำลังแก้: แท็บเล็ต ใช้ปรับแต่งการแสดงผลบนแท็บเล็ต
• กำลังแก้: มือถือ ใช้ปรับแต่งการแสดงผลบนโทรศัพท์มือถือ

เมื่อเลือกอุปกรณ์แล้ว ให้ปรับค่าต่าง ๆ ตามต้องการ โดยการตั้งค่าจะอ้างอิงกับหน้าจอที่เลือกอยู่ในขณะนั้น

ข้อแนะนำ: ควรตรวจสอบการแสดงผลให้ครบทั้ง 3 อุปกรณ์ เพื่อให้เนื้อหาและองค์ประกอบต่าง ๆ แสดงผลได้อย่างเหมาะสม ไม่ว่าจะเข้าชมเว็บไซต์ผ่านคอมพิวเตอร์ แท็บเล็ต หรือ มือถือ

4. การตั้งค่าพื้นหลังพื้นที่โมดูล

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

4.1 ประเภทพื้นหลังพื้นที่โมดูล

เลือกประเภทพื้นหลังที่ต้องการ โดยมีตัวเลือกดังนี้

• ไม่ระบุ: ไม่กำหนดพื้นหลังเพิ่มเติมให้กับพื้นที่โมดูล
• สี: กำหนดพื้นหลังเป็นสีที่ต้องการ
• รูปภาพ: ใช้รูปภาพเป็นพื้นหลังของพื้นที่โมดูล
• ไล่ระดับสี: กำหนดพื้นหลังแบบไล่ระดับสี

4.2 สีพื้นหลังพื้นที่โมดูล

เมื่อเลือกประเภทพื้นหลังเป็นสี สามารถระบุรหัสสีที่ต้องการได้ เช่น #F3F6FB เพื่อกำหนดสีพื้นหลังของพื้นที่โมดูล

5. การตั้งค่าระยะห่างภายใน (Module Spacing)

ระยะห่างภายในใช้กำหนดพื้นที่ว่างระหว่างขอบของโมดูลกับเนื้อหาภายใน โดยสามารถตั้งค่าแยกได้ทั้ง 4 ด้าน ได้แก่

• ด้านบน: กำหนดระยะห่างจากขอบด้านบน
• ด้านขวา: กำหนดระยะห่างจากขอบด้านขวา
• ด้านล่าง: กำหนดระยะห่างจากขอบด้านล่าง
• ด้านซ้าย: กำหนดระยะห่างจากขอบด้านซ้าย

ระบุค่าเป็นหน่วยพิกเซล (px) ตามต้องการ เช่น ด้านบน 48px ด้านขวา 0px ด้านล่าง 48px และด้านซ้าย 0px

6. การกำหนดตำแหน่งแนวนอน

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

สามารถปรับแต่งตำแหน่งแยกตามอุปกรณ์ได้ โดยเลือกหน้าจอที่ต้องการแก้ไขก่อนตั้งค่า

7. การตั้งค่าระยะห่างภายนอก

ระยะห่างภายนอกใช้กำหนดพื้นที่ว่างรอบโมดูล เพื่อควบคุมระยะห่างระหว่างโมดูลกับองค์ประกอบอื่นบนหน้าเว็บไซต์

สามารถกำหนดค่าแยกได้ 4 ด้าน ได้แก่

• ด้านบน
• ด้านขวา
• ด้านล่าง
• ด้านซ้าย

ระบุค่าเป็นพิกเซล (px) ตามต้องการ เช่น หากไม่ต้องการเว้นระยะห่างภายนอก สามารถกำหนดค่าเป็น 0px ได้ทุกด้าน

8. การตั้งค่าเส้นขอบโมดูล

ใช้กำหนดลักษณะเส้นขอบรอบพื้นที่โมดูล เพื่อช่วยแบ่งพื้นที่เนื้อหาให้ชัดเจนยิ่งขึ้น

8.1 ความหนาเส้นขอบโมดูล

กำหนดความหนาของเส้นขอบแยกตามแต่ละด้าน ได้แก่ ด้านบน ด้านขวา ด้านล่าง และด้านซ้าย โดยระบุค่าเป็นพิกเซล (px)

หากไม่ต้องการแสดงเส้นขอบ สามารถกำหนดความหนาเป็น 0px

8.2 สีเส้นขอบโมดูล

ระบุรหัสสีที่ต้องการใช้กับเส้นขอบ เช่น #000000

8.3 ความโค้งขอบโมดูล

กำหนดความโค้งของมุมโมดูล โดยระบุค่าเป็นพิกเซล (px) เช่น 8px เพื่อให้ขอบของโมดูลมีลักษณะโค้งมน

9. การตั้งค่าหัวข้อ (Title)

ใช้กำหนดรูปแบบหัวข้อที่แสดงบนโมดูล เช่น หัวข้อ “คอร์สเรียนแนะนำ”

สามารถปรับแต่งรายละเอียดได้ดังนี้

• หัวข้อ: ระบุข้อความที่ต้องการแสดง เช่น คอร์สเรียนแนะนำ
• ขนาดฟอนต์: กำหนดขนาดตัวอักษร เช่น 30px
• ความหนาฟอนต์: กำหนดความหนาของตัวอักษรตามตัวเลือกที่ระบบรองรับ
• สีฟอนต์: กำหนดสีตัวอักษรด้วยรหัสสี เช่น #17213A
• Font family: เลือกแบบอักษรที่ต้องการใช้
• ตำแหน่ง Title: กำหนดตำแหน่งการแสดงผลของหัวข้อตามตัวเลือกที่ระบบรองรับ

10. การตั้งค่าปุ่ม View More

ปุ่ม View More ใช้สำหรับให้ผู้เข้าชมคลิกเพื่อไปยังหน้าที่ต้องการ เช่น หน้ารวมคอร์สเรียน

สามารถกำหนดรายละเอียดได้ดังนี้

• ข้อความบนปุ่ม: ระบุข้อความที่ต้องการแสดงบนปุ่ม เช่น “ดูทั้งหมด”
• ลิงก์ปลายทาง: ระบุ URL ของหน้าที่ต้องการให้ปุ่มเชื่อมโยงไป เช่น /courses
• ตำแหน่งปุ่ม: กำหนดตำแหน่งการแสดงปุ่มตามตัวเลือกที่ระบบรองรับ
• สีพื้นหลัง: กำหนดสีพื้นหลังของปุ่ม เช่น #1890ff
• สีฟอนต์: กำหนดสีข้อความบนปุ่ม เช่น #1677FF
• สีเส้นขอบ: กำหนดสีเส้นขอบปุ่ม เช่น #ffffff
• Font family: เลือกแบบอักษรของข้อความบนปุ่ม
• ความหนาฟอนต์: กำหนดความหนาของข้อความบนปุ่ม
• ขนาดฟอนต์: กำหนดขนาดตัวอักษร เช่น 18px
• ลูกศรด้านขวา: ตั้งค่าการแสดงลูกศรทางด้านขวาของปุ่ม
• ความหนาเส้นขอบ: กำหนดความหนาของเส้นขอบปุ่ม เช่น 1px
• ความโค้งปุ่ม: กำหนดความโค้งของขอบปุ่มตามต้องการ

11. แนวทางการปรับแต่งหน้าเว็บไซต์

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

1. เพิ่มโมดูลที่ต้องการใช้งานให้ครบถ้วน
2. จัดวางโครงสร้างหน้าเว็บไซต์ให้เหมาะสมกับเนื้อหา
3. กำหนดพื้นหลัง ระยะห่างภายใน และระยะห่างภายนอกของแต่ละโมดูล
4. ปรับแต่งหัวข้อ ข้อความ สี และแบบอักษรให้สอดคล้องกับรูปแบบของเว็บไซต์
5. ตั้งค่าปุ่มและลิงก์ปลายทางให้ถูกต้อง
6. เลือกหน้าจอคอมพิวเตอร์ แท็บเล็ต และมือถือ เพื่อตรวจสอบและปรับแต่งการแสดงผลของแต่ละอุปกรณ์
7. ตรวจสอบความเรียบร้อยของหน้าเว็บไซต์ก่อนนำไปใช้งานจริง

หมายเหตุ: ชื่อเมนูและตัวเลือกบางรายการอาจแตกต่างกันตามประเภทของโมดูลที่เลือกใช้งาน ควรตรวจสอบการแสดงผลจริงหลังปรับแต่งทุกครั้ง

• แชร์
• ทวีต
• ส่งไลน์
• ส่งไลน์