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

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

เหมาะอย่างยิ่งสำหรับการสร้างเมนูและป๊อปอัปที่มีโมดูลร้านค้ารูปภาพตัวเลื่อนพอร์ตโฟลิโอไอคอนการแจ้งเตือนวิดีโอบล็อก ฯลฯ นอกจากนี้ยังทำงานร่วมกับ Extra

สร้างเมนู Mega Pro Mega Menu

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

สำนักพิมพ์ - คุณสามารถสร้างเมนูขนาดใหญ่หรือคำแนะนำเครื่องมือโดยใช้ Divi Builder

พื้นหลัง Mega Pro - คุณสามารถเลือกพื้นหลังและสีตัวอักษร

ดูสถานที่ - เลือกหน้าทั้งหมดหรือตั้งชื่อหน้าเฉพาะจากนั้นป้อนข้อยกเว้น

Mega Pro Animation - เลือกภาพเคลื่อนไหว เลือกจากออฟเซ็ตออฟเซ็ตเปอร์สเปคทีฟเฟดหรือสเกล

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

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

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

พารามิเตอร์เพิ่มเติม Mega Pro - เลือกประเภทของทริกเกอร์ (hovered หรือคลิก) ประเภทของผลลัพธ์ (hovered หรือ clicked) และป้อนการหน่วงเวลาออก

รุ่น Divi Mega Pro

ผู้พัฒนาได้จัดเตรียม Divi Mega Pro ไว้หลายรุ่น เมื่อคุณซื้อปลั๊กอินเทมเพลตเหล่านี้จะมีอยู่ในบัญชีของคุณในแท็บ Plugin Layout Templates สิ่งเหล่านี้เหมาะสำหรับการช่วยคุณเริ่มออกแบบเมนูขนาดใหญ่ของคุณ ฉันจะใช้สองสามตัวอย่างในตัวอย่างของฉัน

เมนู Divi Mega Pro

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

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

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

การเพิ่มทริกเกอร์

ในช่อง Mega Pro Triggers คุณจะเห็น Mega Pro คลาสเดียว คัดลอกและวางลงในช่อง CSS Class ของรายการที่คุณต้องการใช้เป็นทริกเกอร์

ในการเพิ่มช่อง CSS Class ในรายการเมนูคุณต้องเปิดใช้งานคลาส CSS จากหน้าจอเมนูให้เลือก ตัวเลือกหน้าจอ และเปิดใช้งาน CSS Classes

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

คุณจะสังเกตเห็นว่า Divi Mega Pro เป็นตัวเลือกในตัวเลือกลิงค์เมนูด้วย เหมาะสำหรับการเพิ่มรายการเมนูลงในเมนูที่ไม่ได้ไปไหนเลย เพิ่มคลาส CSS เหมือนกับรายการเมนูอื่น ๆ

ส่วนติดต่อในเมนู mega

เมนูจะเปิดขึ้นในโฮเวอร์ ฉันสามารถคลิกลิงก์ผู้ติดต่อเพื่อเปิดหน้าติดต่อได้ตลอดเวลาหากต้องการ หากฉันต้องการให้เมนู mega แสดงฉันสามารถใช้ลิงก์เมนูหลักของผู้ติดต่อและเปลี่ยนชื่อได้ (เช่นในตัวอย่างด้านบน)

ในอันนี้ฉันเปลี่ยนสีเล็กน้อยโดยใช้พื้นหลังและการตั้งค่าการแสดงผลแทนที่จะใช้ Divi Builder จะเพิ่มแถบที่ด้านล่างของเมนู

คำกระตุ้นการตัดสินใจง่ายๆด้วยคอลัมน์เมนู

นี่คือหนึ่งในโมเดลที่เพิ่มหลายคอลัมน์ ฉันทำการปรับเปลี่ยนสีพื้นหลังและสีแบบอักษร ฉันยังเพิ่มลูกศรและเพิ่มความกว้าง 75%

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

แท็บ

เทมเพลตแท็บมีโมดูลโค้ดที่มี jQuery เพื่อสร้างเอฟเฟกต์โฮเวอร์

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

รายละเอียดการกำหนดค่า Bubbles

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

ในภาพด้านบนเมาส์ของฉันวางเมาส์เหนือคำว่า LIVE WEBSITE ฉันยังไม่ได้ปรับตำแหน่ง แต่มันง่ายที่จะทำให้มันปรากฏทุกที่ที่คุณต้องการ

สำหรับอันนี้ฉันสร้างป๊อปอัปเพื่อแสดงรูปภาพพร้อมข้อความ ฉันตั้งค่าทิศทางการแสดงเป็นต่ำและเพื่อให้ปรากฏถัดจากรูปภาพที่ฉันต้องการเพิ่มฉันเพิ่มระยะขอบเป็น -300

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

ใบอนุญาตและเอกสาร

คุณมีทางเลือกระหว่างสี่ใบอนุญาต:

• ไซต์เดียว - $ 15 ต่อปี
• สามไซต์ - $ 29 ต่อปี
• ไซต์ไม่ จำกัด - $ 59 ต่อปี
• อายุการใช้งานไม่ จำกัด - $ 129 ต่อครั้ง

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

[vc_row center_row=”ใช่”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลดธีม DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]ดาวน์โหลด TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

บทแนะนำ Divi อื่น ๆ

• เว็บไซต์ 5 สำหรับการใช้งานร้านอาหาร Divi ธีม
• วิธีการเพิ่มข้อความในผลิตภัณฑ์ Divi WooCommerce
• วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
• วิธีปรับเปลี่ยนกริดของบล็อกด้วย Divi
• วิธีการใช้บทบาทของบรรณาธิการ Divi บน WordPress
• วิธีสร้างแถบเลื่อน Divi แบบเต็มหน้าจอ
• วิธีการเปลี่ยนสีของเมนูระหว่างหน้า Divi
• คุณสมบัติที่คุณอาจไม่รู้เกี่ยวกับ Divi
• วิธีการใช้ Divi Builder ใน WordPress
• วิธีใช้โมดูลเลื่อนภาพ Divi
• วิธีการใช้โมดูล Divi Builder Flip
• วิธีการเพิ่มโมดูลข้อความรับรองในตัวสร้าง Divi
• วิธีใช้โมดูลข้อความ Divi
• วิธีสร้างแถบเลื่อนบน Divi
• วิธีแก้ไขบทบาทผู้ใช้ Divi
• วิธีใช้โมดูล Divi Social Media
• วิธีใช้โมดูลร้านค้าในธีม WordPress Divi
• วิธีใช้โมดูลด้านข้าง Divi
• วิธีการใช้โมดูลตารางราคา Divi
• วิธีการใช้โมดูลชื่อเรื่องของสิ่งพิมพ์ของ Divi
• วิธีเพิ่มโมดูลวิดีโอของ Divi
• วิธีใช้โมดูลการนำทางบทความ
• วิธีการใช้โมดูลค้นหา Divi
• วิธีใช้โมดูลกระเป๋าสตางค์ Divi
• วิธีการใช้โมดูลคนบน Divi Builder
• วิธีใช้โมดูลกระเป๋าสตางค์กับตัวกรอง Divi
• วิธีการใช้โมดูลเลื่อนความกว้างเต็ม
• วิธีใช้โมดูล Divi Builder Image
• วิธีใช้โมดูลการนำทางความกว้างเต็มรูปแบบของ Divi Builder
• วิธีการใช้โมดูลคลังภาพ
• วิธีการใช้โมดูลบัตร Divi Builder Full-Width Card
• วิธีใช้โมดูล Divi Full Width Portfolio
• วิธีใช้โมดูลส่วนหัวแบบเต็มความกว้างของ Divi
• วิธีใช้โมดูล Divi Counter
• วิธีใช้แถบเลื่อนบทความบนเครื่องมือสร้าง Divi
• วิธีใช้โมดูล Divi Email Optin