วิธีเพิ่มประสิทธิภาพโมดูลเมนูของ Divi ด้วย 5 Global Presets (ดาวน์โหลดฟรี)

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

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

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

ดาวน์โหลดเค้าโครงฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการใช้ค่าที่ตั้งไว้ล่วงหน้าของเมนูเหล่านี้บนส่วนหัวส่วนกลางของคุณ ก่อนอื่นคุณต้องนำเข้าเค้าโครง (ด้วยค่าที่ตั้งล่วงหน้า) ไปยัง Divi Library ดังนี้:

1. ไปที่ Divi> Divi Library
2. คลิกปุ่มนำเข้า/ส่งออกที่ด้านบนของหน้า
3. เลือกแท็บนำเข้าในป๊อปอัปการพกพา
4. เลือกไฟล์รูปแบบ JSON ที่จะนำเข้า
5. เลือกนำเข้าที่ตั้งไว้ล่วงหน้า
6. คลิกปุ่มนำเข้า

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

ไปกวดวิชากันเถอะ

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

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

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

การสร้างค่าที่ตั้งไว้ล่วงหน้าของโมดูลเมนู 5 รายการใน Divi

#1 – ลิงค์ปุ่มตรงกลางพร้อมโลโก้

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

ในการสร้างเมนูพรีเซ็ตส่วนกลางชุดแรกนี้ ให้เพิ่มแถวหนึ่งคอลัมน์ในส่วนปกติ

จากนั้นเพิ่มโมดูลเมนูในแถว

เปิดการตั้งค่าเมนูและเพิ่มเมนูลงในโมดูล

จากนั้นเพิ่มโลโก้เว็บไซต์เป็นเนื้อหาแบบไดนามิกให้กับโมดูลด้วย

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• สไตล์: กึ่งกลาง

• แบบอักษรของเมนู: Poppins
• น้ำหนักแบบอักษรของเมนู: ตัวหนา
• รูปแบบตัวอักษรของเมนู: TT
• ขนาดข้อความของเมนู: 14px (เดสก์ท็อป), 24px (แท็บเล็ตและโทรศัพท์)
• ระยะห่างระหว่างตัวอักษรของเมนู: 0.15em
• ความสูงของบรรทัดเมนู: 1.3em (เดสก์ท็อป), 1.8em (แท็บเล็ตและโทรศัพท์)

• โลโก้ความสูงสูงสุด: 60px

• ระยะขอบ: 0px ด้านล่าง

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

ลิงค์เมนู CSS

เพิ่ม CSS ที่กำหนดเองต่อไปนี้ในลิงก์เมนู:

บนเดสก์ท็อป…

min-width: 10em;
padding: 1em !important;
justify-content:center;
background: #f8f8f8;
border-radius: 10px;

เมื่อวางเมาส์เหนือ…

background: #333333;
color: #ffffff;
opacity: 1;

ลิงค์เมนูที่ใช้งานอยู่ CSS

background: #333333;
color: #ffffff;
opacity: 1;

โลโก้เมนู CSS

margin-bottom: 10px;

แบบที่ 1 ผลลัพธ์

นี่คือผลลัพธ์สุดท้าย…

การเพิ่มรูปแบบเมนู 1 เป็น Global Preset

มาตราซ้ำ

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

สร้างพรีเซ็ตใหม่จากสไตล์ปัจจุบัน

หากต้องการเพิ่มค่าที่ตั้งไว้ล่วงหน้าทั่วโลก ให้เปิดการตั้งค่าของโมดูลเมนูดั้งเดิมที่เราสร้างขึ้นและคลิกลิงก์ดรอปดาวน์ที่ตั้งไว้ล่วงหน้า

เลือกสร้างพรีเซ็ตใหม่จากสไตล์ปัจจุบัน

ตั้งชื่อที่ตั้งไว้ล่วงหน้าใหม่ (“ลิงค์ปุ่มตรงกลางพร้อมโลโก้”) จากนั้นบันทึกค่าที่ตั้งล่วงหน้า

#2 – โลโก้กึ่งกลางแบบอินไลน์พร้อมปุ่มลิงก์

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

ใต้แท็บออกแบบ อัปเดตสไตล์:

• สไตล์: Inline Centered Logo

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

ภายใต้แท็บ Advanced ให้อัพเดต Menu Logo CSS ดังนี้:

margin-bottom: 0px;

ผลลัพธ์แบบที่ 2

นี่คือผลลัพธ์สุดท้าย

การเพิ่ม Menu Style 2 เป็น Global Preset

มาตราซ้ำ

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

สร้างพรีเซ็ตใหม่จากสไตล์ปัจจุบัน

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

เลือกสร้างพรีเซ็ตใหม่จากสไตล์ปัจจุบัน

ตั้งชื่อที่ตั้งไว้ล่วงหน้า (“Inline Centered Logo w/ Button Links”) และบันทึกค่าที่ตั้งไว้ล่วงหน้า

#3 – เมนูเว้นระยะ VW แบบกึ่งกลางพร้อมฉลากมือถือ

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

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

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

เปิดการตั้งค่าของโมดูลเมนูและลบโลโก้

ใต้แท็บออกแบบ อัปเดตสไตล์:

• สไตล์: กึ่งกลาง

จากนั้นอัปเดตขนาดข้อความด้วยหน่วยความยาว VW ต่อไปนี้ เพื่อให้ขนาดข้อความปรับขนาดตามความกว้างของเบราว์เซอร์

• ขนาดข้อความเมนู: 1.5vw (เดสก์ท็อป)

ในการสร้างป้ายกำกับ "เมนู" สำหรับเมนูมือถือ เราสามารถเพิ่ม CSS ที่กำหนดเองบางส่วนในการแสดงผล Before Psuedo Element บนแท็บเล็ตได้ดังนี้:

ก่อน CSS

content: "MENU";
font-family: poppins;
font-size:12px;
position: absolute;
top:0;
left:50%;
transform: translate(-50%, -100%);

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

หมายเหตุ: สิ่งนี้อาจแสดงหรือไม่ปรากฏบนตัวสร้างภาพ คุณอาจต้องโหลดหน้าสดเพื่อดูผลลัพธ์

ต่อไป เราจะเพิ่มการเว้นวรรคและเส้นขอบของลิงก์เมนูเพิ่มเติมเมื่อวางเมาส์ไว้ ดำเนินการต่อเพื่อเพิ่ม CSS ที่กำหนดเองต่อไปนี้:

ลิงค์เมนู CSS (เดสก์ท็อป):

min-width: 10em;
justify-content:center;
text-align:center;
padding: .3em;
margin-bottom: 8px;
border: 1px solid transparent;

ลิงค์เมนู CSS (โฮเวอร์):

color: #333;
border: 1px solid #333;
opacity:1;

ลิงค์เมนูที่ใช้งานอยู่ CSS :

color: #333;
border: 1px solid #333;
opacity:1;

แบบที่ 3 ผลลัพธ์

การเพิ่มรูปแบบเมนู 3 เป็น Global Preset

มาตราซ้ำ

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

สร้างพรีเซ็ตใหม่จากสไตล์ปัจจุบัน

หากต้องการเพิ่มสไตล์ 3 เป็นค่าที่ตั้งล่วงหน้าส่วนกลาง ให้เปิดการตั้งค่าของโมดูลเมนูดั้งเดิมสำหรับสไตล์ 3 ที่เราสร้างขึ้นและคลิกลิงก์ดรอปดาวน์ที่ตั้งไว้ล่วงหน้า

เลือกสร้างพรีเซ็ตใหม่จากสไตล์ปัจจุบัน

ตั้งชื่อที่ตั้งไว้ล่วงหน้า (“Full Centered VW Spaced Menu with Mobile Label”) และบันทึกที่ตั้งไว้ล่วงหน้า

#4 – เมนูเว้นวรรคด้านขวาพร้อมฉลากมือถือ

ในการสร้างเมนูพรีเซ็ตสากลที่สี่ เราจะต้องอัปเดตเลย์เอาต์คอลัมน์ของแถวด้วยเลย์เอาต์ 0ne-fourth three-fourths ซึ่งจะเลียนแบบเค้าโครงส่วนหัวที่กำหนดเอง ซึ่งจะรวมโมดูลเมนูทางด้านขวาและจุดแยกต่างหากสำหรับภาพโลโก้ในคอลัมน์ด้านซ้าย

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

ใต้แท็บออกแบบ อัปเดตสไตล์:

• สไตล์: จัดชิดซ้าย

ถัดไป อัปเดตลักษณะลิงก์และการจัดแนวข้อความต่อไปนี้:

• สีของลิงค์ที่ใช้งาน: #ac3cf7
• ขนาดข้อความเมนู (เดสก์ท็อป): 14px
• การจัดตำแหน่งข้อความ: ขวา

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

เพิ่ม CSS ที่กำหนดเองต่อไปนี้:

ก่อน CSS (แท็บเล็ต)

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
right:6px;
transform: translateY(-100%);

ลิงค์เมนู CSS:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

แบบที่ 4 ผลลัพธ์

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

การเพิ่มรูปแบบเมนู 4 เป็น Global Preset

มาตราซ้ำ

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

สร้างพรีเซ็ตใหม่จากสไตล์ปัจจุบัน

หากต้องการเพิ่มสไตล์ 4 เป็นค่าที่ตั้งล่วงหน้าส่วนกลาง ให้เปิดการตั้งค่าของโมดูลเมนูดั้งเดิมสำหรับสไตล์ 4 ที่เราสร้างขึ้นและคลิกลิงก์ดรอปดาวน์ที่ตั้งไว้ล่วงหน้า

เลือกสร้างพรีเซ็ตใหม่จากสไตล์ปัจจุบัน

ตั้งชื่อพรีเซ็ต (“Right Spaced Menu w/ Mobile Label”) และบันทึกพรีเซ็ต

#4 – เมนูเว้นวรรคด้านซ้ายพร้อมฉลากมือถือ

ในการสร้างค่าที่ตั้งไว้ล่วงหน้าของเมนูที่สี่นี้ เราจะต้องอัปเดตเค้าโครงคอลัมน์ของแถวด้วยรูปแบบ 0ne-fourth three-fourths ซึ่งจะเลียนแบบเค้าโครงส่วนหัวที่กำหนดเองซึ่งจะรวมโมดูลเมนูทางด้านซ้ายและจุดแยกต่างหากสำหรับรูปภาพโลโก้ (หรือ CTA) ในคอลัมน์ด้านขวา

เปิดการตั้งค่าสำหรับเมนูและอัปเดตการจัดตำแหน่งข้อความสำหรับลิงก์เมนู:

• การจัดตำแหน่งข้อความ: ซ้าย

จากนั้นเราต้องปรับป้ายเมนูมือถือให้อยู่เหนือเมนูนำทางแฮมเบอร์เกอร์ทางด้านซ้าย และด้วยการเพิ่ม “direction:rtl” บนแท็บเล็ต เราจะตรวจสอบให้แน่ใจว่าไอคอนมือถือจะจัดชิดซ้ายบนมือถือเช่นกัน

ภายใต้แท็บขั้นสูง ให้อัปเดต CSS แบบกำหนดเองต่อไปนี้:

ก่อน CSS (แท็บเล็ต):

content: "MENU";
position: absolute;
font-family:poppins;
font-size:12px;
line-height:1em;
top:0px;
left:6px;
transform: translateY(-100%);

องค์ประกอบหลัก (แท็บเล็ต):

direction:rtl;

ลิงค์เมนู CSS:

min-width: 8em;
padding: 0.3em;
margin-bottom: 8px;
justify-content:flex-end;

นี่คือผลลัพธ์สุดท้าย

ผลลัพธ์สุดท้าย

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!