ส่วนหัว (Header)คือชุดองค์ประกอบแรกที่ปรากฏให้เห็นเมื่อเว็บไซต์ของคุณโหลด คุณสามารถจัดเรียงองค์ประกอบต่างๆ เช่น โลโก้ เมนูนำทาง และไอคอนโซเชียลมีเดีย ในแบบที่คุณต้องการให้ปรากฏในส่วนหัวได้
ในบทความนี้:
- ส่วนหัวสำหรับเดสก์ท็อป
- ส่วนหัว – ขอบ
- ส่วนหัว – เม็ดยา
- ส่วนหัวสำหรับมือถือ
- ประเภทของส่วนหัว
- องค์ประกอบส่วนหัว
คุณสามารถจัดการรูปแบบส่วนหัว (สำหรับทั้งเดสก์ท็อปและมือถือ) ได้จาก ส่วน การออกแบบ (1)
เมื่อคุณอยู่ในส่วนการออกแบบแล้ว ให้คลิกที่ แท็บ ส่วนหัว (2)
หรือคุณสามารถใช้ตัวเลือกการค้นหาของสตูดิโอได้
- เข้าสู่ ส่วนหัว (1) ในแถบค้นหา
- จากผลลัพธ์ที่เกี่ยวข้อง คลิกที่ การออกแบบ- ส่วนหัวของเว็บไซต์ ตัวเลือก (2)
ส่วนหัวสำหรับเดสก์ท็อป
- เค้าโครงส่วนหัว – ตรวจสอบรูปแบบส่วนหัวที่ใช้ในปัจจุบันสำหรับ เดสก์ท็อป รุ่น. คลิกที่ เปลี่ยนเค้าโครง ปุ่มสำหรับเลือกจากตัวเลือกเค้าโครงส่วนหัวที่มีอยู่ และนำไปใช้กับเว็บไซต์ของคุณ
เรามีโครงร่างส่วนหัวสองประเภท – เค้าโครงส่วนหัวด้านบนและ เค้าโครงส่วนหัวสองคอลัมน์. เค้าโครงส่วนหัวแบบสองคอลัมน์มีอยู่ในธีมเช่น Burst และ Isle - ความกว้าง – ระบุความกว้างของส่วนหัวเป็น ความกว้างเต็ม or ความกว้างของไซต์.
'ความกว้างเต็ม' จะแสดงส่วนหัวโดยครอบคลุมความกว้างทั้งหมดโดยไม่เว้นระยะขอบ
'ความกว้างของไซต์' สามารถระบุได้ใน ออกแบบ ส่วน. คุณสามารถระบุความกว้างคงที่ได้ที่นี่
จะแสดงส่วนหัวโดยยึดตามความกว้างคงที่ที่กำหนด รู้มากขึ้น - Padding แนวตั้ง – เพิ่มช่องว่าง (บนและล่าง) ให้กับส่วนหัวเว็บไซต์ของคุณ (ระบุใน vh) รู้มากกว่านั้น.
- พฤติกรรม – ตำแหน่งของส่วนหัวของเดสก์ท็อปสามารถตั้งค่าได้ Fผสม (ที่นี่ส่วนหัวจะคงที่ด้านบน กล่าวคือ แม้ว่าหน้าจะเลื่อน ส่วนหัวก็จะมองเห็นได้) หรือ เลื่อนด้วยไซต์ (ที่นี่ส่วนหัวจะเลื่อนไปพร้อมกับหน้า)
- การนำทางที่เหนียว – เปิดหรือปิดการนำทางแบบติดหนึบในกรณีที่ Sเลื่อนด้วยไซต์ ตำแหน่งส่วนหัว
- Sticky เมนู – ตั้งค่าตำแหน่งของเมนูแบบติดเมื่อเลื่อนหน้าไปทางซ้ายหรือตรงกลางของหน้าจอ
สำหรับการนำทางแบบติดหนึบ ส่วนหัวจะแสดงหลังจากเลื่อนส่วนเริ่มต้นลงครึ่งหนึ่งบนหน้าจอ
ตรวจสอบการเติมส่วนหัวในการดำเนินการ:
ลองดูส่วนหัว (Header) บนเว็บไซต์จริง ดู สิ
ดูเค้าโครงส่วนหัวของเดสก์ท็อปแบบต่างๆ
ดูรูปแบบส่วนหัวของเดสก์ท็อปแบบ 2 คอลัมน์ที่แตกต่างกัน
เค้าโครงส่วนหัวตามการค้นหาซึ่งเน้นไปที่การค้นหาเว็บไซต์
ส่วนหัว – ขอบ
- ชายแดน: เปิดหรือปิดใช้เส้นขอบสำหรับส่วนหัว
- ความหนา: ระบุความกว้างของเส้นขอบสำหรับส่วนหัว
- ตำแหน่ง: กำหนดตำแหน่งของเส้นขอบส่วนหัว คุณมีสี่ตัวเลือก - ทุกด้าน ด้านบนและล่าง ด้านบนเท่านั้น และด้านล่างเท่านั้น
ส่วนหัว – เม็ดยา
ส่วนหัวรูปทรงแคปซูลใน Pixpa เพิ่มความทันสมัยและเรียบหรูให้กับส่วนหัวของเว็บไซต์ของคุณ ด้วยมุมโค้งมนและความยืดหยุ่นในการเว้นระยะห่าง การออกแบบนี้เหมาะสำหรับนักสร้างสรรค์และมืออาชีพที่ต้องการทำให้ส่วนหัวของเว็บไซต์มีความโดดเด่นและมีสไตล์
คุณสามารถนำสไตล์นี้ไปใช้กับรูปแบบส่วนหัวใดก็ได้ทำให้คุณมีอิสระในการออกแบบอย่างเต็มที่สำหรับส่วนหัวประเภทต่างๆ
- ส่วนหัว – เม็ดยา: เปิดใช้งานส่วนหัว – สลับรูปแบบเม็ดยาเพื่อเปิดใช้งานการจัดรูปแบบเม็ดยาสำหรับส่วนหัวของคุณ
- รัศมีมุม: ปรับความโค้งมนของมุมส่วนหัวโดยใช้แถบเลื่อนหรือฟิลด์รัศมีมุม ค่าที่สูงขึ้นจะทำให้มุมโค้งมนมากขึ้น
- แผ่นรองด้านบน: ระบุช่องว่างเหนือเนื้อหาในส่วนหัวของเม็ดยาเพื่อควบคุมระยะห่างแนวตั้ง
- แผ่นรองด้านล่าง: กำหนดช่องว่างด้านล่างเนื้อหาเพื่อให้แน่ใจว่ามีลักษณะสมดุล
- ความกว้างที่กะทัดรัด: สิ่งนี้ทำให้คุณสามารถเลือกขนาดความกว้างของส่วนหัวยาได้:
- ความกว้างเต็ม: ยืดส่วนหัวให้ครอบคลุมความกว้างหน้าจอทั้งหมด
- ความกว้างไซต์: จัดตำแหน่งส่วนหัวให้ตรงกับความกว้างของเนื้อหาโดยรวมของไซต์ของคุณ
- ขนาดกะทัดรัด: ย่อส่วนหัวให้เหลือบล็อกที่อยู่ตรงกลางที่แน่นขึ้น เหมาะสำหรับการออกแบบที่เรียบง่าย
ส่วนหัวสำหรับมือถือ
การตั้งค่าเหล่านี้ช่วยให้คุณควบคุมลักษณะการแสดงผลส่วนหัวของเว็บไซต์บนอุปกรณ์เคลื่อนที่ ซึ่งจะทำให้เค้าโครงเว็บไซต์ดูสะอาดตาและเหมาะสมที่สุดสำหรับหน้าจอขนาดเล็ก
- แบบ – ตรวจสอบรูปแบบส่วนหัวที่ใช้ในปัจจุบันสำหรับ โทรศัพท์มือถือ รุ่น. คลิกที่ เปลี่ยนเค้าโครง ปุ่มสำหรับเลือกจากตัวเลือกเค้าโครงส่วนหัวที่มีอยู่ และนำไปใช้กับเว็บไซต์ของคุณ
- การบุแนวตั้ง – เพิ่ม พื้นที่แนวตั้ง (บนและล่าง) ไปยังส่วนหัวเว็บไซต์ของคุณบนอุปกรณ์มือถือ (ระบุเป็น vh)
- ส่วนหัวมือถือ – ระบุว่าคุณต้องการให้ส่วนหัวอุปกรณ์เคลื่อนที่ปรากฏเฉพาะบนอุปกรณ์เคลื่อนที่เท่านั้น (สูงสุด 768 พิกเซล) หรือขยายไปยังอุปกรณ์แท็บเล็ตด้วย (สูงสุด 1199 พิกเซล)
อย่าลืมคลิก ปุ่ม เผยแพร่หลังจากทำการเปลี่ยนแปลง เพื่อให้แน่ใจว่าการเปลี่ยนแปลงนั้นปรากฏบนเว็บไซต์ของคุณแล้ว
ดูโครงร่างส่วนหัวของมือถือแบบต่างๆ
- สัญลักษณ์จุดในส่วนหัวของมือถือหมายถึงบัญชีลูกค้า
- จะปรากฏเฉพาะตัวเลือกบัญชีลูกค้าที่เปิดใช้งานในร้านค้าเท่านั้น อ่านเพิ่ม.
ประเภทของส่วนหัว
คุณสามารถเลือกจากส่วนหัวที่แตกต่างกันได้สี่ประเภท:
ส่วนหัวปกติ
เค้าโครงส่วนหัวปกติมีการออกแบบที่สะอาดตาและตรงไปตรงมา พร้อมด้วยโลโก้ ลิงก์การนำทาง ไอคอนโซเชียล และปุ่มเมนูที่แสดงแนวนอน เหมาะอย่างยิ่งสำหรับการมอบประสบการณ์การท่องเว็บแบบคลาสสิกและใช้งานง่าย
ส่วนหัวสองคอลัมน์
เค้าโครงส่วนหัวแบบสองคอลัมน์แบ่งส่วนหัวออกเป็นสองส่วนที่แตกต่างกัน ทำให้มีโลโก้และไอคอนโซเชียลทางด้านซ้ายหรือตรงกลาง และเมนูการนำทางและรายการอื่นๆ ของส่วนหัวทางด้านขวาเป็นแถบด้านข้างที่คลิกได้
เลย์เอาต์นี้เหมาะสำหรับเว็บไซต์ที่ต้องการเน้นทั้งแบรนด์และการดำเนินการที่สำคัญไปพร้อมๆ กัน
ส่วนหัวตามการค้นหา
เค้าโครงส่วนหัวตามการค้นหามีแถบค้นหาอย่างเด่นชัด ทำให้ผู้ใช้สามารถค้นหาเนื้อหาที่ต้องการได้อย่างรวดเร็ว การออกแบบนี้มีประโยชน์อย่างยิ่งสำหรับเว็บไซต์ที่มีเนื้อหาจำนวนมากซึ่งฟังก์ชันการค้นหาเป็นจุดสนใจหลัก
องค์ประกอบส่วนหัว
- โลโก้ / ชื่อไซต์ – องค์ประกอบแรกของส่วนหัวของไซต์คือโลโก้/ชื่อไซต์ ตั้งชื่อเว็บไซต์/อัพโหลดโลโก้เว็บไซต์ สำหรับไซต์ของคุณ
หมายเหตุ หากคุณยังไม่ได้อัปโหลดโลโก้ของไซต์ ชื่อไซต์จะปรากฏที่ส่วนหัวของไซต์ของคุณ นอกจากนี้ หากคุณระบุทั้งสองอย่าง โลโก้ของไซต์จะปรากฏบนส่วนหัวของไซต์ของคุณ - เมนู – องค์ประกอบอื่นของส่วนหัวของไซต์คือเมนู (ลิงก์เมนู) คุณสามารถ จัดลำดับลิงก์การนำทางไซต์ or ลบ/ซ่อนรายการเมนูใดๆ จากเว็บไซต์ของคุณ.
- ไอคอนโซเชียล - คุณสามารถเพิ่ม ไอคอนโซเชียล ที่เชื่อมต่อกับโปรไฟล์โซเชียลมีเดียของคุณไปยังส่วนหัวของไซต์ของคุณ คุณสามารถอัปโหลดไฟล์ ภาพแชร์โซเชียล ที่จะใช้เป็นภาพขนาดย่อเมื่อมีการแชร์เว็บไซต์หรือหน้าเว็บไซต์ใด ๆ บนโซเชียลมีเดีย นอกจากนี้ เลือกตำแหน่งที่ ไอคอนสื่อสังคมออนไลน์ จะแสดงบนเว็บไซต์ของคุณ ตำแหน่งที่ใช้ได้คือส่วนหัว ส่วนท้าย ทั้งสองอย่าง หรือไม่มีเลย
- การค้นหากล่อง - เพิ่ม กล่องค้นหา ที่ช่วยให้ผู้เยี่ยมชมไซต์ของคุณสามารถค้นหาเนื้อหาใดๆ ในผลิตภัณฑ์ (หากคุณเปิดใช้งาน Store บนเว็บไซต์ของคุณ) รูปภาพ โพสต์ในบล็อก และเพจ (แกลเลอรี โฟลเดอร์ และหน้าอื่นๆ) ในส่วนหัวของไซต์ของคุณ
- ไอคอนรถเข็น - เพิ่มการลอยตัว ไอคอนรถเข็น ที่เข้าถึงได้ง่ายและมองเห็นได้ตลอดเวลาโดยไม่รบกวนเว็บไซต์ของคุณไปยังส่วนหัวของเว็บไซต์
- ปุ่มเมนู - เพิ่ม ปุ่มเมนู ไปยังส่วนหัวของไซต์ เช่น ปุ่มกระตุ้นให้ดำเนินการซึ่งเปลี่ยนเส้นทางไปยัง URL ที่ระบุ คุณสามารถระบุ ฉลาก และ URL สำหรับปุ่มเมนู นอกจากนี้ยังเลือก ขนาดปุ่ม ที่จะ เล็ก กลาง หรือใหญ่