เว็บไซต์ Wix จาก Scratch - เมนู Header

• อาจ 6, 2024

ในบทช่วยสอนนี้เราจะทำงานบนเว็บไซต์ Wix ของเราที่เราได้เริ่มจากเทมเพลตเปล่า เราจะเพิ่มเมนูหลักในส่วนหัว

ภารกิจแรกของเราคือการเพิ่มพื้นหลังสีให้กับส่วนหัว

1. เลือกส่วนหัวแล้วคลิกปุ่มเปลี่ยนการออกแบบส่วนหัว
   
   ณ จุดนี้ส่วนหัวถูกตั้งค่าเป็นไม่มีสี ลองเปลี่ยนเป็นสีขาวกัน
   
   
2. คลิกการออกแบบส่วนหัวด้านล่างไม่มีสี
   
   
3. คลิกปุ่มออกแบบที่กำหนดเองที่ด้านล่างของหน้าต่าง
   
   
4. ตั้งค่าการเติมสี & ความทึบเป็น 100% สีขาวสำหรับพื้นหลังและพื้นหลังศูนย์
   
   
5. สำหรับการตั้งค่าเส้นขอบให้ตั้งค่าขอบด้านบนและความกว้างเส้นขอบด้านล่างเป็น 0
   
   
6. ตั้งค่ารัศมีของมุมเป็น 0 และปิดใช้งานเงา
   
   

ตอนนี้เราสามารถเพิ่มเมนูด้านบน

1. จากเมนูด้านซ้ายคลิกที่ไอคอนเครื่องหมายบวกแล้วเลือกเมนูจากรายการ
   
   
2. คลิกที่หนึ่งในเมนูแนวนอนเพื่อเพิ่มไปยังหน้า
   
   คุณจะเห็นเมนูใหม่บนหน้าพร้อมลิงค์สำหรับหน้าเดียวของเรา - หน้าหลัก
   
   
3. คลิกและลากเมนูไปที่ส่วนหัว เมื่อคุณเห็นข้อความ แนบกับส่วนหัวเปิดเมนู
   
   เนื่องจากเราจะอยู่ตรงกลางเมนูของเราบนหน้าเราจะขยายกล่องเมนูไปทั่วความกว้าง 980 พิกเซล
   
   
4. เมื่อเลือกกล่องเมนูแล้วให้ลากส่วนท้ายของกล่องเพื่อเติมพื้นที่ 980 ใช้แนวทางด้านซ้ายและขวาเป็นแนวทาง
   
   เมนูควรตั้งค่าไว้ที่กึ่งกลางตามค่าเริ่มต้น คุณสามารถเห็นสิ่งนี้ได้เนื่องจากลิงก์ Home อยู่ตรงกลางของช่อง ตอนนี้เราสามารถปรับแต่งเมนู
   
   
5. เมื่อเมนูยังคงถูกเลือกอยู่ให้คลิกไอคอนออกแบบ (แปรงทาสี) เพื่อเปิดหน้าต่างการออกแบบเมนูแนวนอน คลิกปุ่มออกแบบที่กำหนดเองที่ด้านล่างของหน้าต่าง
   
   หากคุณคลิกที่เติมสี & ความทึบคุณจะเห็นว่าพื้นหลังของเมนูตั้งค่าเป็นสีขาว 100% ลองตั้งค่านี้ต่อไปและไปที่ข้อความ
   
   ในบทช่วยสอนก่อนหน้าเราตั้งค่าฟอนต์เป็น Futura Light สำหรับธีมข้อความหลัก ลองทำเช่นเดียวกันกับเมนู
   
   
6. คลิกที่ไอคอน T เพื่อเปิดส่วนการตั้งค่าข้อความ
   
   
7. คลิกที่ลูกศรทางด้านขวาของส่วนฟอนต์และเลือก Futura Light จากรายการ
   
   ลองตั้งค่าสีเริ่มต้นสำหรับข้อความเมนูปกติ แต่เราจะเปลี่ยนสีข้อความของเมนู Hover และ Clicked เป็น gold
   
   
8. คลิกที่ลิงก์โฮเวอร์ในหน้าต่าง คลิกที่กล่องสีเพื่อเปิดตัวเลือกสี คลิกลิงก์เพิ่มสีเปลี่ยนการตั้งค่าสีเป็น # bc9b5d แล้วคลิกปุ่มเพิ่ม ปิดตัวเลือกสี
   
   
9. ทำซ้ำขั้นตอนก่อนหน้านี้สำหรับการตั้งค่าที่ถูกคลิก แต่คราวนี้คุณสามารถเลือกสีทองได้จากบริเวณ My Colors
   
   สุดท้ายเราต้องการเปลี่ยนข้อความเริ่มต้นสำหรับลิงค์หน้าจาก HOME เป็นชื่อของเว็บไซต์
   
   
10. ขณะที่ยังคงเลือกเมนูอยู่ให้คลิกปุ่มจัดการเมนูจากเมนูป๊อปอัป
    
    
11. จากเมนูหน้าค้นหาหน้าแรกและคลิกลิงก์ทางด้านขวา เลือกเปลี่ยนชื่อจากรายการ เพิ่มชื่อลิงค์ใหม่และคลิกเสร็จสิ้น
    
    งานต่อไปของเราคือการปรับขนาดส่วนหัวให้สูงกว่าความสูงของเมนูเล็กน้อย
    
    
12. เลือกเมนูและลากขึ้นไปด้านบนของพื้นที่ส่วนหัว
    
    
13. คลิกพื้นที่ว่างของส่วนหัวเพื่อดูที่จับยืด ลากที่จับขึ้นด้านบน
    
    

ภาพหน้าจอที่ใช้โดยได้รับอนุญาตจาก Wix.com, Inc.

คำแนะนำวิดีโอ: Wix.com | Menus and Pages Part 1 (อาจ 2024).