ส่วนของ Header จะแบ่งเป็น 2 ส่วนหลักๆ คือ Navigation Menu กับ Top Bar
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-01-1024x174.jpg)
โดยการปรับแต่ง Header สามารถทำได้โดยคลิกที่ “ปรับแต่ง” (ตำแหน่งที่ 1) และคลิกที่เมนู “Header” (ตำแหน่งที่ 2) เพื่อเข้าสู่การจัดการ Header
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-02-1024x600.jpg)
การเลือกรูปแบบ Navigation Layout
ภายใต้แท็บ “Navigation Menu” ให้คลิกที่แท็บ “Navigation” (ตำแหน่งที่ 1)
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-03-1024x568.jpg)
เลือกรูปแบบ Navigation Layout ที่ต้องการ โดยมีทั้งหมด 3 รูปแบบดังนี้
- รูปแบบมาตรฐาน
- รูปแบบเน้นใช้งานเมนู
- รูปแบบสมัยใหม่
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-04-1024x300.jpg)
ตัวอย่างการใช้งานรูปแบบมาตรฐาน
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-05-1024x106.jpg)
ตัวอย่างการใช้งานรูปแบบเน้นใช้งานเมนู
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-06-1024x151.jpg)
ตัวอย่างการใช้งานรูปแบบสมัยใหม่
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-07-1024x151.jpg)
การปรับแต่ง Navigation Layout
หลังจากเลือกรูปแบบที่ต้องการแล้ว สามารถปรับแต่งสีได้ในหน้าเดิม โดยมีเครื่องมือปรับแต่งดังนี้
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-08-1024x300.jpg)
- เปลี่ยนสีพื้นหลัง
- ใช้งานพื้นหลังโปร่งใส
- เปิดใช้งานพื้นหลังเมนู ในกรณีที่เปิดใช้งานพื้นหลังโปร่งใส
ตัวอย่างการปิดใช้งานพื้นหลังโปร่งใส
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-09-1024x370.jpg)
ตัวอย่างการเปิดใช้งานพื้นหลังโปร่งใส
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-10-1024x370.jpg)
การตั้งค่าอื่นๆ
- เต็มหน้าจอ
- ตรึงเมนู
ตัวอย่างการเปิดใช้งานเต็มหน้าจอ Header จะขยายตามความกว้างของหน้าจอ
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-11-1024x370.jpg)
ตัวอย่างการใช้งานตรึงเมนู เมื่อทำการสกอร์ลงข้างล่าง เมนูจะตรึงอยู่ด้านบนเสมอ
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-12-1024x370.jpg)
การตั้งค่ารูปแบบเมนู
สามารถทำการตั้งค่ารูปแบบเมนูได้โดยการคลิกที่แท็บ “Menu” (ตำแหน่งที่ 1)
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-13-1024x300.jpg)
เลือกรูปแบบเมนูในตำแหน่งที่ 2 โดยมีทั้งหมด 6 รูปแบบ ดังนี้
- กรอบเต็ม
- กรอบพอดีเมนู
- กรอบโค้ง
- เส้นขอบล่าง
- เส้นขอบรอบ
- เส้นขอบมน
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-14-1024x321.jpg)
ตัวอย่างเมนูแบบกรอบเต็ม
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-15-1024x226.jpg)
ตัวอย่างเมนูแบบกรอบพอดีเมนู
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-16-1024x226.jpg)
ตัวอย่างเมนูแบบกรอบโค้ง
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-17-1024x226.jpg)
ตัวอย่างเมนูแบบเส้นขอบล่าง
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-18-1024x226.jpg)
ตัวอย่างเมนูแบบเส้นขอบรอบ
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-19-1024x226.jpg)
ตัวอย่างเมนูแบบเส้นขอบมน
![](https://blog.ketshopweb.com/wp-content/uploads/2020/09/header-layout-20-1024x226.jpg)
Ketshopweb | เครื่องมือร้านค้าออนไลน์ ขายคล่อง ส่งสะดวก ครบในที่เดียว
เรายินดีให้คำปรึกษาการทำเว็บไซต์ฟรี ไม่มีค่าใช้จ่าย
ติดต่อมาที่ 02-038-5588 , email : sales@ketshopweb.com