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

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

มาดำน้ำกันเถอะ!

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

แอบมอง

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

ทำไมคุณถึงต้องการโลโก้ที่ปรับเปลี่ยนตามอุปกรณ์

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

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

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

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

ตอนนี้คุณพร้อมที่จะเริ่มต้นแล้ว!

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

นำเข้าเค้าโครงส่วนหัวและส่วนท้าย

ไปที่ Theme Builder จากเมนู Divi ในแถบด้านข้าง นำเข้าเค้าโครงส่วนหัวและส่วนท้ายของโรงเรียนมัธยมศึกษาตอนปลายโดยเลือกไอคอนการพกพา เลือกแท็บนำเข้าและเลือกไฟล์เค้าโครง จากนั้นเลือกนำเข้าเทมเพลตตัวสร้างธีม Divi

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

สร้างโมดูลเมนูแบบเต็มความกว้าง

เพิ่มมาตราเต็มความกว้าง

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

ในการตั้งค่าส่วนเต็มความกว้าง ไปที่ขั้นสูง จากนั้นเลื่อนเอฟเฟกต์

• ตำแหน่งหนึบ: Stick to Top

ถัดไป เพิ่มสีพื้นหลัง

• สีพื้นหลัง: #f5f0eb

เพิ่มสีที่แตกต่างกันสำหรับพื้นหลังแบบเหนียว

• สีพื้นหลังแบบติดหนึบ: #ffffff

เพิ่มโมดูลเมนูเต็มความกว้าง

ตอนนี้ มาเพิ่มโมดูลเมนูเต็มความกว้างกัน

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

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

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

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

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

ตั้งค่าการจัดตำแหน่งข้อความไปทางขวา

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

ตั้งค่าความสูงสูงสุดของโลโก้ภายใต้การออกแบบ จากนั้นปรับขนาด

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

เพิ่ม CSS ต่อไปนี้ไปยังส่วนลิงก์เมนูภายใต้ CSS ที่กำหนดเอง

padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;

สุดท้าย ตั้งค่า padding ด้านบนและด้านล่าง

• Padding-Top: 10px
• Padding-ด้านล่าง:10px

ตอนนี้ลบส่วนเมนูดั้งเดิม

เพิ่มโลโก้ที่ปรับเปลี่ยนตามอุปกรณ์

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

ภายใต้ ทั่วไป ให้เปิดการตั้งค่าโลโก้และอัปโหลดโลโก้เวอร์ชันเดสก์ท็อปของคุณ

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

สร้างหน้าใหม่ด้วยเค้าโครงที่สร้างไว้ล่วงหน้า

หากต้องการดูการทำงานของเมนูเต็มความกว้างด้วยโลโก้ที่ตอบสนอง ให้สร้างหน้าใหม่ด้วยเค้าโครงที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับการออกแบบนี้ เราจะใช้โฮมเพจของโรงเรียนมัธยมจาก High School Layout Pack เพื่อให้ตรงกับส่วนหัวและส่วนท้าย

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

เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าจากไลบรารี Divi สำหรับตัวอย่างนี้ ดังนั้นให้เลือกเรียกดูเลย์เอาต์

ค้นหาและเลือกเค้าโครงหน้าแรกของโรงเรียนมัธยมศึกษาตอนปลาย

เลือกใช้เลย์เอาต์นี้เพื่อเพิ่มเลย์เอาต์ให้กับเพจของคุณ

ผลสุดท้าย

ตอนนี้ มาดูการออกแบบขั้นสุดท้ายของเรากัน

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

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