วิธีจับคู่แถบเมนูเดสก์ท็อปและมือถือของคุณกับ Divi

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

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

ความแตกต่างสำหรับมือถือและเดสก์ท็อป

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

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

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

ผลลัพธ์

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

หลังจากทำตามบทช่วยสอนนี้ทีละขั้นตอนแล้ว คุณจะได้ผลลัพธ์ดังต่อไปนี้:

ซึ่งเห็นได้ชัดว่าดูเหมือนเวอร์ชันเดสก์ท็อปมากกว่า:

วิธีจับคู่แถบเมนูเดสก์ท็อปและมือถือของคุณกับ Divi

สมัครสมาชิกช่อง Youtube ของเรา

การตั้งค่าแถบเมนูหลัก

สิ่งแรกที่เราจะทำคือทำการเปลี่ยนแปลงที่จำเป็นในแถบเมนูหลักภายในเครื่องมือปรับแต่งธีม หากคุณอยู่บนแดชบอร์ด WordPress ให้ไปที่ ลักษณะที่ปรากฏ > ปรับแต่ง > ส่วนหัวและการนำทาง > แถบเมนูหลัก และตรวจดูให้แน่ใจว่าการตั้งค่าต่อไปนี้มีผลบังคับ:

• ซ่อนภาพโลโก้: ปิดการใช้งาน
• ความสูงของเมนู: 30
• โลโก้ความสูงสูงสุด: 100

แถบเมนูมือถือ รหัส CSS เพิ่มเติม

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

เพิ่มโค้ด CSS ลงในหนึ่งหน้าโดยเฉพาะ

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

ถัดไป คุณสามารถใช้โค้ด CSS ต่อไปนี้และวางไว้ในช่อง Custom CSS:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

เพิ่มโค้ด CSS ให้กับทั้งเว็บไซต์

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

ผ่านเครื่องมือปรับแต่งธีม

วิธีแรกคือการเพิ่มโค้ด CSS ลงในเครื่องมือปรับแต่งธีมของคุณ ในการทำเช่นนั้น ไปที่แดชบอร์ด WordPress > ลักษณะที่ปรากฏ > ปรับแต่ง > CSS เพิ่มเติม > วางบรรทัดของโค้ด CSS ต่อไปนี้ในฟิลด์ CSS ที่กำหนดเอง:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

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

ผ่านตัวเลือกธีม

วิธีที่สองคือการเพิ่มโค้ด CSS ลงในตัวเลือกธีม ในการทำเช่นนั้น ไปที่แดชบอร์ด WordPress > Divi > ตัวเลือกธีม > เลื่อนลงไปที่แท็บทั่วไป แล้ววางโค้ด CSS ต่อไปนี้ลงในฟิลด์ CSS ที่กำหนดเอง:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

แก้ไขรหัสตามความต้องการของคุณเอง

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

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

ผลลัพธ์

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

ซึ่งดูเกือบจะเหมือนกันทุกประการกับผลลัพธ์ที่คุณได้รับบนเดสก์ท็อป:

ก่อนทำการเปลี่ยนแปลง CSS ผลลัพธ์บนมือถือจะมีลักษณะดังนี้:

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

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

อย่าลืมสมัครรับจดหมายข่าวทางอีเมลและช่อง YouTube ของเรา เพื่อที่คุณจะได้ไม่พลาดประกาศสำคัญ เคล็ดลับที่เป็นประโยชน์ หรือ Divi freebie!