คู่มือการใช้งาน Header System

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

Header System เป็นส่วนสำหรับตั้งค่าและปรับแต่งส่วนหัวของเว็บไซต์ ทั้งการเลือกส่วนประกอบที่ต้องการแสดงผล การกำหนดรูปแบบตัวอักษรและสี การปรับแต่งช่องค้นหาและปุ่มต่าง ๆ รวมถึงการตั้งค่าเอฟเฟกต์ของเมนู เพื่อให้ Header มีรูปแบบที่สอดคล้องกับธีมและการออกแบบเว็บไซต์

1. การตั้งค่า Header

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

1.1 การตั้งค่าเมนูและเมนูย่อย

สามารถเพิ่มเมนูย่อย (Submenu) ภายใต้เมนูหลักได้ โดยเลือกประเภทเมนูย่อยได้ 2 รูปแบบ ดังนี้

1. System submenu

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

2. Manual

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

1.2 การแสดงผล Header

กำหนดส่วนประกอบและลักษณะการแสดงผลของ Header โดยมีรายละเอียดดังนี้

1. ใช้พื้นหลังโปร่งใส
กำหนดให้ Header ไม่มีสีพื้นหลังและแสดงผลซ้อนอยู่เหนือเนื้อหาของหน้าเว็บไซต์ โดยรองรับทั้ง Header System และ Custom Header ในหน้า Custom Page

สำหรับหน้า System สามารถใช้งานได้เฉพาะหน้าต่อไปนี้

• หน้าหลัก (/)
• หน้ารวมคอร์ส (/courses)
• หน้ารวมบทความ (/articles)

2. แสดงช่องค้นหา
กำหนดให้แสดงช่องค้นหาบน Header โดยใช้งานได้กับรูปแบบ Header ที่รองรับช่องค้นหา เช่น Hader system 10

3. แสดงไอคอนการแจ้งเตือน
กำหนดให้แสดงไอคอนการแจ้งเตือนบน Header โดยใช้งานได้กับรูปแบบ Header ที่รองรับไอคอนดังกล่าว

4. แสดงไอคอนตะกร้าสินค้า
กำหนดให้แสดงไอคอนตะกร้าสินค้าบน Header โดยใช้งานได้กับรูปแบบ Header ที่รองรับไอคอนดังกล่าว

5. แสดงปุ่ม “คอร์สเรียนของฉัน”
กำหนดให้แสดงปุ่มสำหรับเข้าถึงคอร์สเรียนของผู้เรียน โดยปุ่มจะแสดงสำหรับผู้เรียนที่เข้าสู่ระบบแล้ว และใช้งานได้กับรูปแบบ Header ที่รองรับปุ่มนี้

6. แสดงปุ่มเข้าสู่ระบบ

กำหนดให้แสดงปุ่มเข้าสู่ระบบสำหรับผู้เยี่ยมชมที่ยังไม่ได้เข้าสู่ระบบ โดยใช้งานได้กับรูปแบบ Header ที่รองรับปุ่มดังกล่าว

7. แสดงไอคอนโซเชียลมีเดีย

กำหนดให้แสดงไอคอนโซเชียลมีเดียบน Header โดยใช้งานได้กับรูปแบบ Header ที่รองรับไอคอนดังกล่าว

8. แสดงเงาใต้ Header

เพิ่มเงาบาง ๆ บริเวณด้านล่างของ Header เพื่อช่วยแยกส่วนหัวออกจากเนื้อหาของหน้าเว็บไซต์ให้เห็นชัดเจนขึ้น

9. ใช้งาน Header Sticky

กำหนดให้ Header ตรึงอยู่บริเวณด้านบนของหน้าจอขณะที่ผู้ใช้เลื่อนหน้าเว็บไซต์

2. รูปแบบตัวอักษรและสี Header

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

2.1 แบบตัวอักษร

เลือกแบบอักษรที่ต้องการใช้กับ Header หากไม่ได้กำหนด ระบบจะใช้แบบอักษร Kanit เป็นค่าเริ่มต้น

2.2 สีของ Header

สามารถกำหนดสีของส่วนต่าง ๆ ใน Header ได้ด้วยตนเอง โดยเลือกสีที่ต้องการจากตัวเลือกสี หรือระบุรหัสสี เช่น #000000

1. กำหนดสีพื้นหลัง Header เอง

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

2. กำหนดสีเส้นขอบด้านล่าง Header เอง

กำหนดสีเส้นขอบบริเวณด้านล่างของ Header เพื่อช่วยแบ่งส่วนหัวออกจากเนื้อหาของเว็บไซต์
รองรับ Header รูปแบบที่ 1, 2, 4, 5, 6, 7, 8, 9 และ 10

3. กำหนดสีตัวอักษรหลักเอง

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

4. กำหนดสีรองเอง

กำหนดสีรองสำหรับองค์ประกอบของ Header ที่มีการใช้สีมากกว่าหนึ่งสี โดยตัวเลือกนี้รองรับเฉพาะ Header ที่มีหลายสี

5. กำหนดสีตัวอักษรรองเอง

กำหนดสีตัวอักษรรองสำหรับองค์ประกอบของ Header ที่มีการใช้สีตัวอักษรมากกว่าหนึ่งสี โดยตัวเลือกนี้รองรับเฉพาะ Header ที่มีหลายสี

3. การตั้งค่าช่องค้นหา

ใช้สำหรับปรับแต่งรูปแบบและสีของช่องค้นหาที่แสดงบน Header โดยต้องเปิดใช้งานการแสดงช่องค้นหา และเลือก Header รูปแบบที่รองรับก่อน

3.1 รูปแบบช่องค้นหา

กำหนดรูปแบบการแสดงผลของช่องค้นหาให้เหมาะสมกับการออกแบบเว็บไซต์

3.2 สีพื้นหลังช่องค้นหา

กำหนดสีพื้นหลังของช่องค้นหาได้ด้วยตนเอง หากไม่ได้กำหนด ระบบจะใช้ค่าตั้งต้นตาม Theme หรือรูปแบบ Header เดิม

3.3 สีตัวอักษรในช่องค้นหา

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

3.4 ความหนาเส้นขอบช่องค้นหา

กำหนดความหนาของเส้นขอบช่องค้นหา โดยกรอกค่าได้ตั้งแต่ 0–20 px

• กรอกค่า 0 เพื่อกำหนดความหนาเส้นขอบเป็น 0 px
• กรอกค่าระหว่าง 1–20 เพื่อกำหนดความหนาตามต้องการ
• เว้นว่างเพื่อใช้ค่าตั้งต้นของระบบ

3.5 สีเส้นขอบช่องค้นหา

กำหนดสีเส้นขอบของช่องค้นหาได้ด้วยตนเอง เพื่อให้เข้ากับสีพื้นหลังและองค์ประกอบอื่น ๆ บน Header

4. การตั้งค่าปุ่มคอร์สเรียนของฉัน

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

4.1 รูปแบบปุ่ม

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

4.2 สีพื้นหลังปุ่มคอร์สเรียนของฉัน

กำหนดสีพื้นหลังของปุ่มได้ด้วยตนเอง เพื่อให้ปุ่มโดดเด่นและสอดคล้องกับธีมเว็บไซต์

4.3 สีตัวอักษรปุ่มคอร์สเรียนของฉัน

กำหนดสีตัวอักษรบนปุ่มได้ตามต้องการ หากไม่ได้กำหนด ระบบจะใช้ค่าตั้งต้นจาก Theme หรือรูปแบบ Header เดิม

4.4 ความหนาเส้นขอบปุ่มคอร์สเรียนของฉัน

กำหนดความหนาของเส้นขอบปุ่ม โดยกรอกค่าได้ตั้งแต่ 0–20 px

• กรอกค่า 0 เพื่อกำหนดความหนาเส้นขอบเป็น 0 px
• กรอกค่าระหว่าง 1–20 เพื่อกำหนดความหนาตามต้องการ
• เว้นว่างเพื่อใช้ค่าตั้งต้นของระบบ

4.5 สีเส้นขอบปุ่มคอร์สเรียนของฉัน

กำหนดสีเส้นขอบของปุ่มได้ด้วยตนเอง หากไม่ได้กำหนด ระบบจะใช้ค่าตั้งต้นจาก Theme หรือรูปแบบ Header เดิม

5. การตั้งค่าปุ่มเข้าสู่ระบบ

ใช้สำหรับปรับแต่งรูปแบบและสีของปุ่มเข้าสู่ระบบที่แสดงบน Header สำหรับผู้เยี่ยมชมที่ยังไม่ได้เข้าสู่ระบบ โดยต้องใช้ Header รูปแบบที่รองรับปุ่มดังกล่าว

5.1 รูปแบบปุ่ม

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

5.2 สีพื้นหลังปุ่มเข้าสู่ระบบ

กำหนดสีพื้นหลังของปุ่มได้ด้วยตนเอง เพื่อให้สอดคล้องกับธีมและองค์ประกอบอื่น ๆ บน Header

5.3 สีตัวอักษรปุ่มเข้าสู่ระบบ

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

5.4 ความหนาเส้นขอบปุ่มเข้าสู่ระบบ

กำหนดความหนาของเส้นขอบปุ่ม โดยกรอกค่าได้ตั้งแต่ 0–20 px

• กรอกค่า 0 เพื่อกำหนดความหนาเส้นขอบเป็น 0 px
• กรอกค่าระหว่าง 1–20 เพื่อกำหนดความหนาตามต้องการ
• เว้นว่างเพื่อใช้ค่าตั้งต้นของระบบ

5.5 สีเส้นขอบปุ่มเข้าสู่ระบบ

กำหนดสีเส้นขอบของปุ่มเข้าสู่ระบบได้ด้วยตนเอง เพื่อให้เข้ากับสีพื้นหลังและรูปแบบของปุ่ม

6. แอนิเมชันของ Header

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

6.1 เอฟเฟกต์เมื่อชี้เมนู

เลือกเอฟเฟกต์ที่ต้องการให้แสดงเมื่อผู้ใช้นำเมาส์ไปชี้ที่รายการเมนูบน Header โดยเอฟเฟกต์จะขึ้นอยู่กับตัวเลือกที่ระบบรองรับ

การปิดการแสดงผล Header System

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

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