วิธีสร้างเมนูนำทางแนวตั้ง (หรือส่วนหัว) สำหรับเว็บไซต์ Divi ของคุณ

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

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

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

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการอัปโหลดเทมเพลต ให้ไปที่ Divi Theme Builder ที่ส่วนหลังของเว็บไซต์ WordPress ของคุณ

อัปโหลดเทมเพลตเว็บไซต์เริ่มต้นทั่วโลก

จากนั้น ที่มุมบนขวา คุณจะเห็นไอคอนที่มีลูกศรสองอัน คลิกที่ไอคอน

ไปที่แท็บนำเข้า อัปโหลดไฟล์ JSON ซึ่งคุณสามารถดาวน์โหลดได้ในโพสต์นี้ แล้วคลิก 'นำเข้าเทมเพลต Divi Theme Builder'

บันทึกการเปลี่ยนแปลงตัวสร้างธีม Divi

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

ไปกวดวิชากันเถอะ

ส่วนที่ 1: การสร้างส่วนหัวระดับโลกใหม่

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

ในการเริ่มต้น ไปที่ WordPress Dashboard และไปที่ Divi > Theme Builder

จากนั้นคลิกส่วน "เพิ่มส่วนหัวส่วนกลาง" ของเทมเพลตเว็บไซต์เริ่มต้นและเลือก "สร้างส่วนหัวส่วนกลาง" จากเมนูแบบเลื่อนลง

จากนั้นเลือกตัวเลือก “สร้างตั้งแต่เริ่มต้น”

ส่วนที่ 2: การออกแบบเลย์เอาต์ส่วนแนวตั้ง

ภายใน Global Header Layout Editor ให้เปิดการตั้งค่าของส่วนปกติที่มีอยู่แล้วและอัปเดตสิ่งต่อไปนี้

• ความกว้าง (เดสก์ท็อป): 300px
• ความกว้าง (แท็บเล็ตและโทรศัพท์): 100%

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

• Padding (เดสก์ท็อป): 4vh บน, 0px ด้านล่าง
• Padding (แท็บเล็ตและโทรศัพท์): 0px ด้านบน, 0px ด้านล่าง

ต่อการออกแบบโดยเพิ่ม box-shadow ดังนี้:

• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 0px
• ความแรงของกล่องเงาเบลอ: 20px
• ความแรงของการกระจายเงาของกล่อง: -10px
• เงาสี: rgba(0,0,0,0.3)

เพื่อให้แน่ใจว่าเมนูการนำทางแนวตั้งยังคงมองเห็นได้ทางด้านซ้ายขณะที่ผู้ใช้เลื่อน ให้อัปเดตตำแหน่งเป็นคงที่และอัปเดตดัชนี z ดังนี้:

• ตำแหน่ง: คงที่
• ดัชนี Z: 9999

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

overflow: visible !important;

ตอนนี้ส่วนของคุณอยู่ในรูปแบบแนวตั้งทางด้านซ้ายของเทมเพลต

ตอนที่ 3: การออกแบบเมนูแนวตั้ง

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

นอกจากนี้ เราจะใช้หน่วยความยาว vh เพื่อให้เมนูมีขนาดพอดีกับความสูงของเบราว์เซอร์ที่แตกต่างกัน

การเพิ่มแถว

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

จากนั้นอัปเดตการตั้งค่าแถวดังนี้:

ขนาดและช่องว่างภายใน

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

ชายแดน

• ความกว้างของเส้นขอบ: 1px
• สีขอบ: #eeeeee

การเพิ่มโมดูลเมนู

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

เลือกเมนูที่จะแสดงภายใต้การสลับเนื้อหา

จากนั้นเพิ่มโลโก้ไซต์ของคุณเป็นเนื้อหาแบบไดนามิกภายใต้การสลับโลโก้

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• สไตล์: กึ่งกลาง
• แบบอักษรของเมนู: Nunito Sans
• สีข้อความของเมนู: #535b7c
• ขนาดข้อความของเมนู: 18px (เดสก์ท็อป), 14px (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดเมนู: 2em
• สีของเมนูดร็อปดาวน์: #535b7c
• เมนูแบบเลื่อนลง Active Link Color: #535b7c

• ไอคอนรถเข็นช็อปปิ้งสี: #535b7c
• ค้นหาไอคอนสี: #535b7c
• ไอคอนเมนูแฮมเบอร์เกอร์สี: #535b7c

• Padding (เดสก์ท็อป): 2vh บน, 2vh ด้านล่าง
• Padding (เดสก์ท็อป): 10px บน, 10px ด้านล่าง

ส่วนที่ 4: การเพิ่ม CSS ที่กำหนดเองสำหรับเมนู

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

ลิงค์เมนู CSS (เดสก์ท็อป):

width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;

ลิงค์เมนู CSS (แท็บเล็ต):

width: auto;
border:none;

โลโก้เมนู CSS:

margin-bottom: 20px;

ถัดไป เพิ่มคลาส CSS แบบกำหนดเองให้กับโมดูลเมนูดังนี้:

CSS Class: et-vert-menu

จะถูกใช้เพื่อกำหนดเป้าหมายเมนูนี้โดยเฉพาะใน CSS ที่กำหนดเองภายนอกของเรา เราจะเพิ่มโดยใช้โมดูลโค้ด

การเพิ่ม CSS แบบกำหนดเองด้วย Code Module

ใต้โมดูลเมนู เพิ่มโมดูลโค้ดใหม่

จากนั้นวางโค้ดต่อไปนี้ลงในกล่องโค้ด (อย่าลืมวางไว้ระหว่างแท็กลักษณะ):

/*Style Vertical Navigation Menu*/  
.et-vert-menu .et_pb_menu__menu>nav>ul {
  flex-direction: column;
  margin-left: 0px !important;
  margin-right: 0px !important;
  width: 100%;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li {
  margin: 10px 0 !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {
  display:block !important;
  padding: 0px !important;
  }
  .et-vert-menu .et_pb_menu__menu>nav>ul ul {
    padding: 0px !important;
    top: 0px !important;
  }
.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {
  left:calc(100% - 1px) !important;
  top:0px !important;
  }
.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {
  content: "5" !important; /*change arrow icon for submenu*/
  right: 20px !important;
  }
.et-vert-menu .nav li ul {
    left: calc(100% - 1px) !important; /*align submenu to the right of menu link*/
  }
@media all and (min-width: 981px) {
.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {
    width: 100%; /*width of the vertical navigation menu*/
  }
/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/  
#et-main-area { 
  width: calc(100% - 300px); 
  margin-left: 300px;
}
}

ส่วนที่ 5: การออกแบบปุ่มและโซเชียลมีเดียตามไอคอน

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

การเพิ่มแถว

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

การเพิ่มปุ่ม

จากนั้นเพิ่มโมดูลปุ่มใหม่ในแถว

อัปเดตการตั้งค่าปุ่มดังนี้:

• การจัดตำแหน่งปุ่ม: ศูนย์
• ขนาดข้อความของปุ่ม: 18px (เดสก์ท็อป), 14px (แท็บเล็ตและโทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #535b7c
• ความกว้างของขอบปุ่ม: 0px

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

องค์ประกอบหลัก CSS (เดสก์ท็อป)

display:block;
width: 100%;

องค์ประกอบหลัก CSS (แท็บเล็ต)

display:inherit;

การเพิ่มไอคอนติดตามโซเชียลมีเดีย

ใต้ปุ่ม เพิ่มโมดูลติดตามโซเชียลมีเดีย

เพิ่มเครือข่ายโซเชียลที่คุณต้องการภายใต้แท็บเนื้อหา

ภายใต้แท็บ ออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• การจัดตำแหน่งโมดูล: ศูนย์
• ไอคอนสี: #535b7c

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

จากนั้นเพิ่มระยะขอบด้านบนเล็กน้อยดังนี้:

• ขอบ: 3vh ด้านบน

อัปเดตการตั้งค่าแถว

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

• ความกว้างของรางน้ำ: 1
• Padding (เดสก์ท็อป): 3vh บน, 0px ด้านล่าง
• Padding (แท็บเล็ตและโทรศัพท์): 10px top

บันทึกเค้าโครงและเทมเพลต

เมื่อเสร็จแล้ว ให้บันทึกเลย์เอาต์และเทมเพลต

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายบนหน้าสด

วิธีเพิ่มเมนูการนำทางแนวตั้งไปยังส่วนเนื้อหาของเทมเพลตหน้า

หากคุณต้องการเพิ่มเมนูการนำทางแนวตั้งให้กับเค้าโครงหน้า (แทนที่จะเป็นส่วนหัวส่วนกลาง) คุณต้องบันทึกเค้าโครงส่วนไปยัง Divi Library ก่อน

ในการดำเนินการนี้ ให้เปิด Global Header Layout Editor และบันทึกส่วนแนวตั้ง (ที่มีเมนู) ลงใน Divi Library ของคุณ

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

เลือกเพื่อสร้างตั้งแต่เริ่มต้น

เพิ่มส่วนเต็มความกว้างใหม่ให้กับเค้าโครง

จากนั้นเพิ่มโมดูลเนื้อหาโพสต์แบบเต็มความกว้างในส่วน

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

องค์ประกอบหลัก CSS (เดสก์ท็อป)

width: calc(100% - 300px);
margin-left:300px !important;

องค์ประกอบหลัก CSS (แท็บเล็ต)

width: 100%;

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

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

จากนั้นเปิดโมดูลโค้ดภายในเค้าโครงส่วนและแทนที่ข้อมูลโค้ดนี้...

#et-main-area { 
width: calc(100% - 300px); 
margin-left: 300px;
}

ด้วยสิ่งนี้…

#main-header, #main-footer { 
width: calc(100% - 300px); 
margin-left: 300px;
}

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

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

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

การตั้งค่าส่วนแนวตั้งจะเปิดประตูสำหรับการสร้างแถบด้านข้างแบบกำหนดเองเช่นกัน ฉันหวังว่าสิ่งนี้จะเป็นประโยชน์สำหรับโครงการในอนาคต

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

ไชโย!