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

เผยแพร่แล้ว: 2022-08-31

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

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

เกี่ยวกับการตั้งค่าโมดูลเมนูแบบเต็มความกว้างตัวอย่างของฉัน

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

นี่คือการตั้งค่าของฉัน:

โลโก้: 150×150
สีพื้นหลัง: #f4f4f4
สไตล์: จัดชิดซ้าย (ฉันจะแสดงโลโก้กึ่งกลางในบรรทัดด้วยเมื่อช่วยสาธิตการตั้งค่า)
ทิศทางเมนูแบบเลื่อนลง: ลงด้านล่าง
ทำให้เมนูลิงค์เต็มความกว้าง: ไม่
แบบอักษรของเมนู: Arvo
สีข้อความ: ดำ
ขนาดตัวอักษร: 16px
Padding: 2vh บนและล่าง

นี่คือส่วนหัวเมื่อเห็นบนเดสก์ท็อป

เกี่ยวกับการตั้งค่าโมดูลเมนูแบบเต็มความกว้างตัวอย่างของฉัน

นี่คือส่วนหัวของแท็บเล็ต ขนาดของโลโก้ดูโดดเด่นยิ่งขึ้น

เกี่ยวกับการตั้งค่าโมดูลเมนูแบบเต็มความกว้างตัวอย่างของฉัน

สุดท้าย นี่คือมุมมองโทรศัพท์ สิ่งนี้ทำให้ส่วนหัวใหญ่เกินไป

เกี่ยวกับการตั้งค่าโมดูลเมนูแบบเต็มความกว้างตัวอย่างของฉัน

ตัวอย่างเหล่านี้แสดงให้เห็นอย่างชัดเจนว่าเหตุใดโลโก้ในโมดูลเมนูแบบเต็มความกว้างจึงต้องตอบสนอง

เกี่ยวกับขนาดโลโก้

ขนาดโลโก้ที่แนะนำแตกต่างกันไปตามเว็บไซต์ ขนาดที่แนะนำมากที่สุดมักจะอยู่ระหว่าง 250×100 ถึง 250×150 โลโก้ที่เรารวมไว้ในเลย์เอาต์ Divi มักจะอยู่ในช่วง 160×50 หรือ 225×100 แต่บางโลโก้ก็แตกต่างกันมากตามรูปร่าง

ฉันใช้โลโก้ขนาด 150×150 และจะแสดงตัวอย่างโลโก้ขนาดต่างๆ คุณจะต้องลองใช้การตั้งค่าตามขนาดภาพโลโก้ของคุณ

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

มีการตั้งค่า 10 รายการภายใต้ส่วนการปรับขนาด การตั้งค่าสี่อย่างกำหนดเป้าหมายไปที่โลโก้

การตั้งค่ารวมถึง:

ความกว้างของโลโก้ – เปอร์เซ็นต์ของความกว้างสูงสุด ค่าเริ่มต้นคืออัตโนมัติ
โลโก้ความกว้างสูงสุด – กำหนดความกว้างสูงสุดเป็นพิกเซลที่ความกว้างไม่เกิน ค่าเริ่มต้นคือ 100%
ความสูงของโลโก้ – เปอร์เซ็นต์ของความสูงสูงสุด ค่าเริ่มต้นคืออัตโนมัติ
โลโก้ความสูงสูงสุด – กำหนดความสูงสูงสุดเป็นพิกเซลที่ความสูงไม่เกิน ค่าเริ่มต้นคือ 100%

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

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

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

ความกว้างของโลโก้และความกว้างสูงสุดของโลโก้

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

ตัวอย่างเช่น หากกำหนดความกว้างสูงสุดไว้ที่ 50 พิกเซล และความกว้างตั้งไว้ที่ 80% โลโก้จะแสดงความกว้าง 40px

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

ตัวอย่างความกว้างและความกว้างสูงสุด

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