การใช้งาน การปรับแต่งรูปแบบ Header

คู่มือปรับแต่งรูปแบบ Header: Navigation Menu และ Menu ครบทุกสไตล์

Header เป็นส่วนที่อยู่ตอนบนสุดของหน้าแรกเว็บไซต์ และเป็นส่วนสำคัญที่ช่วยดึงดูดผู้ชมให้ติดตามเนื้อหา สินค้า หรือข้อมูลอื่น ๆ ภายในเว็บไซต์ การปรับแต่งรูปแบบ Header แบ่งเป็น 2 ส่วนหลัก คือ Navigation Menu กับ Top Bar

ภาพรวมส่วน Header ที่แบ่งเป็น Navigation Menu และ Top Bar

การตั้งค่า Navigation Menu

คลิก "ปรับแต่ง" แล้วคลิก "Header"

• 3 คลิกเมนู "Navigation"

คลิกเมนู "Navigation"

เลือกรูปแบบ Navigation Layout ที่ต้องการ โดยมีทั้งหมด 4 รูปแบบดังนี้

ตัวเลือกรูปแบบ Navigation Layout ทั้ง 4 แบบ

ตัวอย่างการใช้งาน "Navigation Layout"

1. รูปแบบมาตรฐาน

2. รูปแบบเน้นใช้งานเมนู

3. รูปแบบสมัยใหม่

4. แฮมเบอร์เกอร์เมนู

สีพื้นหลัง Navigation

สามารถปรับแต่งสีได้ในหน้าเดิม โดยมีเครื่องมือปรับแต่งดังนี้

• A เปลี่ยนสีพื้นหลัง
• B ใช้งานพื้นหลังโปร่งใส
• C เปิดใช้งานพื้นหลังเมนู ในกรณีที่เปิดใช้งานพื้นหลังโปร่งใส

เครื่องมือปรับแต่งสีพื้นหลัง Navigation

ตัวอย่างการปิดใช้งานพื้นหลังโปร่งใส

ตัวอย่างการเปิดใช้งานพื้นหลังโปร่งใส

รูปภาพ

สามารถตั้งค่าโดยใส่ Logo ร้านค้าและรูปภาพตะกร้าสินค้า

ตั้งค่า Logo ร้านค้าและรูปภาพตะกร้าสินค้า

การตั้งค่าอื่น ๆ

• ✓ เต็มหน้าจอ: เปิดการใช้งานการตั้ง Header ให้ขยายใหญ่ขึ้นตามความกว้างของหน้าจอ

ตัวอย่างการเปิดใช้งาน Header เต็มหน้าจอ

• ✓ ตรึงเมนู: เปิดการใช้งานการตั้งค่าสกอร์ลงข้างล่างเมนู ส่งผลให้แถบเมนูตรึงอยู่ด้านบนเสมอ

ตัวอย่างการเปิดใช้งานตรึงเมนู

การตั้งค่า Menu

คลิก "ปรับแต่ง" แล้วคลิก "Header"

• 3 ตั้งค่ารูปแบบเมนูได้โดยคลิกที่แท็บ "Menu"

คลิกที่แท็บ "Menu"

เลือกรูปแบบเมนู โดยมีทั้งหมด 6 รูปแบบ ดังนี้

ตัวเลือกรูปแบบเมนูทั้ง 6 แบบ

ตัวอย่างรูปแบบเมนู

1. กรอบเต็ม

ตัวอย่างเมนูแบบกรอบเต็ม

2. กรอบพอดีเมนู

ตัวอย่างเมนูแบบกรอบพอดีเมนู

3. กรอบโค้ง

ตัวอย่างเมนูแบบกรอบโค้ง

4. เส้นขอบล่าง

ตัวอย่างเมนูแบบเส้นขอบล่าง

5. เส้นขอบรอบ

ตัวอย่างเมนูแบบเส้นขอบรอบ

6. เส้นขอบมน

ตัวอย่างเมนูแบบเส้นขอบมน