4. การปรับแต่งหน้า Header

การปรับแต่ง ส่วนหัว(Header)

Header Style การปรับส่วนหัวแบบ Standard (on scroll) 

การปรับแต่งส่วนหัว Header Style แบบ Fixed (on top) ส่วนหัวฟิกอยู่ด้านบนเสมอเมื่อเลื่อนเมาส์ดูเนื้อหาด้านล่างเว็บส่วนหัวจะเลื่อนอยู่ด้านบนเสมอ

การปรับแต่งส่วนหัว Header Style แบบ Overlay (fade background) ส่วนหัวแบบนี้จะเป็นพื้นหลังแบบโปร่งพื้นหลังแบบโปร่ง

เปลี่ยนจากพื้นหลังโปร่งมาเป็นสีที่กำหนดไว้แทน

การเปลี่ยนสีส่วนหัว Overlay (fade background) เลื่อนเมนูบาร์ด้านซ้ายมาที่ For Header Style: Overlay 

เปลี่ยนโลโก้ส่วนหัว (Overlay (fade background))

เมื่อเพิ่มโลโก้ส่วนหัว

Scroll pixels to Fixed Header ปรับความเร็วให้ส่วนหัวปรากฎเมื่อเลื่อนหน้าลงมา โดยนับระยะเป็น pixels

Background (Hide on Overlay) สีพื้นหลังส่วนหัว

Text สีอักษรคำโปรยส่วนหัว

Link สีอักษรลิงก์ส่วนหัว

Link : hover สีอักษรลิงก์ส่วนหัวเมื่อเมาส์ไปชี้หรือคลิก

แต่เมื่อเราใช้ Header Style แบบ Overlay (fade background) เมื่อไปหน้าอื่นที่ไม่ใช่หน้าแรกจะขึ้นเตื่อนให้เพิ่มรูปหรือแบนเนอร์ในวิดเจ็ต

การเพิ่มเบนเนอร์ในวิดเจ็ต รูปแบบเว็บ -> วิดเจ็ต

ลากเมนู SiteOrigin Image ไปไว้ใน Page Banner

คลิกที่ SiteOrigin Image ที่ลากไปไว้ใน Page Banner เพื่ออัพโหลดภาพเบนเนอร์ คลิก Choose Media เพื่ออัพโหลดภาพ

อัพรูปที่ต้องการเพิ่มเป็นเบนเนอร์ คลิก Set Media

เช็คเครื่องหมายหน้า Full Width เพื่อแสดงรูปแบบเต็ม

เมื่อกดบันทึกแล้วรีเฟสหน้าเว็บที่ไม่ใช่หน้าหลักจะเห็นว่ามีเบนเนอร์เพิ่มในส่วนหัว

Has Shadow? เปิด-ปิด เงาของส่วนหัวให้ส่วนหัวมีมิติมากขึ้น

Hide Site Title? เปิด-ปิด หากต้องการที่จะได้แสดงชื่อเว็บไซต์ในส่วนหัว

Hide Tagline? เปิด-ปิด หากต้องการที่จะได้แสดงคำโปรยเว็บไซต์ในส่วนหัว

Background (Hide on Overlay) สีพื้นหลังส่วนหัว(จะไม่แสดงถ้าเลือก Header Style แบบ Overlay (fade background))

Text สีอักษรคำโปรยส่วนหัว ในช่องที่เลือกค่าสีจะมีแทบสีให้ปรับสองช่อง ช่องแรกคือปรับค่าสีส่วนช่องที่สองคือปรับค่าความโปร่งของสี

Link สีอักษรลิงก์บนส่วนหัว ในช่องที่เลือกค่าสีจะมีแทบสีให้ปรับสองช่อง ช่องแรกคือปรับค่าสีช่องที่สองคือปรับค่าความโปร่งของสี

Link : hover สีอักษรลิงก์บนส่วนหัวเมื่อเมาส์ไปชี้หรือคลิก ช่องที่เลือกค่าสีจะมีแทบสีให้ปรับสองช่อง ช่องแรกคือปรับค่าสีช่องที่สองคือปรับค่าความโปร่งของสี

Submenu Border ปรับสีขอบของเมนูย่อย ช่องที่เลือกค่าสีจะมีแทบสีให้ปรับสองช่อง ช่องแรกคือปรับค่าสีช่องที่สองคือปรับค่าความโปร่งของสี

การปรับ Header Style for Mobile เลื่อนส่วนหัวด้านซ้ายที่ For Mobile ด้านล่างสุดของส่วนหัวจะมีไอคอน 3 แบบ คลิกเลือกโทรศัพท์สมาร์ทโฟนแล้วหน้าเว็บจะปรับให้เสมือนใช้งานบนสมาร์ทโฟน

Header Position ตัวเลือกนี้จะเป็นการปรับหน้าเว็บบนสมาร์ทโฟน การตั้งต่าจะเป็นแบบเดียวกับ Header Style 

Menu Style แบบ Dropdown เมนูจะแสดงจากบนลงล่าง

Menu Style แบบ Off Canvas เมนูจะแสดงจากด้านขวา

Menu Icon ขนาดไอคอนเมนู Small 

Menu Icon ขนาดไอคอนเมนู Large (icon only) 

Menu Text ชื่อเมนู

Menu Background สีพื้นหลังเมนู

Menu Link สีลิงก์

Menu Border สีเส้น