คุณต้องการเพิ่มไอคอนแฮมเบอร์เกอร์ในโมดูลเมนูของ .หรือไม่ Divi ?
หากคุณสร้างส่วนหัวของคุณใน Diviมีหลายวิธีในการทำเช่นนี้
เราจะแสดงวิธีเพิ่มไอคอนแฮมเบอร์เกอร์ให้กับโมดูลเมนูของ Divi. ไอคอนแฮมเบอร์เกอร์นี้ปรากฏเป็นค่าเริ่มต้นบนหน้าจอขนาดเล็กแล้ว แต่ในบทช่วยสอนนี้ เราจะตรวจสอบให้แน่ใจว่าไอคอนแฮมเบอร์เกอร์ปรากฏบนเดสก์ท็อปด้วย
สิ่งนี้ทำให้ส่วนหัวของคุณดูน้อยที่สุดในขณะที่เพิ่มการโต้ตอบ
Let 's go
การสำรวจ
ก่อนดำดิ่งสู่บทช่วยสอนนี้ มาดูผลลัพธ์คร่าวๆ กันก่อน
ดาวน์โหลด DIVI ทันที!!!
สร้างเทมเพลตส่วนหัวส่วนกลางใหม่ด้วย Divi Builder
ไปที่ตัวสร้างธีม Divi
จากแดชบอร์ด WordPress ไปที่ 'Divi > ตัวสร้างธีม' จากนั้นคลิก 'เพิ่มส่วนหัวส่วนกลาง'
เพิ่มส่วนหัวส่วนกลางใหม่
เมนูแบบเลื่อนลงจะปรากฏขึ้น หากต้องการเริ่มสร้างตั้งแต่เริ่มต้น ให้ดำเนินการต่อโดยเลือก “สร้างส่วนหัวระดับโลก”.
การออกแบบการออกแบบส่วนหัวทั่วโลก
การตั้งค่ามาตรา
สีพื้นหลัง
เมื่ออยู่ในเครื่องมือแก้ไขเทมเพลต ก็ถึงเวลาเริ่มออกแบบส่วนหัว คุณจะสังเกตเห็นว่ามีส่วนอยู่แล้ว เปิดการตั้งค่าส่วนและเพิ่มสีพื้นหลัง
- สีพื้นหลัง: #f6f9fb
การเว้นวรรค
เปลี่ยนเป็นแท็บ ออกแบบ ของส่วนและแก้ไขพารามิเตอร์ต่อไปนี้
- ช่องว่างภายใน (บนและล่าง): 0px
เพิ่มบรรทัดใหม่
โครงสร้างของคอลัมน์
ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
เปิดการตั้งค่าสายไปที่แท็บ ออกแบบ และเปลี่ยนความกว้างสูงสุดในการตั้งค่าขนาด
- ความกว้างสูงสุด: 1px
การเว้นวรรค
จากนั้นเปลี่ยนช่องว่างด้านบนและด้านล่างในการตั้งค่าระยะห่าง
- ช่องว่างภายใน (บนและล่าง): 5px
เพิ่มโมดูลเมนูลงในคอลัมน์
เลือกเมนูที่จะเพิ่ม
ถัดไป เพิ่มโมดูลเมนูในคอลัมน์แถวและเลือกเมนูไดนามิกที่คุณต้องการ
โลโก้ดาวน์โหลด
ดาวน์โหลด โลโก้.
ลบสีพื้นหลัง
ถัดไป ลบสีพื้นหลังสีขาวเริ่มต้นออกจากโมดูล
การตั้งค่าข้อความเมนู
เปลี่ยนเป็นแท็บ ออกแบบ ของโมดูลและแก้ไขพารามิเตอร์ข้อความของเมนูตามลำดับ:
- เมนูแบบอักษร: Poppins
- น้ำหนักแบบอักษรของเมนู: กึ่งหนา
- สีข้อความ: #003e51
- ขนาดข้อความของเมนู: 16px
- การจัดตำแหน่งข้อความ: ขวา
การตั้งค่าเมนูแบบเลื่อนลง
จากนั้นเปลี่ยนการตั้งค่าจากเมนูแบบเลื่อนลง
- เมนูแบบเลื่อนลง Line Color: #7159c8
การตั้งค่าไอคอน
เปลี่ยนการตั้งค่าไอคอนด้วย
- ไอคอนรถเข็นช็อปปิ้งสี: #670fff
- ค้นหาไอคอนสี: #670fff
- ไอคอนเมนูแฮมเบอร์เกอร์ สี: #670fff
ปรับขนาด
จากนั้นไปที่การตั้งค่าการปรับขนาดและกำหนดความกว้างสูงสุด โลโก้.
- โลโก้ ความกว้างสูงสุด: 280px
การเว้นวรรค
ลบระยะขอบด้านล่างเริ่มต้นออกจากโมดูลด้วย
- มาร์จิ้น (ล่าง): 0px
ทำให้ส่วนเหนียว
เมื่อเมนูของเราพร้อมแล้ว เราก็จะทำให้ส่วนนี้ติดหนึบ เปิดการตั้งค่าส่วนไปที่แท็บ ระดับสูง และใช้การตั้งค่าต่อไปนี้:
- ตำแหน่งที่เหนียว: Stick To Top
- ออฟเซ็ตจากองค์ประกอบที่ติดหนึบโดยรอบ: ใช่
- ค่าเริ่มต้นของการเปลี่ยนและรูปแบบที่ติดหนึบ: ใช่
สีพื้นหลังในสถานะเหนียว
จากนั้นเปลี่ยนสีพื้นหลังของส่วนให้เป็นสถานะติดหนึบ
- สีพื้นหลัง: #ffffff
เงากล่องสถานะเหนียว
ใช้เงากล่องกับส่วนด้วย
- สีเงา (เดสก์ท็อป): rgba(0,0,0,0)
- สีเงา (เหนียว): rgba(0,0,0,0.04)
เพิ่มไอคอนแฮมเบอร์เกอร์ลงในโมดูลเมนู
เพิ่ม CSS ID ให้กับโมดูลเมนู
ขั้นแรก เปิดการตั้งค่าโมดูลเมนู ไปที่แท็บ ระดับสูง และกำหนดรหัส CSS
- CSS ID: เมนู Divi
เพิ่มโมดูลรหัสภายใต้โมดูลเมนู
ถัดไป เพิ่มโมดูลรหัสภายใต้โมดูลเมนู
เพิ่มสคริปต์และแท็กสไตล์
เราจะใช้โค้ด CSS และ JQuery เพื่อเตรียมพร้อมสำหรับสิ่งนี้ เราจะเพิ่มสไตล์และแท็กสคริปต์
เพิ่มโค้ด CSS
เราจะวางโค้ด CSS ต่อไปนี้ระหว่างแท็กสไตล์:
.toggle-icon:after {
content: "61";
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
#divi-menu .et_pb_menu__menu>nav {
margin-right: 38px;
visibility: hidden;
opacity: 0;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
transform: translateY(50%);
}
.reveal-menu-items {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0%) !important;
}
.icon-switch:after {
content: '4d';
font-size: 32px;
font-family: ETmodules !important;
color: #003e51;
position: absolute;
top: 26px;
right: 0;
cursor: pointer;
}
เพิ่ม JQuery
เพิ่มบรรทัดการเปิดรหัส JQuery
ต่อไปเราจะมีรหัส JQuery เพิ่มบรรทัดต่อไปนี้ของรหัส JQuery ระหว่างแท็กสคริปต์:
jQuery(function($){
$(document).ready(function(){
});
});
สร้างตัวแปร
สร้างตัวแปรต่อไป
var toggleIcon = $('<div class="toggle-icon"></div>');
var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav');
วางไอคอนสลับในโมดูลเมนู
ถัดไป วางตัวแปรไอคอนสลับในโมดูลเมนูโดยใช้รหัสบรรทัดต่อไปนี้:
toggleIcon.insertAfter(desktopMenu);
เพิ่มฟังก์ชั่นการคลิก
เรายังเพิ่มฟังก์ชันการคลิกอีกด้วย
toggleIcon.click(function(){
desktopMenu.toggleClass('reveal-menu-items');
$(this).toggleClass('icon-switch');
});
บันทึกการเปลี่ยนแปลงตัวสร้างธีม Divi
เมื่อทุกอย่างเข้าที่แล้ว สิ่งที่เหลืออยู่ก็คือการบันทึกการดัดแปลง Divi Theme Builder ทั้งหมดและดูผลลัพธ์!
การสำรวจ
เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์สุดท้ายกัน
ดาวน์โหลด DIVI ทันที!!!
สรุป
ในบทความนี้ เราแสดงให้คุณเห็นถึงวิธีการสร้างสรรค์ด้วยส่วนหัวส่วนกลางของคุณใน Divi Theme Builder
โดยเฉพาะอย่างยิ่ง เราได้แสดงวิธีการเพิ่มไอคอนเมนูแฮมเบอร์เกอร์บนเดสก์ท็อปด้วยเช่นกัน ตามค่าเริ่มต้น ไอคอนแฮมเบอร์เกอร์จะแสดงบนแท็บเล็ตและมือถือ
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการ Divi ครั้งต่อไปของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์ของคุณให้เสร็จสมบูรณ์ หรือดูคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
