วิธีสร้าง Mega Menu อันน่าทึ่งบนเว็บไซต์ WordPress ในปี 2022

เผยแพร่แล้ว: 2022-03-10

เมนูเมก้าเป็นตัวเลือกที่ชัดเจนหากคุณต้องการอัพเกรดการนำทางเว็บไซต์ของคุณ

ไม่เพียงแค่ดูเท่เท่านั้น แต่เมนูเด่นยังช่วยให้ผู้เยี่ยมชมค้นหาเนื้อหาของคุณได้ง่ายขึ้นอีกด้วย สิ่งนี้สามารถส่งผลในเชิงบวกต่ออัตราการแปลงตามการวิจัยของผู้เชี่ยวชาญด้าน UX Jakob Nielsen และ Angie Li

เครื่องมือเมนู WordPress mega ที่ดีทำให้ง่ายต่อการเพิ่มเนื้อหาต่างๆ ลงในเมนูแบบเลื่อนลงหรือพื้นที่เมนูที่ขยายได้ พวกเขาสามารถรวมลิงก์ รูปภาพ ปุ่ม และแม้แต่ผลิตภัณฑ์เพิ่มเติม

คุณยังสามารถใช้เมนูของคุณเพื่อเพิ่มปริมาณการเข้าชมหน้าเฉพาะบนไซต์ของคุณ เพิ่มการแปลง และส่งเสริมข้อเสนอ

หากคุณต้องการเพิ่มระดับเมนูของคุณ อ่านต่อเพื่อดูวิธีสร้างเมนูขนาดใหญ่บนเว็บไซต์ WordPress

สารบัญ
  1. เมนูเมก้าคืออะไร?
    • เมนู Mega มีคุณสมบัติอะไรบ้าง?
    • วิธีเพิ่มฟังก์ชัน WordPress Mega Menu ให้กับเว็บไซต์ของคุณ
  2. วิธีสร้าง WordPress Mega Menu ด้วย Astra Pro
    • ติดตั้ง Astra Theme
    • ติดตั้ง Astra Pro Plugin
    • เปิดใช้งานโมดูลเมนูการนำทาง
    • สร้าง WordPress Mega Menu
  3. สรุป

เมนูเมก้าคืออะไร?

เพื่อให้เราทุกคนเข้าใจตรงกัน นี่คือคำอธิบายสั้นๆ ว่าเราหมายถึงอะไรเมื่อเราพูดถึงเมนูเด่น

โดยทั่วไป เมนูเด่นคือเมนูดรอปดาวน์หรือพื้นที่การนำทางที่ขยายได้ ซึ่งมักจะมีมากกว่าลิงก์ข้อความ

เมก้าเมนูคืออะไร

เครดิตภาพ www.next.co.uk

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

เครื่องมือเมนู WordPress mega ที่ดียังทำให้ง่ายต่อการปรับแต่งลักษณะที่ปรากฏโดยการเพิ่มสีที่กำหนดเอง ภาพพื้นหลังและป้ายกำกับ

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

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

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

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

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

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

เมนู Mega มีคุณสมบัติอะไรบ้าง?

คุณลักษณะที่สำคัญที่สุดที่ต้องมองหาเมื่อเลือกเครื่องมือที่จะช่วยให้คุณสร้างเมนูเด่นบนเว็บไซต์ WordPress คือการควบคุมที่จะช่วยให้คุณควบคุมได้มากเพียงใด

คุณต้องการเครื่องมือเมนู WordPress mega เพื่อให้ง่ายต่อการปรับแต่งลักษณะที่ปรากฏ

ความสะดวกในการใช้งานก็ไม่ควรมองข้ามเช่นกัน!

วิธีเพิ่มฟังก์ชัน WordPress Mega Menu ให้กับเว็บไซต์ของคุณ

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

Astra Pro เป็นหนึ่งในเครื่องมือดังกล่าว

มันมีคุณสมบัติทั้งหมดที่คุณต้องการเพื่อเพิ่มเมนูเด่นให้กับเว็บไซต์ WordPress ของคุณ

อย่างที่เราจะได้เห็นกัน มันยังใช้งานง่ายมากอีกด้วย

วิธีสร้าง WordPress Mega Menu ด้วย Astra Pro

Astra Pro เป็นโปรแกรมเสริมระดับพรีเมียมสำหรับธีม Astra WordPress ฟรี การติดตั้งปลั๊กอิน Astra Pro บนเว็บไซต์ WordPress โดยใช้ธีม Astra จะเพิ่มฟังก์ชันการทำงานทั้งหมดที่จำเป็นในการสร้างเมนูขนาดใหญ่ และอีกมากมาย

การใช้ Astra Pro หมายความว่าคุณไม่เพียงแค่เข้าถึงธีมที่ทรงพลังสำหรับเว็บไซต์ของคุณเท่านั้น คุณยังได้รับคุณสมบัติทั้งหมดของปลั๊กอิน WordPress mega menu ระดับพรีเมียมอีกด้วย

หากฟังดูน่าสนใจ ต่อไปนี้คือคำแนะนำเกี่ยวกับวิธีการสร้างเมนูเด่นบนเว็บไซต์ WordPress ด้วย Astra Pro

ติดตั้ง Astra Theme

เนื่องจากธีม Astra มีให้ใช้งานฟรี คุณสามารถเพิ่มลงในเว็บไซต์ของคุณได้โดยตรงจากภายในแดชบอร์ด WordPress ของคุณ

ในการเริ่มต้น เพียงลงชื่อเข้าใช้แดชบอร์ด WordPress จากนั้นคลิกที่รายการเมนู ลักษณะที่ ปรากฏ > ธีม จากแผงแถบด้านข้างทางซ้าย

เมนูลักษณะที่ปรากฏของแดชบอร์ด WordPress

ถัดไป คลิกที่ปุ่ม เพิ่มใหม่ จากหน้าธีม

เพิ่มธีมใหม่ใน WordPress

ตอนนี้ค้นหา Astra จากนั้นคลิกที่ปุ่ม ติดตั้ง

เมื่อติดตั้งธีมแล้ว ให้คลิก เปิดใช้งาน

ติดตั้งธีม Astra จากแดชบอร์ด WordPress

ติดตั้ง Astra Pro Plugin

ในการเพิ่มคุณสมบัติเมนูเด่นให้กับเว็บไซต์ของคุณ คุณจะต้องติดตั้งปลั๊กอิน Astra Pro ด้วย

คุณสามารถซื้อและดาวน์โหลด Astra Pro ได้ที่นี่

เมื่อดาวน์โหลดลงในคอมพิวเตอร์แล้ว คุณสามารถอัปโหลดไปยังแดชบอร์ด WordPress ได้

โดยคลิกที่ Plugins > Add New จากเมนูแถบด้านข้าง

การเพิ่มปลั๊กอินใหม่ใน WordPress

จากนั้นคลิกที่ปุ่ม อัปโหลดปลั๊กอิน และค้นหาตำแหน่งของไฟล์ปลั๊กอิน Astra Pro

อัปโหลดปลั๊กอินใน WordPress

ตอนนี้คลิกที่ปุ่ม ติดตั้ง ทันที

เมื่อติดตั้งปลั๊กอินแล้ว คลิก เปิดใช้งาน และป้อนใบอนุญาตของคุณเพื่อเปิดใช้งานปลั๊กอินอย่างสมบูรณ์

อัปโหลดปลั๊กอิน Astra pro

เปิดใช้งานโมดูลเมนูการนำทาง

พบฟังก์ชันการทำงานของเมนู Astra Pro mega ในโมดูลเมนู Nav ในการสร้างเมนู mega เมนูแรกของคุณ ให้เปิดใช้งานโมดูลนี้จากหน้า Astra Options

ทำได้โดยคลิกที่ Appearance > Astra Options

แดชบอร์ด WordPress เมนูตัวเลือก Astra

จากนั้น จากหน้าตัวเลือก Astra ให้คลิกที่ลิงก์ เปิดใช้งาน สำหรับโมดูลเมนูการนำทาง

เปิดใช้งานโมดูลเมนู Astra Nav

สร้าง WordPress Mega Menu

ตอนนี้ได้เวลาเริ่มสร้างเมนูเมก้าแล้ว ขั้นแรก คลิกที่ ลักษณะที่ ปรากฏ > รายการ เมนู จากเมนูแถบด้านข้าง

รายการเมนูเมนูแดชบอร์ด WordPress

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

จากนั้นคลิกที่ปุ่ม สร้างเมนู

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

ถัดไป เพิ่มหนึ่งรายการขึ้นไปในเมนูโดยเลือกหน้าหรือโพสต์จากแผงด้านซ้ายและคลิก เพิ่มใน เมนู

WordPress เพิ่มรายการในเมนู

ตอนนี้ขยายหนึ่งในรายการที่คุณเพิ่งเพิ่มเข้าไป เช่น หน้า แล้วคลิกปุ่ม การตั้งค่าเมนู Astra

การตั้งค่าเมนูแอสตร้า

จากหน้าจอ Astra Menu Options ที่ปรากฏขึ้น ให้เลือกช่องทำเครื่องหมายเพื่อเปิดใช้งานเมนู mega

เปิดใช้งานเมนูเมก้าโดยใช้ Astra

หลังจากทำเช่นนั้น คุณสามารถเลือกความกว้างสำหรับเมนูเมกะจากเมนูแบบเลื่อนลง

การตั้งค่าความกว้างเมนูเมกะ

คุณยังสามารถตั้งค่าภาพพื้นหลังหรือสีของเมนูเมก้า

หากคุณเปิดใช้งานภาพพื้นหลัง คุณยังสามารถกำหนดวิธีการแสดงได้

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

หากคุณต้องการให้รายการเมนูโดดเด่น คุณสามารถกำหนดป้ายกำกับข้อความแบบกำหนดเองได้ด้วยการตั้งค่าสีของตัวเอง

การตั้งค่าสีพื้นหลังเมนูเมก้า

อีกทางเลือกหนึ่งคือการใช้ Highlight Labels เพื่อเพิ่มข้อความเพิ่มเติมในรายการเมนูของคุณอย่างรวดเร็ว

การตั้งค่าฉลากเมนูเมก้า

หากคุณเพิ่มป้ายกำกับ ป้ายกำกับจะปรากฏถัดจากรายการเมนูที่คุณเพิ่มเข้าไป

ตัวอย่างฉลากเมนูเมก้า

การตั้งค่าขั้นสูงช่วยให้คุณกำหนดระยะขอบและช่องว่างภายในของรายการเมนูได้

การตั้งค่าขั้นสูงเมนูเมก้า

การเพิ่มเมนูย่อยในเมนูเมก้า

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

อย่างไรก็ตาม คุณยังสามารถเพิ่มรายการย่อยไปยังรายการระดับบนสุดได้ดังที่แสดงด้านล่าง:

ตัวอย่างเมนูเมก้า

ในการดำเนินการนี้ ให้เพิ่มรายการอื่นๆ ลงในเมนูของคุณโดยเลือกจากตัวเลือกที่มี

การตั้งค่าโครงสร้างเมนูเมกะ

หลังจากคลิกที่ปุ่ม Add to Menu เพื่อเพิ่มรายการลงในเมนูแล้ว คุณสามารถจัดเรียงรายการเหล่านั้นเพื่อให้เป็นรายการย่อยของรายการด้านบนรายการใดรายการหนึ่งได้

คุณควรลงเอยด้วยโครงสร้างที่คล้ายกับในภาพหน้าจอด้านล่าง

ตัวอย่างโครงสร้างเมนูเมก้า

คุณสามารถปรับแต่งเมนูได้โดยการย้ายรายการไปรอบๆ เปลี่ยนคุณสมบัติการแสดงผล และเพิ่มป้ายกำกับ

การเพิ่มเนื้อหาแบบกำหนดเองลงในเมนูเมก้า

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

การตั้งค่าวิดเจ็ตเมนูเมก้า

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

ตัวอย่างวิดเจ็ตเมนูเมก้า

สรุป

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

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

ไม่ว่าคุณต้องการให้เมนูของคุณดูดีขึ้นหรือดีขึ้นตามเป้าหมาย เมนูเด่นสามารถช่วยคุณได้

มีข้อมูลเพิ่มเติมเกี่ยวกับคุณสมบัตินี้ในหน้าเมนู Astra Pro mega ของเว็บไซต์ของเรา