Divi: วิธีสร้างแถบเมนูเหนียวจากล่างขึ้นบน

คุณต้องการสร้างแถบนำทางใน Divi ที่ติดจากล่างขึ้นบนของหน้าหรือไม่?

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

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

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

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

การสำรวจ

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

ดาวน์โหลด DIVI ทันที !!!

เริ่มต้นด้วยการสร้างหน้าใหม่ด้วย Divi Builder

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

จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder

จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)

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

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

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

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

อ่าน: Divi: เลือกระหว่างกริดและเลย์เอาต์แบบเต็มความกว้างของโมดูลพอร์ตโฟลิโอที่กรองได้

เพิ่มแถว

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

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

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

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

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

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

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

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

แล้วอัพเดต. เนื้อหา โดยมีส่วนหัว H1 ต่อไปนี้:

<h1>Above the Fold</h1>

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

ภายใต้แท็บ ออกแบบ ในการตั้งค่าโมดูลข้อความ ให้อัปเดตรูปแบบแบบอักษรของส่วนหัวดังนี้:

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

ส่วนที่ 2: การสร้างส่วนใต้ตลิ่ง

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

ในการสร้างส่วน ให้ทำซ้ำส่วนเหนือรอยพับที่เราเพิ่งทำ

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

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

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

• ความสูงขั้นต่ำ: 200vh

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

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

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

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

ขั้นแรก ให้เพิ่มส่วนปกติใหม่ตรงด้านล่างส่วนครึ่งหน้าบน

ต่อไป ให้เพิ่มแถวหนึ่งคอลัมน์ในส่วน

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

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

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

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

• ช่องว่างภายใน: 0px (บนและล่าง)

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

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

• โอเวอร์โฟลว์ในแนวนอน: มองเห็นได้
• โอเวอร์โฟลว์ในแนวตั้ง: มองเห็นได้

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

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

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

สำหรับสิ่งนี้ ให้ส่วนนี้อยู่ในตำแหน่งที่แน่นอนบนแท็บเล็ตและโทรศัพท์

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

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

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

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

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

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

• ช่องว่างภายใน: 10px (บนและล่าง)

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

เมื่อวางส่วนและบรรทัดเรียบร้อยแล้ว เราก็พร้อมที่จะสร้างเมนูการนำทาง

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

เนื้อหาเมนู

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

• เลือกเมนูจากรายการดรอปดาวน์
• เพิ่มภาพโลโก้
• ลบสีพื้นหลังเริ่มต้น

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

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

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

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

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

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

คุณยังสามารถปรึกษา: Divi: วิธีสร้างแถบนำทางที่ติดหนึบ

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

สำหรับตัวอย่างนี้ ความสูงของส่วน navbar คือ 72 พิกเซล

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

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

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

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

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

ผลสุดท้าย

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

ดาวน์โหลด DIVI ทันที !!!

สรุป

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

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

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

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

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ

อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...