คุณต้องการเพิ่มโลโก้ที่ตอบสนองไปยังโมดูลเมนูแบบเต็มความกว้างของ .หรือไม่ Divi เพื่อปรับให้เข้ากับการดูบนมือถือ?
คุณรู้หรือไม่ว่ามากกว่า 50% ของ การจราจร อินเทอร์เน็ตมาจากอุปกรณ์พกพา? ซึ่งหมายความว่ารุ่นมือถือของคุณ เว็บไซต์เว็บ มีความสำคัญอย่างยิ่งและอาจเป็นวิธีหลักที่ผู้อื่นจะเข้าชมเพจของคุณ
ตรวจสอบให้แน่ใจว่า .ของคุณ เว็บไซต์เว็บ ตอบสนองได้ดีและเป็นมิตรกับมือถือเป็นขั้นตอนสำคัญในการออกแบบ เว็บไซต์เว็บ.
ในบทช่วยสอนนี้ เราจะแสดงวิธีเพิ่มโลโก้แบบโต้ตอบให้กับโมดูลเมนูแบบเต็มความกว้างของคุณโดยใช้ตัวเลือกการตอบสนองในตัวของ Divi.
วิธีนี้จะทำให้คุณสามารถเพิ่มโลโก้ที่ใหญ่ขึ้นหรือซับซ้อนมากขึ้นซึ่งจะปรากฏบนหน้าจอที่ใหญ่ขึ้น และโลโก้ที่เล็กกว่าหรือเรียบง่ายกว่าที่จะปรากฏบนหน้าจอที่เล็กกว่า
เริ่มกันเลย!
การสำรวจ
นี่คือตัวอย่างสิ่งที่เราจะออกแบบ เว็บไซต์เวอร์ชันเดสก์ท็อปจะมีโลโก้แบบขยายพร้อมข้อความเพิ่มเติม และโลโก้เวอร์ชันมือถือจะมีเฉพาะการสร้างแบรนด์โลโก้พื้นฐานเท่านั้น
สิ่งที่คุณต้องเริ่มต้น
ทั้งหมด ขั้นแรก ติดตั้งและเปิดใช้งานธีม Divi และตรวจสอบให้แน่ใจว่าคุณมีเวอร์ชันล่าสุดของ Divi บนเว็บไซต์ของคุณ ขั้นต่อไป ตรวจสอบให้แน่ใจว่าคุณมีโลโก้อย่างน้อยสองเวอร์ชัน: แบบหนึ่งสำหรับมุมมองเดสก์ท็อปของเว็บไซต์ของคุณ และอีกแบบหนึ่งสำหรับมุมมองมือถือ สุดท้าย ให้ดาวน์โหลดเทมเพลต เทมเพลตส่วนหัวและส่วนท้ายสำหรับ Divi's High School Layout Pack.
ตอนนี้คุณพร้อมที่จะเริ่มต้นแล้ว!
วิธีเพิ่มโลโก้ที่ปรับเปลี่ยนตามอุปกรณ์ให้กับโมดูลส่วนหัวแบบเต็มความกว้างใน Divi
สร้างโมดูลส่วนหัวแบบเต็ม
เพิ่มส่วนความกว้างเต็ม
เนื่องจากเมนูดั้งเดิมสร้างด้วยโมดูลเมนูมาตรฐาน เราจึงจำเป็นต้องแก้ไขเลย์เอาต์เพื่อเพิ่มโมดูลส่วนหัวแบบเต็มความกว้าง
ขั้นแรก เพิ่มส่วนเต็มความกว้าง (เต็มความกว้าง) ไปที่ส่วนหัวส่วนกลางภายใต้เมนูที่มีอยู่
ในการตั้งค่าส่วนเต็มความกว้าง ให้ไปที่ ระดับสูง, à Puis ผลเลื่อน.
- ตำแหน่งติดหนึบ: Stick to Top
ถัดไป เพิ่มสีพื้นหลัง
- พื้นหลัง: #f5f0eb
เพิ่มสีอื่นให้กับพื้นหลังในสถานะติดหนึบ
- พื้นหลัง (เหนียว): #ffffff
เพิ่มโมดูลส่วนหัวแบบเต็ม
ตอนนี้ มาเพิ่มโมดูลส่วนหัวแบบเต็ม
เปิดการตั้งค่าโมดูลและลบพื้นหลัง
เพื่อจำลองรูปลักษณ์ของเมนูดั้งเดิมอย่างง่ายดาย เราสามารถใช้คุณลักษณะ Copy Styles เพื่อคัดลอกการตั้งค่าแบบกำหนดเองบางอย่างได้
ดูสิ่งนี้ด้วย: Divi: วิธีเปลี่ยนการไล่ระดับสีของพื้นหลังบนโฮเวอร์
เปิดการตั้งค่าเมนูหลัก จากนั้นคลิกขวาที่ เมนูข้อความ และเลือก คัดลอกสไตล์ข้อความของเมนู.
เมื่อคัดลอกแล้ว ให้คลิกที่จุดสามจุดของโมดูล Fullwidth Header จากนั้นเลือก รูปแบบข้อความเมนูที่ผ่านมา.
ตอนนี้เราจะทำซ้ำขั้นตอนเดียวกันกับการตั้งค่าเมนูแบบเลื่อนลง
ทำซ้ำอีกครั้งสำหรับไอคอน
ตั้งค่าการจัดตำแหน่งข้อความไปทางขวา
- การจัดตำแหน่งข้อความ: right
กำหนดความสูงสูงสุดของโลโก้ภายใต้ ออกแบบแล้วก็ การกำหนดขนาด.
- โลโก้ความสูงสูงสุด: 50px
เพิ่ม CSS ต่อไปนี้ในส่วน ลิงค์เมนู ภายใต้ CSS ที่กำหนดเอง
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
สุดท้าย ปรับ padding ด้านบนและด้านล่าง
- ช่องว่างภายในด้านบน: 10px
- Padding-ด้านล่าง: 10px
ตอนนี้ลบส่วนเมนูดั้งเดิม
เพิ่มโลโก้ที่ตอบสนอง
ตอนนี้เราจะเพิ่มโลโก้ที่ตอบสนอง โชคดีที่ Divi ทำให้สิ่งนี้เป็นเรื่องง่ายด้วยตัวเลือกที่ตอบสนองในตัว
ภายใต้ คอนเทนต์ให้เปิดการตั้งค่าโลโก้และอัปโหลดโลโก้เวอร์ชันเดสก์ท็อปของคุณ
เลือกไอคอนโหมดมือถือเพื่อใช้ตัวเลือกการตอบสนอง จากนั้นแทนที่โลโก้มือถือด้วยโลโก้ที่ตอบสนองของคุณ
สร้างหน้าใหม่ด้วยเค้าโครงที่กำหนดไว้ล่วงหน้า
หากต้องการดูเมนูแบบเต็มความกว้างด้วยโลโก้ที่ตอบสนอง ให้สร้างหน้าใหม่ที่มีเค้าโครงที่กำหนดไว้ล่วงหน้าจากไลบรารี Divi
สำหรับการออกแบบนี้ เราจะใช้โฮมเพจของโรงเรียนมัธยมปลายของ ชุดเค้าโครงโรงเรียนมัธยม เพื่อให้ตรงกับส่วนหัวและส่วนท้าย
เพิ่มหน้าใหม่ให้กับเว็บไซต์ของคุณและตั้งชื่อ จากนั้นเลือกตัวเลือก ใช้ Divi Builder. เนื่องจากเรานำเข้าเค้าโครงส่วนหัวและส่วนท้ายเป็นส่วนหัวและส่วนท้ายส่วนกลาง ให้ใช้เค้าโครงเริ่มต้นสำหรับหน้านี้
เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ ดังนั้น select เรียกดูเค้าโครง.
ค้นหาและเลือกเค้าโครง หน้าแรกของโรงเรียนมัธยม.
เลือก ใช้เค้าโครงนี้ เพื่อเพิ่มเลย์เอาต์ให้กับเพจของคุณ
ผลสุดท้าย
ทีนี้มาดูการออกแบบขั้นสุดท้ายของเรากัน
ดาวน์โหลด DIVI ทันที !!!
สรุป
การมีเว็บไซต์ที่เหมาะกับอุปกรณ์เคลื่อนที่และตอบสนองมีความสำคัญมากกว่าที่เคย และต้องขอบคุณตัวเลือกที่ตอบสนองในตัวของ Divi การสร้างตัวมันจึงง่ายกว่าที่เคย!
ด้วยโลโก้ที่ตอบสนองได้ เอกลักษณ์ของแบรนด์ของคุณจะชัดเจนเสมอ โดยไม่คำนึงถึงขนาดหน้าจอ
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการ Divi ครั้งต่อไปของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
