วิธีสร้างแถบเมนูรูดสำหรับเว็บไซต์ของคุณด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

ปิดใช้งานการนำทางคงที่ในตัวเลือกธีม Divi

ไปที่ตัวเลือกธีม Divi

มาเริ่มกันเลย! สิ่งแรกที่คุณต้องทำคือไปที่ตัวเลือกธีม Divi บนเว็บไซต์ WordPress ของคุณ

ปิดใช้งานการนำทางคงที่

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

• แถบนำทางคงที่: ปิดการใช้งาน

ซ่อนแถบเมนูหลักในหน้า

เปิดใช้งาน Visual Builder บนหน้า Landing Page ของชุดเค้าโครงนายหน้าสินเชื่อที่อยู่อาศัย

ดำเนินการต่อโดยไปที่หน้าที่คุณสร้างขึ้นโดยใช้หน้า Landing Page ของ Mortgage Broker Layout Pack และเปิดใช้งาน Visual Builder

เปิดการตั้งค่าหน้า

เราจะซ่อนแถบเมนูหลักในหน้าของเราโดยเพิ่มโค้ด CSS หากต้องการเพิ่มรหัสนี้ ให้เปิดการตั้งค่าหน้า

เพิ่มโค้ด CSS ที่กำหนดเองเพื่อซ่อนแถบเมนูหลัก

จากนั้นไปที่แท็บขั้นสูงแล้ววางโค้ด CSS ต่อไปนี้ลงในช่อง Custom CSS:

#main-header {
display: none;
}

การเพิ่มรหัสนี้จะช่วยป้องกันไม่ให้แถบเมนูหลักปรากฏบนหน้า

สร้างการออกแบบเมนูแบบกำหนดเองด้วย Divi

ตรวจสอบให้แน่ใจว่ามีช่องว่างด้านบนเพียงพอในส่วนฮีโร่ในทุกขนาดหน้าจอ

ตอนนี้เราได้กำจัดแถบเมนูหลักบนหน้าของเราแล้ว เราสามารถเริ่มเพิ่มแถบเมนูการปัดแทนได้! สิ่งแรกที่คุณต้องทำคือตรวจสอบให้แน่ใจว่ามีช่องว่างภายในเพียงพอที่ด้านบนสุดของหน้า แถบเมนูการปัดจะไม่ทับซ้อนกับเนื้อหาที่มีอยู่ โดยเฉพาะอย่างยิ่งสำหรับหน้า Landing Page ของ Mortgage Broker Layout Pack ซึ่งหมายความว่าต้องแน่ใจว่าช่องว่างภายในที่กำหนดเองของคอลัมน์ 1 ยังคงเป็น '180px' ในทุกขนาดหน้าจอ

• ช่องว่างภายในด้านบน: 180px

เพิ่มส่วนปกติใหม่ที่ด้านล่างของหน้า

ได้เวลาเริ่มสร้างแถบเมนูการปัดแบบกำหนดเองแล้ว! เพิ่มส่วนปกติที่ด้านล่างของหน้า

ระยะห่าง

เปิดการตั้งค่าส่วนและลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมด

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มแถว

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

สีพื้นหลัง

เปิดการตั้งค่าแถวและเปลี่ยนสีพื้นหลังของแถวเป็นสีขาว

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

ขนาด

จากนั้น เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าขนาดเพื่อให้แถวใช้ความกว้างทั้งหมดของหน้าจอ:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างภายในด้านบนและด้านล่างทั้งหมดต่อไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

กล่องเงา

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

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.55)

เพิ่มโมดูลรูปภาพ

อัพโหลดโลโก้บริษัท

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

การจัดตำแหน่ง

จากนั้นไปที่แท็บการออกแบบของ Image Module และเปลี่ยนการจัดตำแหน่งรูปภาพ

• การจัดตำแหน่งภาพ: กึ่งกลาง

ขนาด

เปลี่ยนการตั้งค่าขนาดของรูปภาพถัดไป

• ความกว้างสูงสุด: 75% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

และเพิ่มช่องว่างด้านบนและด้านล่างที่กำหนดเองให้กับรูปภาพด้วย

• ช่องว่างภายในด้านบน: 15px (แท็บเล็ต), 25px (โทรศัพท์)
• ช่องว่างภายในด้านล่าง: 15px (แท็บเล็ต), 25px (โทรศัพท์)

เพิ่มโมดูลปุ่ม

เพิ่มสำเนา

โมดูลที่สองที่เราต้องการคือโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

การจัดตำแหน่ง

จากนั้นไปที่แท็บออกแบบและเปลี่ยนการจัดตำแหน่งปุ่ม

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

การตั้งค่าปุ่ม

แก้ไขลักษณะที่ปรากฏของปุ่มถัดไป

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.8vw (เดสก์ท็อป), 1.4vw (แท็บเล็ต), 2.1vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #40eccc
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 50px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
• แบบอักษรของปุ่ม: Lato
• น้ำหนักแบบอักษร: หนัก
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

และสร้างรูปร่างที่คุณต้องการโดยใช้ค่าระยะขอบและช่องว่างภายในที่กำหนดเอง

• ขอบบน: 15px
• ขอบล่าง: 15px
• ช่องว่างภายในด้านบน: 15px
• ช่องว่างภายใน: 15px
• ช่องว่างภายในด้านซ้าย: 40px
• ช่องว่างภายในด้านขวา: 40px

เพิ่มโมดูลข้อความ #1

เพิ่มรายการเมนูลงในกล่องเนื้อหา

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

เพิ่มลิงค์

ไปที่การตั้งค่าลิงก์และเพิ่มลิงก์ที่ถูกต้องไปยังโมดูลข้อความ

สีพื้นหลัง

แก้ไขสีพื้นหลังต่อไป

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

การตั้งค่าข้อความ

จากนั้น เปลี่ยนการตั้งค่าข้อความ

• แบบอักษรของข้อความ: Lato
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #000000
• ขนาดตัวอักษร: 0.9vw (เดสก์ท็อป), 1.9vw (แท็บเล็ต), 2.4vw (โทรศัพท์)
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

และเพิ่มช่องว่างด้านบนและด้านล่างแบบกำหนดเองให้กับโมดูลด้วย

• ช่องว่างภายในด้านบน: 30px
• ช่องว่างภายในด้านล่าง: 30px

โมดูลข้อความโคลน x5 ครั้ง

เมื่อคุณแก้ไขโมดูลข้อความเสร็จแล้ว คุณสามารถดำเนินการโคลนได้ 5 ครั้ง

เปลี่ยนสำเนา

ตรวจสอบให้แน่ใจว่าคุณเปลี่ยนชื่อหน้าในแต่ละรายการที่ซ้ำกันเหล่านี้

เปลี่ยนลิงค์

พร้อมทั้งลิงค์ต่างๆ

เปลี่ยนสีพื้นหลัง

แก้ไขสีพื้นหลังของรายการเมนูที่สอง สี่ และหกถัดไป

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

เพิ่ม CSS ที่กำหนดเองให้กับ Row

องค์ประกอบหลัก

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

position:fixed;
top: 0px;
z-index: 99;

องค์ประกอบหลักของคอลัมน์

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

overflow-x: scroll;
display: grid;
grid-template-columns: 15% 45% 25% 25% 25% 25% 25% 25%;

คลาส CSS ของคอลัมน์

และเพื่อกำจัดแถบเลื่อน เราจะเพิ่มคลาส CSS ให้กับแถวด้วยเช่นกัน

ลบแถบเลื่อน

ในเพจ

คุณสามารถนำแถบเลื่อนบนหน้าออกได้โดยเปิดการตั้งค่าหน้าและเพิ่มโค้ด CSS ต่อไปนี้ลงในช่อง Custom CSS:

.swipe-menu::-webkit-scrollbar {
display: none;
}

บนเว็บไซต์ทั้งหมด

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

.swipe-menu::-webkit-scrollbar { display: none; }

บันทึกเป็นส่วนของรายการสากล

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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