วิธีสร้างปุ่มเมนูแบบเลื่อนลงโดยใช้โมดูลเมนูเต็มความกว้าง Divi

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

ขอเริ่มต้น

การสำรวจ

นี่คือภาพรวมของปุ่มเมนูแบบเลื่อนลงที่เราจะรวมเข้ากับบทช่วยสอนนี้

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

ในการเริ่มต้น หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งาน ธีม Divi ติดตั้งแล้ว (หรือปลั๊กอิน Divi Builder หากคุณไม่ได้ใช้ ธีม Divi). เราจะใช้ตัวสร้าง Divi ในตอนเริ่มต้นเพื่อออกแบบปุ่มเมนูแบบเลื่อนลง

แค่นั้นแหละ !

สร้างเมนูใน WordPress

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

ในตอนนี้คุณสามารถสร้างลิงก์ที่กำหนดเองโดยมี "#" เป็นตัวยึด URL พร้อมกับข้อความลิงก์ได้

จัดโครงสร้างรายการเมนูเพื่อให้รายการเมนูระดับบนสุดมีลิงก์ "เรียนรู้เพิ่มเติม" พร้อมด้วยเมนูย่อยสามรายการ

หลังจากนั้นให้แน่ใจว่าได้บันทึกเมนู

วิธีสร้างปุ่มเมนูแบบเลื่อนลงด้วยโมดูลเมนูเต็มความกว้าง Divi

เมื่อสร้างเมนูแล้วเราสามารถเริ่มออกแบบปุ่มเมนูแบบเลื่อนลงด้วย Divi ในการเริ่มโครงการให้สร้างเพจใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขเพจในส่วนหน้า (ตัวสร้างภาพ)

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

สร้างเนื้อหาปลอม

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

เพิ่มโมดูลข้อความ

จากนั้นเพิ่มโมดูลข้อความลงในบรรทัดที่มีเนื้อหาต่อไปนี้:

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

จากนั้นอัพเดตพารามิเตอร์การออกแบบดังนี้:

ส่วนการแพ็ดดิ้ง

จากนั้นอัปเดตการตั้งค่าส่วนด้วยรายการต่อไปนี้:

• แพ็ดดิ้ง: 0px ลง

ระยะห่างบรรทัดและเส้นขอบ

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

• เบาะ: 10vw ที่ด้านบน, 10vw ที่ด้านล่าง, 5vw ที่ด้านซ้าย, 5vw ที่ด้านขวา
• ความกว้างของเส้นขอบ: 1px

สร้างปุ่มเมนูแบบเลื่อนลง

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

การเพิ่มเมนูแบบเต็มความกว้าง

หากต้องการสร้างโมดูลเมนูแบบเต็มความกว้างให้เพิ่มส่วนแบบเต็มความกว้างใหม่ภายใต้ส่วนมาตรฐานปัจจุบัน

จากนั้นเพิ่มโมดูลเมนูแบบเต็มความกว้างในบรรทัด

ในหน้าต่างป๊อปอัปการตั้งค่าเมนูแบบเต็มความกว้าง (ด้านล่างเนื้อหา) ให้ใช้เมนูแบบเลื่อนลงเพื่อเลือกเมนูที่คุณต้องการแสดง นี่ควรเป็นเมนูเดียวกับที่เราสร้างไว้ก่อนหน้านี้ชื่อว่า "เมนูปุ่มแบบเลื่อนลง"

จากนั้นลบสีพื้นหลังสีขาวเริ่มต้นสำหรับเมนู

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

อัพเดตการออกแบบของส่วนความกว้างเต็ม

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

• การไล่ระดับพื้นหลังด้านซ้าย: # 0047d6
• ไล่ระดับสีพื้นหลังด้านขวาสี: # 45b2ff

• ความกว้างสูงสุด: 240px
• การจัดตำแหน่งมาตรา: ศูนย์

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

• มุมโค้งมน: 5px

บนแท็บขั้นสูงเพิ่ม CSS Class, Overflow และ Z Index ต่อไปนี้

• CSS คลาส: ปุ่มดร็อปดาวน์
• ล้นแนวนอน: มองเห็นได้
• ล้นในแนวตั้ง: มองเห็นได้
• ดัชนี Z: 14

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

ออกแบบเมนู Fulwidth

ตอนนี้เราพร้อมที่จะออกแบบโมดูลเมนู Fulwidth แล้ว เปิดการตั้งค่าโมดูลเมนูความกว้างเต็มและอัปเดตสิ่งต่อไปนี้:

• สร้างลิงค์เมนูแบบเต็มความกว้าง: ใช่
• สีข้อความแบบเลื่อนลง: #ffffff
• สีของข้อความเมนูมือถือ: #ffffff
• การจัดตำแหน่งของข้อความ: ศูนย์
• สีพื้นหลังของเมนูแบบเลื่อนลง: # 45b2ff
• สีของบรรทัดเมนูแบบเลื่อนลง: #ffffff
• สีพื้นหลังของเมนู: #45b2ff

• เมนูแบบอักษร: เข้ารหัสโดยไม่มีกึ่งควบแน่น
• น้ำหนักเมนูแบบอักษร: แบบกึ่งหนา
• สีข้อความของเมนู: #ffffff
• ขนาดข้อความเมนู: 16px
• ระยะห่างของเมนู: 2px
• ภาพเคลื่อนไหวของเมนูแบบเลื่อนลง: ขยาย

วางตำแหน่งปุ่มแบบหล่นลง

สำหรับปุ่มที่จะทับขอบด้านล่างเราจำเป็นต้องเพิ่มระยะขอบด้านลบที่เป็นครึ่งหนึ่งของความสูงของปุ่ม

• มาร์จิ้น: -40.5px สูง

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

การเพิ่ม CSS ที่กำหนดเอง

ก่อนเพิ่ม CSS ที่กำหนดเองตรวจสอบให้แน่ใจว่าได้เพิ่ม CSS ID "ดร็อปดาวน์" ลงในส่วนความกว้างเต็ม (ไม่ใช่โมดูล)

หากไม่มีรหัส CSS CSS ด้านล่างจะไม่ทำงาน

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

.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important; } .dropdown-button .fullwidth-menu li> a {padding-bottom: 0px; บรรทัดความสูง: 81px; } .dropdown-button .fullwidth-menu li li a {padding: 6px 0px; ความสูงบรรทัด: 1.6em; } .dropdown-button .et_mobile_menu li a: hover, .nav ul li a: hover, .dropdown-button .fullwidth-menu a: hover {opacity: 1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! important; } .dropdown-button .fullwidth-menu li {display: block; } .dropdown-button .fullwidth-menu .menu-item-has-children> a: first-child: after {right: 20px; }

นี่คือผลสุดท้าย

คิดสุดท้าย

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