ไฮไลท์ปลั๊กอิน Divi: Divi MadMenu

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

Divi Madmenu พร้อมตัวสร้างธีม Divi

Divi Madmenu ได้รับการออกแบบมาโดยเฉพาะเพื่อทำงานกับ Divi Theme Builder เมื่อคุณติดตั้งปลั๊กอินแล้ว ให้ไปที่ Divi Theme Builder คลิก Add Global Header และเลือก Build Global Header เพื่อสร้างส่วนหัวที่กำหนดเองของคุณ

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

เนื้อหา

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

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

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

Mobile Menu Toggle ประกอบด้วยไอคอนและตัวเลือกป้ายกำกับ รวมถึงรูปแบบการสลับ ป้ายกำกับที่ปิดและเปิด และตำแหน่งป้ายกำกับ

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

หากเปิดใช้งานการ ค้นหา คุณสามารถเลือกไอคอนหรือรูปภาพได้

สำหรับ รถเข็น คุณสามารถแสดงไอคอน เนื้อหา หรือไอคอนและเนื้อหา เลือกรูปภาพหรือแสดงโลโก้ เลือกตัวเลือกการมองเห็น อัปเดตสด ฯลฯ

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

ออกแบบ

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

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

องค์ประกอบเค้าโครง ช่วยให้คุณควบคุมการจัดตำแหน่ง ความกว้าง ฯลฯ ของเมนู โลโก้ การค้นหา รถเข็น ปุ่ม 1 และปุ่ม 2

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

ข้อความ

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

นี่คือ ข้อความ: Mobile Menu Toggle มีการปรับแต่งข้อความสำหรับข้อความเปิดและปิด ฉันได้เปลี่ยนสีแบบอักษรและเพิ่มขนาดและระยะห่างระหว่างตัวอักษร

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

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

ข้อความ: ปุ่ม 1 และข้อความ: ปุ่ม 2 มีตัวเลือกเหมือนกันและควบคุมปุ่มแยกกัน ฉันได้เพิ่มขนาดตัวอักษรสำหรับทั้งสองปุ่มและทำให้ปุ่ม 1 ใหญ่ขึ้น ฉันยังเปลี่ยนสีของพวกเขา สำหรับปุ่ม 2 ฉันเลือกแบบอักษรอื่น

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

เมนู

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

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

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

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

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

Divi Madmenu การสาธิต

ปลั๊กอินมาพร้อมกับการสาธิต Madmenu 10 รายการที่คุณสามารถอัปโหลดไปยัง Divi Library การสาธิตหลายรายการมีรูปภาพอยู่ในโฟลเดอร์ คุณจะต้องอัปโหลดไปยังไลบรารีสื่อ

หากต้องการใช้การสาธิตกับ Theme Builder ให้คลิกเพื่อสร้างส่วนหัวส่วนกลาง คลิกเพื่อแทรกส่วนและเลือก เพิ่มจากไลบรารี ตอนนี้คุณสามารถเลือกการสาธิตที่จะใช้ได้

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

สาธิต 1

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

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

สาธิต2

การสาธิต 2 เพิ่มโลโก้ ค้นหาด้วยไอคอนวงกลมที่มีเส้นขอบด้านหนึ่ง เมนูตรงกลาง ตะกร้าสินค้า และปุ่ม ปุ่มทั้งสองปุ่มแสดงโลโก้โซเชียลมีเดีย รายการเมนูย่อยมีสไตล์โดยไม่ขึ้นกับพื้นหลัง

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

สาธิต 3

การสาธิต 3 ทำให้การใช้ปุ่มต่างๆ น่าสนใจ ปุ่ม 1 มีข้อความให้เข้าสู่ระบบหรือลงทะเบียน และมีเอฟเฟกต์โฮเวอร์ที่ลบพื้นหลังเมื่อวางเมาส์ไว้ ปุ่ม 2 ใช้รูปหัวใจที่ลากเส้น

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

สาธิต 5

สาธิต 5 ใช้ช่องว่างระหว่างเลย์เอาต์และแสดงปุ่มเป็น CTA ปุ่มทั้งสองใช้พื้นหลังสีต่างกันเพื่อให้โดดเด่น

เมนูมือถือจะวางปุ่มไว้ทางด้านขวาและซ้ายสุด และเพิ่มไอคอน โลโก้และปุ่มเปิด/ปิดที่มีข้อความและไอคอนอยู่ตรงกลาง

สาธิต7

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

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

สาธิต 8

การสาธิต 8 ประกอบด้วยสีเหลืองตัวหนาพร้อมเมนูดรอปดาวน์และชื่อเรื่องทางด้านซ้าย และเมนูที่มีปุ่มทางด้านขวา ปุ่มแต่ละปุ่มมีกราฟิก

เมนูมือถือวางปุ่มไว้ทางด้านซ้ายและโลโก้และไอคอนเมนูทางด้านขวา

สาธิต 10

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

เมนูมือถือจะลบไอคอนทั้งหมด ยกเว้นไอคอนค้นหา เมนูถูกแทนที่ด้วยไอคอนเปิด/ปิด และโลโก้จะอยู่ตรงกลาง เมนูแบบเลื่อนลงมีลักษณะเหมือนกัน

ซื้อ Divi Madmenu

สามารถซื้อ Divi Madmenu ได้ใน Divi Marketplace ในราคา 39 ดอลลาร์ต่อปีสำหรับการใช้งานไม่จำกัด และอัปเดตและสนับสนุนหนึ่งปี

จบความคิด

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

เราต้องการได้ยินจากคุณ คุณลอง Divi Madmenu แล้วหรือยัง? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็นด้านล่าง

ภาพเด่นผ่าน venimo / shutterstock.com