วิธีสร้างแถบนำทางจากล่างขึ้นบนแบบเหนียวใน Divi

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

ขอเริ่มต้น!

การสำรวจ

เพื่อช่วยให้คุณเห็นภาพผลลัพธ์ที่เรากำลังพยายามบรรลุ มาดูผลลัพธ์สุดท้ายกันดีกว่า:

ดาวน์โหลดเค้าโครงฟรี

เพื่อให้ได้ลงมือออกแบบในบทช่วยสอนนี้ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่อผู้รับจดหมาย Divi Daily ของเราโดยใช้ ฟอร์ม ด้านล่าง. ในฐานะสมาชิกใหม่ คุณจะได้รับสิทธิประโยชน์จาก Divi มากยิ่งขึ้นและชุด Divi Layout ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อนี้แล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ในการนำเข้าเค้าโครงของส่วนไปยังไลบรารี Divi ของคุณ ไปที่ไลบรารี Divi

คลิกที่ปุ่มนำเข้า

ในหน้าต่างป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ที่จะดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกที่ปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงของส่วนต่างๆ จะพร้อมใช้งานใน Divi Builder

เกี่ยวกับกวดวิชา คุณจะ?

สิ่งที่คุณต้องเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งาน ธีม Divi.
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi

สร้างแถบการนำทางจากล่างขึ้นบนที่เหนียวหนึบใน Divi

ส่วนที่ 1: การสร้างส่วนและส่วนหัวเหนือตลิ่ง

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

เพิ่มแถว

ในการเริ่มต้น ให้เพิ่มแถวลงในคอลัมน์ในส่วนเริ่มต้น

การตั้งค่ามาตรา

ก่อนเพิ่มโมดูล ให้เปิดการตั้งค่าส่วนและเพิ่มพื้นหลังดังนี้:

• สีพื้นหลัง: # e9f9ff
• ภาพพื้นหลัง: [เพิ่มรูปภาพ]

บนแท็บ ออกแบบ ให้อัปเดตความสูงขั้นต่ำและช่องว่างภายใน

• ความสูงขั้นต่ำ: 100 vh (คอมพิวเตอร์เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)
• Padding: บน 20vh ล่าง 20vh

ข้อความส่วนหัว

หากต้องการสร้างข้อความส่วนหัว ให้เพิ่มโมดูลข้อความใหม่ลงในบรรทัด

จากนั้นอัปเดตเนื้อหาด้วยส่วนหัว H1 ต่อไปนี้:

<h1>Above the Fold</h1>

การตั้งค่าข้อความ

บนแท็บออกแบบของการตั้งค่าข้อความ ให้อัปเดตลักษณะฟอนต์ของหัวเรื่องดังนี้:

• แบบอักษรของชื่อเรื่อง: Rubik
• น้ำหนักแบบอักษรของส่วนหัว: กึ่งหนา
• TT Header Font Style
• การจัดแนวข้อความส่วนหัว: Center
• ชื่อข้อความสี: # 302ea7
• ขนาดข้อความชื่อเรื่อง: 130px (เดสก์ท็อป), 70px (แท็บเล็ต), 40px (โทรศัพท์)
• ระยะห่างของตัวอักษรส่วนหัว: 2px
• ความสูงของบรรทัดหัวเรื่อง: 1,3 em

ส่วนที่ 2: การสร้างส่วนภายใต้ส่วนพับ

เพื่อแสดงฟังก์ชันการทำงานของแถบการนำทางที่ติดหนึบ เราจำเป็นต้องเพิ่มส่วนด้านล่างครึ่งหน้าล่างเพื่อให้เรามีที่ว่างให้เลื่อน

ในการสร้างส่วน ให้ทำซ้ำส่วนเหนือตลิ่งที่เราเพิ่งสร้างขึ้น

อัปเดตพื้นหลังของส่วนที่ซ้ำกัน

• สีพื้นหลัง: # f4def1

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

จากนั้นอัปเดตเนื้อหาของโมดูลข้อความโดยแทนที่คำว่า "ด้านล่าง" ด้วย "ด้านบน"

ส่วนที่ 3: สร้างแถบการนำทางที่ติดหนึบ

ในการสร้างแถบการนำทางแบบติดหนึบจากล่างขึ้นบน ขั้นตอนแรกของเราคือการสร้างส่วนใหม่ที่มีหนึ่งแถวต่อหนึ่งคอลัมน์

เพิ่มส่วนใหม่และบรรทัดใหม่

เพิ่มส่วนปกติใหม่โดยตรงด้านล่างส่วนเหนือตลิ่ง

จากนั้นเพิ่มแถวลงในคอลัมน์ในส่วน

พื้นหลังของส่วนและช่องว่างภายใน

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

• สีพื้นหลัง: # 302ea7

จากนั้นลบช่องว่างด้านบนและด้านล่างเพื่อให้แถบนำทางมีความสูงน้อยลง

• เติม: 0px ด้านบน, 0px ด้านล่าง

เพิ่มล้นที่มองเห็นได้

เพื่อให้แน่ใจว่าเมนูแบบเลื่อนลงจะยังคงปรากฏให้เห็น ให้อัปเดตตัวเลือกการมองเห็นดังต่อไปนี้:

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

ให้ส่วนนี้มีตำแหน่งที่แน่นอนบนมือถือ

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

เมื่อต้องการทำสิ่งนี้ ให้กำหนดตำแหน่งที่แน่นอนของส่วนนี้บนแท็บเล็ตและโทรศัพท์

• ตำแหน่ง: ญาติ (คอมพิวเตอร์เดสก์ท็อป), แอบโซลูท (แท็บเล็ตและโทรศัพท์)

เพิ่มตำแหน่งติดหนึบสำหรับเดสก์ท็อปและมือถือ

ในการเพิ่มตำแหน่งติดหนึบในส่วนแถบนำทาง ให้อัปเดตสิ่งต่อไปนี้:

• ตำแหน่งติดหนึบ: ติดบนและล่าง (เดสก์ท็อป), ติดบน (แท็บเล็ตและโทรศัพท์)

อัพเดทการเติมแถว

เมื่อส่วนติดหนึบเสร็จแล้ว ให้เปิดการตั้งค่าแถวภายในส่วนและอัปเดตการเติมดังนี้:

• Padding: 10 พิกเซลที่ด้านบน, 10 พิกเซลที่ด้านล่าง

สร้างเมนูนำทาง

ด้วยส่วนและแถวในตำแหน่งที่เราพร้อมที่จะสร้างเมนูการนำทาง

เริ่มต้นด้วยการเพิ่มโมดูลเมนูในแถวในคอลัมน์

เนื้อหาเมนู

อัพเดทเนื้อหาเมนูดังนี้:

• เลือกเมนูจากรายการดรอปดาวน์
• เพิ่มรูปภาพโลโก้ (ฉันใช้รูปภาพขนาด 122px x 52px)
• ลบสีพื้นหลังเริ่มต้น

บนแท็บ ออกแบบ ให้อัปเดตการตั้งค่าข้อความและไอคอนของเมนูต่อไปนี้:

• สีลิงก์ที่ใช้งานอยู่: #fff
• แบบอักษรของเมนู: Rubik
• รูปแบบตัวอักษรของเมนู: TT
• สีข้อความของเมนู: #fff
• ขนาดข้อความเมนู: 16px
• การจัดตำแหน่งข้อความ: right
• สีบรรทัดเมนูแบบเลื่อนลง: # e19dff
• สีข้อความเมนูมือถือ: # 302ea7
• สีไอคอนรถเข็นช็อปปิ้ง: #fff
• ค้นหาไอคอนสี: #fff
• สีไอคอนเมนูแฮมเบอร์เกอร์: #fff

การใช้เส้นขอบเพื่อชดเชยตำแหน่งที่แน่นอนของแถบการนำทางบนมือถือ

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

ตรวจสอบความสูงของส่วนแถบนำทางบนมือถือ

หากต้องการกำหนดความสูงของแถบนำทางบนอุปกรณ์เคลื่อนที่ ให้เปิดหน้าเว็บเวอร์ชันใช้งานจริงในหน้าต่างเบราว์เซอร์ใหม่ จากนั้น คุณสามารถลดความกว้างของเบราว์เซอร์ให้ต่ำกว่า 980px เพื่อดูเมนูมือถือ คลิกขวาที่ส่วนที่มีเมนูและเลือกตัวเลือกตรวจสอบรายการจากเมนูบริบทของเบราว์เซอร์ คุณควรเห็นกล่องเครื่องมือใต้ส่วนที่แสดงขนาด (รวมความสูง) ของส่วน สำหรับตัวอย่างนี้ ความสูงของส่วนแถบนำทางคือ 72px

เพิ่มออฟเซ็ตขอบด้านบนให้กับส่วนเหนือส่วนพับ

ตอนนี้เราได้กำหนดความสูงของส่วนแล้ว ให้เปิดการตั้งค่าสำหรับส่วนบน (ครึ่งหน้าบน)

ภายใต้แท็บ Design ให้เพิ่มเส้นขอบบนทั้งบนแท็บเล็ตและโทรศัพท์ดังต่อไปนี้:

• ความกว้างขอบด้านบน: 72px (แท็บเล็ตและโทรศัพท์)
• สีขอบบน: # 302ea7

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

ผลสุดท้าย

ค้นพบผลลัพธ์สุดท้าย!

คิดสุดท้าย

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

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

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

เพื่อสุขภาพของคุณ!