วิธีสร้างเมนูเต็มหน้าจอใน Divi

เผยแพร่แล้ว: 2022-04-22

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

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

วิธีสร้างเมนูเต็มหน้าจอใน Divi

ขั้นตอนที่ 1: เพิ่มและสร้างส่วนหัวส่วนกลาง

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

ขั้นตอนที่ 2: แก้ไขการตั้งค่าส่วนที่ 1 และเพิ่มคลาส CSS

คุณจะถูกนำไปที่ตัวแก้ไข Divi Builder และจะมีส่วนในตัวแก้ไข เปิดแผง การตั้งค่าส่วน บนบล็อก พื้นหลัง เปลี่ยนสีพื้นหลังเป็นสีโปร่งใสอย่างสมบูรณ์ = rgba(255,255,255,0)

ถัดไป ลบช่องว่างด้านบนและด้านล่างเริ่มต้นของส่วน ไปที่แท็บ ออกแบบ → ระยะห่าง จากนั้นตั้งค่าช่องว่างภายในด้าน บนและด้านล่าง เป็น 0px

ดำเนินการต่อโดยกำหนดคลาส CSS ให้กับส่วนนี้เพื่อเปลี่ยนส่วนนี้เป็นเมนูแบบเต็มหน้าจอสำหรับโค้ด CSS ในภายหลัง ไปที่แท็บ ขั้นสูง → CSS ID & Classes แล้วพิมพ์: “section-transform” ใน CSS Class

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

ขั้นตอนที่ 3: เพิ่มแถวแรกในส่วน

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

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

ดำเนินการต่อโดยลบช่องว่างด้านบนและด้านล่างเริ่มต้นถัดไปในบล็อก ระยะห่าง และตั้งค่าช่องว่างด้านบนและด้าน ล่าง เป็น 0px

ขั้นตอนที่ 4: เพิ่มโมดูลข้อความสำหรับปุ่มเมนู

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

ดำเนินการต่อโดยไปที่แท็บ ออกแบบ → ข้อความ ที่นี่เราจะเปลี่ยนการตั้งค่าข้อความดังนี้:

แบบอักษรของข้อความ: Arial
สีข้อความ: #0000000
ขนาดตัวอักษร: 3vw (เดสก์ท็อป), 5vw (แท็บเล็ต), 7vw (โทรศัพท์)
ความสูงของบรรทัดข้อความ: 1em

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

จากนั้นไปแก้ไขค่าระยะห่างในบล็อก Spacing เพื่อให้ปุ่มเมนูลอยขึ้นเล็กน้อยที่มุมซ้าย ค่าต่างๆ มีดังนี้

Top Padding : 2vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 5vw (โทรศัพท์)
ช่วง ล่าง : 2vw (เดสก์ท็อป), 3.5vw (แท็บเล็ต), 5vw (โทรศัพท์)
Padding ซ้าย : 3vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 7vw (โทรศัพท์)
Padding ขวา : 3vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 7vw (โทรศัพท์)

ขั้นตอนที่ 5: เพิ่ม CSS ID ไปที่ปุ่มเมนูเพื่อเรียกเมนูเต็มหน้าจอ

ในการเรียกเมนูแบบเต็มหน้าจอเมื่อมีการคลิกไอคอนแฮมเบอร์เกอร์ เราต้องกำหนด CSS ID ให้กับโมดูลข้อความ เราจะเรียก CSS ID นี้ในโค้ดของเราในภายหลัง ไปที่แท็บ Advanced → CSS ID & Classes แล้วพิมพ์: “menu-open” ใน CSS ID

ขั้นตอนที่ 6: เพิ่มแถวที่สองเพื่อวาง Menu

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

ถัดไป ไปที่บล็อกการ เว้นวรรค เพื่อแก้ไขค่าดังนี้:

อัตรากำไรขั้นต้น : 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
ระยะ ขอบล่าง : 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
เบาะ ซ้าย : 19vw
แพ็ดดิ้งขวา : 19vw

ขั้นตอนที่ 7: การเพิ่มรายการเมนู

มาเพิ่มรายการในเมนูของเรา และเริ่มด้วยการเพิ่มโมดูลข้อความลงในคอลัมน์ จากนั้นพิมพ์ชื่อเมนูแรกและให้ลิงค์หากต้องการ เมนูแรกของเราคือเมนู "หน้าแรก" และลิงก์คือหน้าแรกของเรา "https://www.wppagebuilders.com/"

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

แบบอักษรของข้อความ : Arial
น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
สีข้อความ : #000000
ขนาดตัวอักษร : 3vw (เดสก์ท็อป), 7vw (แท็บเล็ต), 8vw (โทรศัพท์)
ระยะห่างระหว่าง ตัวอักษร : -0.1vw
ความสูงของบรรทัดข้อความ : 1em

ถัดไปคือการตั้งค่าการ เว้นวรรค การตั้งค่ามีดังนี้:

อัตรากำไรขั้นต้น : 1vw
ช่วง ล่าง : 2vw
Padding ซ้าย : 3vw

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

ความกว้างขอบล่าง: 1px
สีขอบล่าง: #333333

มาเสร็จสิ้นการตั้งค่าโมดูลข้อความโดยเพิ่มคลาส CSS แบบกำหนดเอง และจำเป็นต้องเพิ่มคลาส CSS นี้ลงในรายการเมนูแต่ละรายการที่คุณจะใช้ ไปที่แท็บ Advanced → CSS ID & Classes แล้วพิมพ์: “menu-item-click” ใน CSS Class

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

จากนั้นดำเนินการเปลี่ยนชื่อรายการเมนูที่ซ้ำกันแต่ละรายการและลิงก์ที่คุณต้องการ

ขั้นตอนที่ 8: การเพิ่มรหัสสำหรับเมนูเต็มหน้าจอ

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

 <script>
jQuery(ฟังก์ชัน($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active'); $('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active'); $('.section-transform').removeClass('section-transform-active');
});
});
</script>
<style>
.section-transform{
เคอร์เซอร์: ตัวชี้;    
}
.section-transform-active {
ความสูง: 100% !สำคัญ;
ความกว้าง: 100% !สำคัญ;
ดัชนี z: 99999 !สำคัญ;
พื้นหลัง-สี: #FFFFFF !สำคัญ; 
}   
.section-transform {
-webkit-transition: ความง่ายทั้งหมด 0.5 วินาที สำคัญ;
-moz-transition: ทั้งหมด 0.5 วินาที ง่าย !สำคัญ;
-o-transition: ทั้งหมด 0.5 วินาที ง่าย !สำคัญ;
-ms-transition: ทั้งหมด 0.5 วินาที ง่าย !สำคัญ;
การเปลี่ยนแปลง: ทั้งหมด 0.5 วินาที ง่าย !สำคัญ;
}
</style>

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

ดำเนินการต่อโดยเพิ่ม Code Module แล้ววางโค้ดด้านบนลงไป

ขั้นตอนที่ 9: การปรับขนาดขั้นสุดท้ายสำหรับส่วน

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

ความกว้าง : 8vw (เดสก์ท็อป), 11vw (แท็บเล็ต), 18vw (โทรศัพท์)
ความสูง : 7vw (เดสก์ท็อป), 11vw (แท็บเล็ต), 18vw (โทรศัพท์)

ดำเนินการต่อโดยไปที่แท็บ ขั้นสูง → CSS ที่กำหนดเอง → องค์ประกอบหลัก และเพิ่มข้อมูลโค้ด CSS ต่อไปนี้:

 ตำแหน่ง: คงที่;
ด้านบน: 0;

ตรวจสอบให้แน่ใจว่าข้อมูลโค้ด CSS เดียวกันใช้กับโฮเวอร์ด้วย

ขั้นตอนที่ 10: บันทึกโครงการและรับชมสด

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