Divi: วิธีสร้างเมนูการนำทางแนวตั้ง

คุณต้องการสร้างเมนูการนำทางแนวตั้งเพื่อให้แสดงรายการเพิ่มเติมในเบื้องหน้าใน DIVI หรือไม่?

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

ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างเมนูการนำทางแนวตั้งโดยใช้ Divi Theme Builder 

สิ่งนี้จะทำให้คุณมีพื้นที่มากขึ้นในการแสดงรายการเมนู WordPress ของคุณ

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

การสำรวจ

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

ไปที่การกวดวิชา

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

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

ในการเริ่มต้น ไปที่แดชบอร์ดของ WordPress และไปที่ Divi > Theme Builder

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

อ่าน: วิธีสร้าง Global Header ด้วย Theme Builder ใน DIVI

การออกแบบเค้าโครงส่วนแนวตั้ง

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

• ความกว้างสูงสุด: 300px
• ส่วนสูง: 100vh

• ระยะขอบด้านใน: 4vh บน, 0px ล่าง

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

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

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

• สถานีคงที่
• ดัชนี Z: 9999

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

overflow: visible !important;

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

ออกแบบเมนูแนวตั้ง

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

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

การเพิ่มบรรทัด

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

ถัดไป อัพเดตพารามิเตอร์บรรทัดดังนี้:

ขนาดและระยะห่าง

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ระยะห่างคอลัมน์: 1
• ความกว้างสูงสุด: 100%
• ความกว้างสูงสุด: 80%

• ระยะขอบภายใน: 3vh บน, 3vh ล่าง

ชายแดน

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

เพิ่มโมดูลเมนู

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

เลือกเมนูที่จะแสดงในแท็บ เนื้อหา.

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

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

• สไตล์: กึ่งกลาง

• เมนูแบบอักษร: Nunito Sans
• สีข้อความเมนู: #535b7c

• ขนาดข้อความของเมนู: 18px (เดสก์ท็อป), 14px (แท็บเล็ตและโทรศัพท์)
• ความสูงของแถวเมนู: 2 em

• สีของแถวแบบเลื่อนลง: #535b7c
• เมนูแบบเลื่อนลงของ Active Link Color: #535b7c

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

• ระยะขอบภายใน: 2vh บน, 2vh ล่าง

เพิ่ม 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: et-vert-menu

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

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

ภายใต้โมดูลเมนู เพิ่มโมดูลรหัส

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

/* Menu de Navigation Style Vertical*/

.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: 10px0!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 alland (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;

}

}

ออกแบบปุ่มและไอคอนติดตามโซเชียลมีเดีย

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

การเพิ่มบรรทัด

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

เพิ่มปุ่ม

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

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

• การจัดตำแหน่งปุ่ม: center

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

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

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

display:block;

width: 100%;

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

display:inherit;

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

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

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

บนแท็บ สไตล์ ให้อัปเดตสิ่งต่อไปนี้:

• การจัดตำแหน่งโมดูล: ศูนย์

• สีไอคอน: #535b7c

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

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

• มาร์จิ้น: 3vh Peak

อัพเดตพารามิเตอร์บรรทัด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ระยะห่างคอลัมน์: 1

• ระยะขอบด้านใน: 3vh บน, 0px ล่าง

บันทึกเลย์เอาต์และเทมเพลต

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

ผลสุดท้าย

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

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

สรุป

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

การตั้งค่าส่วนแนวตั้งยังเปิดประตูสู่การสร้างแถบด้านข้างแบบกำหนดเอง 

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

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

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

...