สั่งซื้อเทมเพลต
คลิปวิดีโอนี้เป็นคู่มือสอน "การจัดการตำแหน่ง HEAD (ส่วนหัวของเว็บไซต์)" สำหรับผู้ใช้งาน Template ของ Hitztheme ซึ่งเป็นส่วนที่สำคัญที่สุดส่วนหนึ่งเพราะประกอบด้วยโลโก้และเมนูหลักครับ
สรุปเนื้อหาและขั้นตอนการปรับแต่งมีดังนี้:
1. การเข้าถึงเมนูตั้งค่า [00:42]
- ไปที่หลังบ้านของเว็บไซต์ เลือกเมนู Extensions > Templates > Styles
- คลิกเลือก Template ที่ใช้งาน และไปที่แถบ "ปรับโครงสร้างหน้าแรก" (Home Page Structure)
- หัวข้อที่ 2 คือ "ส่วน Head" ซึ่งประกอบด้วย 3 ตำแหน่งหลัก: โลโก้ (Logo), เมนู (Menu) และ โปรโมท (Promote) [01:18]
2. การปรับแต่งภาพรวมส่วน Head [01:33]
- การแสดงผล: เลือกเปิด/ปิดส่วน Head ทั้งหมดได้
- ขนาด (Width): เลือกได้ระหว่าง Center (กึ่งกลางหน้าจอ) หรือ Full Screen (เต็มหน้าจอชิดขอบ) [02:02]
- สีพื้นหลัง (Background): สามารถกำหนดสีของแถบ Head ทั้งหมด และเลือกใส่สีเฉพาะส่วนเนื้อหา (Head Body) ได้ ซึ่งเหมาะสำหรับการทำเว็บแบบ Center [03:01]
- ระยะห่าง (Padding): ปรับความหนาของแถบ Head ได้โดยกำหนดระยะ บน-ขวา-ล่าง-ซ้าย [04:31]
- สีตัวอักษรและลิงก์: กำหนดสีข้อความปกติ สีลิงก์ และสีเมื่อเอาเมาส์ไปชี้ (Hover) [05:01]
3. การจัดวางตำแหน่ง (Grid System) [06:01]
ส่วน Head จะถูกแบ่งพื้นที่ออกเป็น 12 ช่อง (Columns) ซึ่งคุณสามารถปรับขนาดแต่ละส่วนได้ (รวมกันต้องได้ 12):
- ค่าเริ่มต้น (Default): โลโก้ (2), เมนู (7), โปรโมท (3) [06:13]
- เมนู (Menu) จะถูกเผื่อพื้นที่ไว้มากที่สุดเพื่อให้ใส่รายการเมนูได้เยอะ [06:22]
4. การปรับแต่งเมนู (DJ-Mega Menu) [07:33]
คลิปเน้นการปรับแต่งเมนูที่ใช้ร่วมกับโมดูล DJ-Mega Menu ซึ่งปรับได้ละเอียดมาก:
- Level 1 (เมนูหลัก): ปรับขนาดฟอนต์, ความหนา, สีตัวอักษร, สีพื้นหลังปุ่มเมื่อ Hover และระยะห่างภายในไอเทมเมนู [08:06]
- Menu Description: ปรับสีของคำอธิบายใต้เมนูหลักได้แยกต่างหาก [11:10]
- Level 2 (เมนูย่อย/Sub Menu): ปรับสีพื้นหลัง, สีตัวอักษร และสีสถานะ Active (สีของเมนูในหน้าปัจจุบันที่เรากำลังเปิดดูอยู่) เพื่อให้ผู้ใช้ทราบว่าตนเองอยู่ที่หน้าไหน [11:42]
5. ส่วนโปรโมท (Promote) [13:01]
- สามารถกำหนดการชิดซ้าย-ขวา-กลาง ของข้อมูลในส่วนโปรโมท (เช่น ปุ่มติดต่อ หรือเบอร์โทร) ได้อิสระ
ข้อแนะนำเพิ่มเติม: หากคุณปรับแต่งสีจนรู้สึกว่าไม่ลงตัว สามารถลบค่าในช่องนั้นๆ ให้ว่างแล้วกด Save เพื่อให้ระบบดึงค่าเริ่มต้น (Default) กลับมาใช้ได้ทันทีครับ [06:44]
