วิธีทำให้การนำทางมาตรฐานและแนวตั้งทับซ้อนกันบนเว็บไซต์ Divi ของคุณ

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

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

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

ผลลัพธ์

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

แรงบันดาลใจสำหรับการนำทางมาตรฐานและแนวตั้งที่ทับซ้อนกัน

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

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

เราได้รับแรงบันดาลใจจากเว็บไซต์ของ Alex Brands ที่ใช้เมนูรองที่ด้านบนและการนำทางแนวตั้งที่ด้านซ้ายของหน้า

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

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

วิธีทำให้การนำทางมาตรฐานและแนวตั้งทับซ้อนกันบนเว็บไซต์ Divi ของคุณ

สมัครสมาชิกช่อง Youtube ของเรา

ขั้นตอนทั่วไป

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

โดยไม่มีกำหนดชำระเพิ่มเติม มาเริ่มกันเลย.

สร้างเมนูของคุณและเพิ่มรายการเมนู

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

ดำเนินการต่อโดยเพิ่มรายการเมนูและทำให้เป็นเมนูหลักของคุณ

เพิ่มไอคอนโซเชียลลงในเมนูรอง

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

หากต้องการเปิดใช้งานเมนูรองและทำให้ไอคอนโซเชียลปรากฏขึ้น ให้เริ่มต้นด้วยการไปที่ แดชบอร์ด WordPress > ปรับแต่ง > ส่วนหัวและการนำทาง > องค์ประกอบส่วนหัว > เปิดใช้งานตัวเลือก 'แสดงไอคอนโซเชียล'

เปิดใช้งานการนำทางแนวตั้ง

ขั้นตอนต่อไปที่คุณต้องทำคือเปิดใช้งานการนำทางแนวตั้งภายในเครื่องมือสร้าง Divi ของคุณ โดยไปที่ แดชบอร์ด WordPress > ลักษณะที่ปรากฏ > ปรับแต่ง > ส่วนหัวและการนำทาง > รูปแบบส่วนหัว > เปิดใช้งานการนำทางแนวตั้ง

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

ปิดใช้งานการนำทางคงที่สำหรับเมนูหลักของคุณ

ก่อนที่เราจะไปยังการแก้ไขขั้นสูง เหลือสิ่งสุดท้ายที่ต้องทำ: การปิดใช้งานการนำทางคงที่สำหรับเมนูหลักของคุณ หากคุณปิดใช้เมนูหลักไปแล้ว ให้ข้ามขั้นตอนนี้ อย่างไรก็ตาม หากเมนูหลักของคุณได้รับการแก้ไขแล้ว ให้ไปที่ WordPress Dashboard > Divi > Theme Options > และปิดการใช้งานการนำทางแบบคงที่

รวมการนำทางมาตรฐานและแนวตั้ง

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

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

เพิ่มโค้ด CSS ให้กับตัวเลือกธีม

คุณสามารถเพิ่มโค้ด CSS ได้สองวิธี: ผ่านตัวเลือกธีมของ Divi หรือผ่านเครื่องมือปรับแต่งธีม หากต้องการเพิ่มโค้ดในตัวเลือกธีม ให้ไปที่ แดชบอร์ด WordPress > Divi > ตัวเลือกธีม > ทั่วไป > เลื่อนลงมาที่แท็บและวางโค้ด CSS ต่อไปนี้ลงในช่อง Custom CSS:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

เพิ่มโค้ด CSS ให้กับเครื่องมือปรับแต่งธีม

ความเป็นไปได้อื่น ๆ ที่คุณมีคือการเพิ่มบรรทัดโค้ด CSS ให้กับ Theme Customizer โดยไปที่ แดชบอร์ด WordPress > ลักษณะที่ปรากฏ > ปรับแต่ง > CSS เพิ่มเติม > และวางบรรทัด CSS ลงในฟิลด์ CSS ที่กำหนดเอง:

@media screen and (min-width: 769px) {.et_vertical_nav #top-header, .loaded.et_vertical_nav #top-header {
margin-left: 0 !important; 
z-index: 10000;
position: fixed;
width: 100%;
}
.et_vertical_nav #main-header {
position: absolute;
z-index: 1!important;
overflow: hidden;
}
#et-main-area {
width: auto !important;
}
#main-footer {
margin-left: -225px !important;
left: 0 !important;
z-index: 1000 !important;
position: absolute;
width: 117.4%;
height: auto;
}}

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

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

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

ภาพเด่นโดย Line design / shutterstock.com