ไฮไลท์ปลั๊กอิน Divi – เครื่องมือปรับแต่งเมนูมือถือ

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

ในไฮไลต์ของปลั๊กอินนี้ เราจะดูที่เครื่องมือปรับแต่งเมนูมือถือจาก Divicio.us และดูสิ่งที่สามารถทำได้และผลกระทบที่จะมีต่อเวลาในการโหลดเว็บไซต์ของคุณ รูปภาพในตัวอย่างเหล่านี้นำมาจาก Unsplash.com

การติดตั้งเครื่องมือปรับแต่งเมนูมือถือ

คุณต้องแตกไฟล์ที่ดาวน์โหลดมาก่อน ภายในนั้น คุณจะเห็นสามไฟล์:

1. บันทึกการเปลี่ยนแปลง
2. Divi-มือถือ-เมนูปรับแต่ง
3. README

อัปโหลดและเปิดใช้งานไฟล์ divi-mobile-menu-customizer

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

ใหม่ การตั้งค่าปรับแต่งธีม

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

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

การตั้งค่าส่วนหัวของเมนูรวมถึงการตั้งค่าสำหรับสีพื้นหลังส่วนหัว สีข้อความและไอคอน รูปแบบไอคอน พิมพ์ข้อความสำหรับเมนูเปิดและปิด ขนาดข้อความ ขนาดไอคอน รูปแบบแบบอักษรของแถบเมนู และออฟเซ็ตด้านบนของเมนูดรอปดาวน์

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

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

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

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

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

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

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

การตั้งค่ารายการเมนูใช้กับแต่ละรายการภายในเมนู ปรับระยะขอบ ความสูง สีพื้นหลัง ความกว้างของเส้นขอบ รัศมีเส้นขอบ และสีเส้นขอบ

ในตัวอย่างนี้ ฉันได้เพิ่มระยะขอบเป็น 4 ตั้งค่าความสูงของรายการเป็น 22 ตั้งค่าความกว้างของเส้นขอบเป็น 5 และรัศมีเส้นขอบเป็น 8 เพื่อให้มุมโค้งมนเล็กน้อย

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

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

เงา

เงาช่วยให้คุณควบคุมทิศทางเข้าและออก ออฟเซ็ต X และ Y เบลอ กระจาย และสี ฉันได้ตั้งค่านี้เพื่อเริ่มด้วย X-offset ที่ 20, Y-offset ที่ -17, Shadow blur ที่ 5 และการแพร่กระจายที่ 10 ฉันยังทำให้มืดลงเพื่อให้โดดเด่น

ไล่โทนสี

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

นี่คือลักษณะการไล่ระดับสีของเมนู

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

แอนิเมชั่น

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

อันนี้ใช้ Fade In Right และ Fade Out Left

อันนี้ใช้ Grow and Shrink

อันนี้ใช้ Flip In X และ Flip Out Y

อันนี้ใช้ Lightspeed In และ Fade Out

การใช้การตั้งค่าร่วมกัน

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

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

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

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

ตัวอย่างนี้ใช้ออฟเซ็ตด้านบนของเมนูดรอปดาวน์ที่ 100 และไม่ได้รับการแก้ไข การเว้นวรรคตัวอักษรและขนาดตัวอักษรเกินขีดจำกัดแล้ว รัศมีเส้นขอบของเมนูถูกตั้งค่าเป็น 50 และความกว้างของเส้นขอบถูกตั้งค่าเป็น 5 ข้อความถูกจัดชิดขวา พื้นหลังเป็นสีขาวที่มีความทึบ 30

ความกว้างของเส้นขอบของรายการเมนูคือ 1 และรัศมีคือ 25 ฉันเคยใช้พื้นหลังสีดำเหมือนกัน แต่มีความทึบเป็น .08 และความทึบของเส้นขอบคือ .12

การตั้งค่าเมนูย่อยมีความทึบพื้นหลัง .55 และแบบอักษรสีขาว เงามีความโดดเด่นเพียงเล็กน้อยโดยใช้สีดำแบบเดิมที่มีความทึบแสงที่ .17 ค่าชดเชยเงาถูกตั้งค่าเป็น 16 สำหรับทั้ง x และ y ฉันได้วางการไล่ระดับสีในส่วนหัวโดยใช้สีดำที่มีเฉดสีและความทึบหลายระดับ

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

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

อัปเดต – การตั้งค่าใหม่สองรายการ

ก่อนเผยแพร่บทความนี้ มีการเพิ่มการตั้งค่าใหม่สองรายการ: ภาพพื้นหลังและไอคอนเมนู

การตั้งค่าภาพพื้นหลัง

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

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

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

เครื่องมือปรับแต่งเมนูมือถือ PageSpeed ​​​​Test

เนื่องจากปลั๊กอินแสดงผลจำนวนมากโดยเปิดใช้งานคุณลักษณะทั้งหมด ฉันจึงตัดสินใจทดสอบโดยใช้ PageSpeed ​​Insights เมื่อปิดใช้งานปลั๊กอิน เซิร์ฟเวอร์ทดสอบของฉันจะได้คะแนน 70 ฉันไม่ได้ใช้ปลั๊กอินลดขนาดหรือแคช

เมื่อเปิดใช้ปลั๊กอิน คะแนนเพิ่มขึ้นจาก 70 เป็น 69 ฉันลองทดสอบสองครั้งและได้ผลลัพธ์เหมือนกันทั้งสองครั้ง มีค่า 1 คะแนนที่จะมีการปรับแต่งระดับนี้

ใบอนุญาต

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

ความคิดสุดท้าย

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

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

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

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