สั่งซื้อเทมเพลต
คลิปวิดีโอนี้เป็นคู่มือสอน "การจัดการตำแหน่ง BREADCRUMBS" (เส้นทางระบุตำแหน่งของหน้าเว็บ) สำหรับเว็บไซต์ที่ใช้ Template จาก Hitztheme ครับ ซึ่ง Breadcrumbs มีความสำคัญมากในการช่วยให้ผู้ใช้งานรู้ว่ากำลังอยู่ที่ส่วนไหนของเว็บ และยังมีผลดีต่อการทำ SEO (Google Search Console) อีกด้วยครับ [00:44]
สรุปเนื้อหาและขั้นตอนการปรับแต่งมีดังนี้:
1. การเข้าถึงเมนูตั้งค่า [01:20]
- ไปที่หลังบ้านของเว็บไซต์ เลือกเมนู Extensions > Templates > Styles
- คลิกเลือก Template ที่ใช้งาน และไปที่แถบ "ปรับโครงสร้างหน้าอื่นๆ" (Other Page Structure)
- เลื่อนลงมาที่หัวข้อที่ 4 "ส่วน Breadcrumbs" [01:50]
2. การปรับขนาดและการแสดงผล [01:55]
- การใช้งาน: สามารถเปิดหรือปิดการแสดงผล Breadcrumbs ได้ (แนะนำให้เปิดไว้เกือบทุกหน้า ยกเว้นหน้าแรก) [01:59]
- ขนาด (Width): เลือกได้ระหว่าง แบบกึ่งกลาง (Center) เพื่อให้พอดีกับเนื้อหาหลัก หรือ แบบเต็มหน้าจอ (Full Screen) เพื่อให้แถบชิดขอบจอ [02:22]
3. การจัดการพื้นหลัง (Background) [03:06]
- สีพื้นหลัง: เปลี่ยนสีแถบ Breadcrumbs ทั้งหมดให้เข้ากับโทนสีของเว็บไซต์ [04:12]
- การใส่รูปพื้นหลัง: แม้ Breadcrumbs จะเน้นความเรียบง่าย แต่คุณก็สามารถอัปโหลดรูปภาพเพื่อใช้เป็น Background ของแถบนี้ได้ [06:12]
- Background Fix: กำหนดได้ว่าจะให้รูปพื้นหลังเลื่อนตามการสกอร์หน้าจอ หรือให้รูปอยู่กับที่ (Fixed) เพื่อสร้างเอฟเฟกต์ที่สวยงาม [08:40]
- สีพื้นหลังส่วนเนื้อหา (Body Background): กำหนดสีเฉพาะส่วนที่มีข้อความเส้นทางระบุตำแหน่งได้ [04:31]
4. การปรับระยะห่าง (Spacing) [04:58]
- ระยะห่างภายใน (Padding): กำหนดความสูง-ต่ำของแถบ โดยปรับเป็นเปอร์เซ็นต์ (เช่น 1-3%) หรือเป็นพิกเซล (Pixel) ตามความชอบ [05:04]
- ระยะห่างภายนอก (Margin): กำหนดระยะห่างระหว่างแถบ Breadcrumbs กับส่วนประกอบอื่นๆ ของหน้าเว็บ เช่น เว้นระยะด้านบนและด้านล่าง [05:46]
ข้อแนะนำเพิ่มเติม: โดยปกติแล้ว Breadcrumbs จะเน้นการแสดงผลพาร์ท (Path) ของ URL เพื่อให้ผู้ใช้และ Google เข้าใจโครงสร้างเว็บได้ง่าย จึงไม่นิยมใส่ลูกเล่นซับซ้อนมากนัก เพื่อให้เว็บไซต์โหลดได้รวดเร็วและดูสะอาดตาครับ [10:04]
