วิธีการจัดกรอบเมนูการนำทางของคุณด้วยตัวแบ่งส่วน

เมนูการนำทางของคุณเป็นสิ่งแรกที่ผู้เข้าชมมองหาเมื่อไปที่ไซต์ของคุณ ด้วยเหตุนี้ เว็บไซต์จึงต้องแน่ใจว่าได้ให้อสังหาริมทรัพย์หลักแก่เว็บไซต์ (ที่ด้านบนของหน้า) ที่สมควรได้รับ แต่ถ้าคุณต้องการทำให้เมนูการนำทางของคุณโดดเด่นขึ้นอีกเล็กน้อย คุณสามารถเพิ่มสีสันด้วยการออกแบบพื้นหลังแบบกำหนดเองได้ ด้วย Visual Builder ของ Divi คุณสามารถสร้างการออกแบบพื้นหลังที่ยอดเยี่ยมด้วยตัวเลือกพื้นหลังตัวแบ่งที่มีอยู่ในทุกส่วนของหน้าของคุณ และด้วยความคิดสร้างสรรค์เพียงเล็กน้อย คุณสามารถใช้พื้นหลังตัวแบ่งเพื่อทำหน้าที่เป็นกรอบเฉพาะสำหรับเมนูการนำทางของคุณ คุณยังสามารถสร้างพื้นหลังเมนูที่ไม่ซ้ำกันสำหรับแต่ละหน้าของเว็บไซต์ของคุณได้อีกด้วย

ในบทช่วยสอนนี้ ฉันจะแสดงให้คุณเห็นว่าการจัดกรอบเมนูการนำทางด้วยการออกแบบพื้นหลังที่สวยงามโดยใช้พื้นหลังตัวแบ่งส่วนนั้นทำได้ง่ายเพียงใด ฉันจะใช้ชุดเลย์เอาต์ร้านขายยาเป็นไซต์ตัวอย่างเพื่อสร้างการออกแบบเหล่านี้

มาเริ่มกันเลย!

แอบมอง

นี่คือตัวอย่างคร่าวๆ ของสิ่งที่สามารถทำได้ด้วยเทคนิคการออกแบบนี้

สิ่งที่คุณต้องการ

สำหรับบทช่วยสอนนี้ สิ่งที่คุณต้องมีจริงๆ มีดังต่อไปนี้:

• ธีม Divi (ติดตั้งและใช้งานอยู่)
• Pharmacy Layout Pack (ชุดเลย์เอาต์ที่สร้างไว้ล่วงหน้าฟรีมีให้ใน Divi Builder)

การตั้งค่าเมนูหลักของคุณในเครื่องมือปรับแต่งธีม

สำหรับบทช่วยสอนนี้ ฉันมีการติดตั้ง Divi ใหม่พร้อมกับเมนูหลักของฉันซึ่งมีหน้าแพ็คเลย์เอาต์ร้านขายยาหกหน้า นี่คือลักษณะของเมนูโดยค่าเริ่มต้น

ดังที่คุณเห็นส่วนหัวมีพื้นหลังสีขาวและอยู่เหนือส่วนแรกของหน้า เมื่อคุณเลื่อนลง ส่วนหัวจะเปลี่ยนเป็นแถบเมนูการนำทางคงที่

แต่สำหรับบทช่วยสอนนี้ ฉันต้องการทำให้พื้นหลังส่วนหัวโปร่งใส เพื่อที่ฉันจะได้เพิ่มพื้นหลังที่กำหนดเองได้ ในการดำเนินการนี้ เราต้องข้ามไปที่เครื่องมือปรับแต่งธีม จากแดชบอร์ดของ WordPress ให้ไปที่ Divi > Theme Customizer จากนั้นจากเมนูเครื่องมือปรับแต่ง ให้ไปที่ ส่วนหัวและการนำทาง > แถบเมนูหลัก

เปลี่ยนสีพื้นหลังให้โปร่งใสโดยลากตัวเลื่อนความโปร่งใสลงมาจนสุด หรือป้อนรหัสสี rgba(255,255,255,0)

ดังที่คุณเห็นพื้นหลังส่วนหัวสีขาวหายไป และส่วนแรกของคุณกระโดดไปที่ด้านบนสุดของหน้าเพื่อใช้เป็นพื้นหลังของส่วนหัวและเมนูหลัก

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

แบบอักษร: มอนต์เซอร์รัต
รูปแบบตัวอักษร: ตัวหนา (B)
สีข้อความ: ขาว
แอ็คทีฟลิงค์สี: ขาว

ย้อนกลับหนึ่งระดับในเมนูเครื่องมือปรับแต่งของคุณแล้วคลิกแท็บการนำทางคงที่ หากคุณกำลังจะใช้งานการนำทางแบบตายตัว คุณสามารถกำหนดสีที่กำหนดเองให้เข้ากับสีของพื้นหลังที่คุณกำหนดเองซึ่งคุณจะสร้างขึ้นในตัวสร้างภาพ หรือคุณสามารถกำหนดสีทั่วไปให้มากขึ้นเพื่อให้คุณสามารถจัดกรอบเมนูหลักของคุณด้วยสีต่างๆ ในแต่ละหน้า ในตอนนี้ ฉันจะใช้รูปแบบสีทั่วไปมากขึ้นสำหรับการนำทางแบบตายตัว อัปเดตสิ่งต่อไปนี้:

สีพื้นหลังของเมนูหลัก: #ffffff
สีของลิงค์เมนูหลัก: rgba(0,0,0,0.61)
สีลิงค์เมนูหลักที่ใช้งานอยู่: #ff5473

ตอนนี้เราพร้อมแล้ว! ตรวจสอบให้แน่ใจว่าคุณเผยแพร่การเปลี่ยนแปลงของคุณ

จัดกรอบเมนูการนำทางของคุณด้วยพื้นหลังตัวแบ่งส่วน

ตัวอย่าง #1

ไปที่โฮมเพจร้านขายยาของคุณและปรับใช้ตัวสร้างภาพ จากนั้นเพิ่มส่วนปกติใหม่โดยไม่มีแถว คอลัมน์ หรือโมดูลใดๆ (คุณไม่จำเป็นต้องใช้) แล้วลากส่วนนั้นไปที่ด้านบนสุดของหน้าของคุณ (ฉันคิดว่าการจัดเรียงส่วนใหม่ในโหมดโครงร่างใหม่ง่ายกว่าเพราะเป็นบล็อกที่ใหญ่กว่า)

กลับไปที่โหมดเดสก์ท็อปเพื่อสิ้นสุดการออกแบบ

เปิดการตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

สไตล์ตัวแบ่งด้านบน: ดูภาพหน้าจอ
ตัวแบ่งสี: #ff5473
ความสูงของตัวแบ่ง: 150px
ตัวแบ่งแนวนอน ทำซ้ำ: 0.8x
ระยะขอบที่กำหนดเอง: -80px ด้านล่าง
ช่องว่างภายในที่กำหนดเอง: 0px บน, 0px ล่าง

สีตัวแบ่งจะเป็นสีชมพูเดียวกับที่ใช้ในเลย์เอาต์ ฉันตั้งค่าตัวแบ่งแนวนอนซ้ำเป็น 0.8x เพื่อให้ตัวแบ่งแผ่ออกเล็กน้อย ระยะขอบด้านล่าง -80px นำส่วนลงมาที่หน้าเพื่อซ่อนพื้นหลังสีขาวของส่วน ส่งผลให้ตัวแบ่งวางกรอบการนำทางทางด้านขวา ตัวแบ่งขยายไปทางซ้ายเพื่อเพิ่มพื้นหลังที่สวยงามให้กับโลโก้ของคุณเช่นกัน

นี่คือลักษณะที่ปรากฏบนเว็บไซต์สด

ตัวอย่าง #2

สำหรับตัวอย่างต่อไปนี้ ฉันจะวางตำแหน่งส่วนเพื่อให้พื้นหลังตัวแบ่งเฟรมเฉพาะเมนูการนำทางแทนที่จะขยายไปยังโลโก้ด้วย ในการทำเช่นนี้ เราจำเป็นต้องกำหนดความกว้างของส่วนของเราและทำให้จัดตำแหน่งชิดขวาเพื่อให้พอดีกับเมนูการนำทาง

ไปที่การตั้งค่าส่วนและอัปเดตสิ่งต่อไปนี้:

(หมายเหตุ: คุณอาจต้องเปิดการตั้งค่าในโหมด wireframe เนื่องจากระยะขอบแบบกำหนดเองของส่วนอาจทำให้เมนูส่วนไม่สามารถคลิกได้ เมื่อคุณเปิดการตั้งค่าในโหมด wireframe แล้ว คุณสามารถเปลี่ยนกลับไปเป็นโหมดมุมมองเดสก์ท็อปได้)

ความกว้าง: 75%
การจัดตำแหน่งส่วน: ขวา
รูปแบบตัวแบ่ง: ดูภาพหน้าจอ
ตัวแบ่งแนวนอน ทำซ้ำ: 1x

นี่คือสิ่งที่ดูเหมือน:

เมื่อเปิดใช้งานการนำทางแบบคงที่ คุณจะเห็นว่าส่วนหัวของเมนูแบบคงที่เปิดใช้งานอย่างไรเมื่อเมนูเริ่มออกจากเฟรม

หากคุณต้องการปิดใช้งานการนำทางแบบคงที่ ให้ไปที่ Divi > ตัวเลือกธีม และปิดใช้งานตัวเลือกแถบการนำทางคงที่ภายใต้การตั้งค่าทั่วไป

หากไม่ได้เปิดใช้งานการนำทางแบบตายตัว เมนูของคุณจะถูกล็อคไว้กับการออกแบบเฟรมของคุณเหมือนกับการเลื่อนของคุณ

ตอบสนอง

เฟรมจะดูดีบนมือถือเช่นกัน

แต่คุณสามารถเลือกซ่อนเฟรมได้ตลอดเวลาโดยกำหนดความสูงของตัวแบ่งส่วนที่กำหนดเองเป็นศูนย์สำหรับเดสก์ท็อปและอุปกรณ์เคลื่อนที่ จากนั้นปรับแต่งเมนูมือถือของคุณในเครื่องมือปรับแต่งธีม

ใช้กรอบสีที่ต่างกันในหน้าต่างๆ

หากต้องการ คุณสามารถเพิ่มสีและการออกแบบที่แตกต่างกันในแต่ละหน้าได้ สิ่งที่คุณต้องทำคือบันทึกส่วนของคุณไปที่ Divi Library และเพิ่มไปยังหน้าอื่นของเว็บไซต์ของคุณ จากนั้นคุณสามารถปรับสีหรือการออกแบบได้ตามต้องการ ความเป็นไปได้ไม่มีที่สิ้นสุด

ความคิดสุดท้าย

การเพิ่มพื้นหลังแบบกำหนดเองให้กับเมนูการนำทางของคุณนั้นค่อนข้างง่ายด้วย Divi Builder สิ่งที่คุณต้องรู้คือการวางตำแหน่งส่วนของคุณเพื่อใช้เป็นพื้นหลังสำหรับเมนูของคุณ และด้วยการตั้งค่านี้ คุณสามารถทดสอบรูปแบบตัวแบ่งต่างๆ เพื่อสร้างเฟรมที่ไม่ซ้ำกันทุกประเภทสำหรับเมนูการนำทางของคุณ และเนื่องจากคุณใช้ส่วนใดส่วนหนึ่ง คุณจึงมีตัวเลือกการออกแบบทั้งหมดของส่วนเพื่อออกแบบเฟรมของคุณ คุณยังสามารถใช้พื้นหลังของส่วนที่เรียบง่ายหรือการไล่ระดับสี และปรับตำแหน่งของส่วนของคุณได้ทุกที่ที่คุณต้องการ

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!