ต้องการสร้างเมนูด้านข้างแบบเลื่อนและตอบสนองใน Divi หรือไม่?
เมื่อสร้าง เว็บไซต์เว็บคุณมักจะสงสัยว่าจะสร้างส่วนหัวประเภทใด ที่ใช้บ่อยที่สุดในเว็บคือแถบเมนูแนวนอนที่ด้านบน แต่ยังมีตัวเลือกอื่นๆ เช่น เมนูแบบเลื่อน
การเลื่อนเมนูมักจะช่วยให้คุณจำกัดพื้นที่ที่ใช้โดยส่วนหัวร่วม คุณจึงปล่อยให้เมนูเลื่อนออกปรากฏขึ้นเมื่อคุณ ผู้เข้าชม คลิกที่ไอคอนแฮมเบอร์เกอร์ที่มุมขวาบน
ดังนั้น การใช้เมนูแบบเลื่อนออกจะช่วยให้คุณเพิ่มการโต้ตอบพิเศษให้กับ เว็บไซต์เว็บ.
ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างโดยใช้เครื่องมือสร้างธีมของ Divi
เริ่มกันเลย!
การสำรวจ
ก่อนที่เราจะดำดิ่งลงไปในบทช่วยสอนนี้ มาดูผลลัพธ์ที่เราจะได้รับก่อน
ไปที่ Theme Builder และสร้างส่วนหัวส่วนกลาง
ไปที่ตัวสร้างธีม
ในการเริ่มต้น ให้ไปที่ Theme Builder จากเมนู Divi ที่อยู่ในแดชบอร์ด WordPress ของคุณและคลิกที่ "Add Global Header"
สร้างส่วนหัวส่วนกลาง
ดำเนินการต่อโดยเลือก 'สร้างส่วนหัวส่วนกลาง'
สร้างสไตล์ส่วนหัว
การตั้งค่ามาตรา
สีพื้นหลัง
เมื่ออยู่ในเครื่องมือแก้ไขเทมเพลต คุณจะสังเกตเห็นส่วนต่างๆ เปิดส่วนนี้และทำให้สีพื้นหลังโปร่งใส
- พื้นหลัง: rgba (255,255,255,0)
การเว้นวรรค
สลับไปที่แท็บ ลักษณะ และลบระยะขอบด้านล่างและด้านบนทั้งหมด
- ระยะขอบภายใน จุดยอด: 0px
- ระยะขอบภายในด้านล่าง: 0px
เริ่มหัวข้อ
ต่อไป เราจะเปลี่ยนตำแหน่งของส่วนโดยไปที่แท็บขั้นสูงและเปลี่ยนการตั้งค่าตำแหน่ง
- ตำแหน่ง: คงที่
- ที่ตั้ง: Top center
เพิ่มบรรทัดแรก
โครงสร้างของคอลัมน์
เมื่อคุณตั้งค่าส่วนเสร็จแล้ว ให้เพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลใด ๆ ให้เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าการปรับขนาดดังนี้:
- ความกว้างสูงสุด: 97%
- ความกว้างสูงสุด: 100%
การเว้นวรรค
เปลี่ยนการตั้งค่าระยะห่าง
- มาร์จิ้นภายในสูงสุด: 1%
- ระยะขอบภายในด้านล่าง: 0px
องค์ประกอบหลัก
จากนั้น ไปที่แท็บขั้นสูงและเพิ่มโค้ด CSS สองบรรทัดลงในองค์ประกอบหลักของบรรทัด ซึ่งจะช่วยให้เราจัดแนวตั้งได้ เนื้อหา ของคอลัมน์ในแถวของเรา
display: flex;
align-items: center;
เพิ่มโมดูลรูปภาพในคอลัมน์ 1
โลโก้ดาวน์โหลด
ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูลรูปภาพในคอลัมน์ 1 อัปโหลดโลโก้ของคุณ
เพิ่มโมดูลข้อความลงในคอลัมน์ 3
เพิ่มช่องว่าง 3 ช่องในพื้นที่เนื้อหา
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
สีพื้นหลัง
แก้ไขสีพื้นหลังของโมดูล
- พื้นหลัง: rgba (0,0,0,0.04)
การตั้งค่าข้อความ
ถัดไป สลับไปที่แท็บ ลักษณะ และลบความสูงของบรรทัดข้อความ ซึ่งจะช่วยให้เราควบคุมขอบเขตที่เราเพิ่มได้อย่างเต็มที่
- ความสูงของบรรทัดข้อความ: 0em
ปรับขนาด
เราจะแก้ไขพารามิเตอร์การปรับขนาดโมดูล
- ความกว้างสูงสุด: 120 พิกเซล
- การจัดตำแหน่งข้อความ: right
การเว้นวรรค
และเราจะทำพารามิเตอร์โมดูลให้สมบูรณ์โดยเปลี่ยนโมดูลให้เป็นสี่เหลี่ยมจัตุรัส สำหรับสิ่งนี้เราจะใช้ค่าช่องว่างภายในที่กำหนดเองในการตั้งค่าการเว้นวรรค
- ระยะขอบภายใน จุดยอด: 40px
- ระยะขอบภายในด้านล่าง: 60px
- ขอบด้านในด้านซ้าย: 40px
- ขอบด้านในขวา: 40px
เพิ่มบรรทัดที่สอง
โครงสร้างของคอลัมน์
แถวต่อไป! เราจะใช้บรรทัดนี้เพื่อออกแบบเมนูเลื่อนทั้งหมดของเรา ใช้โครงสร้างคอลัมน์ต่อไปนี้:
สีพื้นหลัง
โดยไม่ต้องเพิ่มโมดูล ให้เปิดการตั้งค่าแถวและเปลี่ยนสีพื้นหลังดังนี้:
- พื้นหลัง: #e7e0e2
ภาพพื้นหลัง
เรายังใช้ภาพพื้นหลังที่มีลวดลาย คุณสามารถใช้รูปแบบพื้นหลังที่คุณเลือกได้
- ขนาดภาพพื้นหลัง: ขนาดจริง
- ตำแหน่งภาพพื้นหลัง: center
- ทำซ้ำภาพพื้นหลัง: ทำซ้ำ
ปรับขนาด
ถัดไป สลับไปที่แท็บ สไตล์ และเปลี่ยนการตั้งค่าการปรับขนาดตามนั้น:
- ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
- ระยะห่างคอลัมน์: 1
- ความกว้างสูงสุด: 20% (เดสก์ท็อป), 40% (แท็บเล็ต), 60% (โทรศัพท์)
- ส่วนสูง: 100vh
การเว้นวรรค
เปลี่ยนการตั้งค่าการเว้นวรรคในขนาดหน้าจอต่างๆ
- ระยะขอบภายในของการประชุมสุดยอด: 10 vw (เดสก์ท็อป), 30 vw (แท็บเล็ต), 40 vw (โทรศัพท์)
ชายแดน
และกรอกพารามิเตอร์เส้นโดยเพิ่มเส้นขอบด้านซ้าย
- ความกว้างขอบด้านซ้าย: 10px
- สีขอบด้านซ้าย: #24394a
- สไตล์เส้นขอบด้านซ้าย: Double
เพิ่มโมดูลข้อความลงในคอลัมน์
เพิ่มเนื้อหา
ถึงเวลาเพิ่มรายการเมนูโมดูลข้อความรายการแรกแล้ว! เพิ่มสำเนาลงในกล่อง เนื้อหา.
เพิ่มการเชื่อมโยง
ดำเนินการต่อโดยเพิ่มลิงก์ที่เกี่ยวข้องไปยังรายการเมนู
- โมดูลลิงค์ URL: #
สีพื้นหลัง
แล้วเปลี่ยนสีพื้นหลัง
- พื้นหลัง: rgba (216,210,212,0.35)
การตั้งค่าข้อความ
ถัดไป สลับไปที่แท็บ Style'3 และเปลี่ยนการตั้งค่าข้อความดังนี้:
- แบบอักษรของข้อความ: Domine
- ข้อความแสงอ่อน: ข้อความตัวหนา
- ข้อความสีข้อความ: #000000
- ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
- การจัดตำแหน่งข้อความ: กึ่งกลาง
การเว้นวรรค
ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มค่าระยะห่างแบบกำหนดเองบนขนาดหน้าจอต่างๆ
- ระยะขอบล่าง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
- ระยะขอบภายในสูงสุด: 1vw
- ระยะขอบภายในด้านล่าง: 1vw
โมดูลข้อความโคลน (1 โมดูลต่อรายการเมนู)
เมื่อคุณเสร็จสิ้นโมดูลข้อความรายการเมนูแรก คุณสามารถโคลนได้หลายครั้งตามต้องการ เพียงตรวจสอบให้แน่ใจว่าโมดูลของคุณไม่เกินความสูงของหน้าต่าง
แก้ไขเนื้อหาและลิงก์ของโมดูลข้อความที่ซ้ำกัน
แก้ไข เนื้อหา และลิงก์ของแต่ละโมดูลข้อความที่ซ้ำกัน
เพิ่มโมดูลปุ่มไปที่คอลัมน์
เพิ่มสำเนา
โมดูลสุดท้ายที่เราต้องการในแถวนี้คือโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก
เพิ่มการเชื่อมโยง
เพิ่มลิงค์ด้วย
- URL ลิงค์ของปุ่ม: #
การวางแนว
สลับไปที่แท็บ ลักษณะ และเปลี่ยนการจัดตำแหน่งปุ่ม
- การจัดตำแหน่งปุ่ม: กึ่งกลาง
การตั้งค่าปุ่ม
ดำเนินการต่อโดยกำหนดโมดูลปุ่มเองดังนี้:
- ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
- ขนาดข้อความของปุ่ม: 0,7 vw (เดสก์ท็อป), 1,5 vw (แท็บเล็ต), 2,5 vw (โทรศัพท์)
- สีข้อความของปุ่ม: #000000
- ปุ่มพื้นหลัง: rgba (0,0,0,0)
- สีเส้นขอบของปุ่ม: #24394a
- ปุ่มรัศมีเส้นขอบ: 0 พิกเซล
- ระยะห่างระหว่างตัวอักษรของปุ่ม: 4px
- ปุ่มแบบอักษร: เปิดไม่มี
- ปุ่ม Soft Light: ข้อความตัวหนา
- ปุ่มรูปแบบการคัดลอก: TT
การเว้นวรรค
และตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่มค่าระยะห่างแบบกำหนดเองบนขนาดหน้าจอต่างๆ
- ขอบบน: 5vw
- ระยะขอบภายในสูงสุด: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
- ขอบด้านในด้านล่าง: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
- ระยะขอบภายในด้านซ้าย: 1,8 vw (เดสก์ท็อป), 3 vw (แท็บเล็ต), 4 vw (โทรศัพท์)
- ขอบด้านในขวา: 1,8 vw (เดสก์ท็อป), 3 vw (แท็บเล็ต), 4 vw (โทรศัพท์)
เพิ่มฟังก์ชันการเลื่อน
เพิ่ม CSS ID ให้กับโมดูลข้อความไอคอนเมนู
เมื่อเรามีองค์ประกอบทั้งหมดแล้ว ก็ถึงเวลาสร้างเอฟเฟกต์เมนูเลื่อนแบบตอบสนอง! ขั้นแรก เปิดโมดูลข้อความ (ที่มีขอบเขต) ในคอลัมน์ที่สามของแถวแรกของคุณ และใช้รหัส CSS ที่กำหนดเองในแท็บขั้นสูง เราจะใช้ CSS ID นี้เพื่อสร้างฟังก์ชันการคลิกในโค้ดของเรา
- CSS ID: เลื่อนในเปิด
เพิ่มคลาส CSS ในบรรทัด #2
จากนั้นเปิดบรรทัดที่สอง ไปที่แท็บขั้นสูง และเพิ่มคลาส CSS ที่กำหนดเอง เมื่อคลิกแล้วเส้นจะเลื่อน
- คลาส CSS: สไลด์ในเมนูคอนเทนเนอร์
เปลี่ยนตำแหน่งของบรรทัด #2
เราจะเปลี่ยนตำแหน่งบรรทัดนี้ด้วย สังเกตว่าออฟเซ็ตแนวนอนตรงกับความกว้างของเส้นบนขนาดหน้าจอต่างๆ อย่างไรในการตั้งค่าการปรับขนาด
- ตำแหน่ง: Absolute
- ตำแหน่ง: บนขวา
- ออฟเซ็ตแนวนอน: -20% (เดสก์ท็อป), -40% (แท็บเล็ต), -60% (โทรศัพท์)
เปลี่ยนความทึบของบรรทัด 2
และทำให้ความทึบเป็น 0 ในสถานะเริ่มต้น
opacity: 0;
เพิ่มโมดูลโค้ดลงในคอลัมน์ที่สองของแถวแรก
ใส่โค้ด CSS
ในการสร้างเอฟเฟกต์ฟังก์ชันการคลิกและจัดรูปแบบไม้คานของไอคอนแฮมเบอร์เกอร์ เราจำเป็นต้องมีโค้ด CSS เพิ่มโมดูลโค้ดในคอลัมน์ที่สองของแถวแรกของคุณและ วางโค้ด CSS ต่อไปนี้ระหว่างแท็กสไตล์ ดังที่คุณเห็นในหน้าจอการพิมพ์ด้านล่าง:
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2{
top: 10px;
}
.line-3{
top: 20px;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
ใส่รหัส JQuery
เราจะต้องเพิ่ม JQuery สำหรับฟังก์ชันการคลิกด้วย รับรองว่า วางโค้ดระหว่างแท็กสคริปต์ ดังที่คุณเห็นในหน้าจอการพิมพ์ด้านล่าง:
jQuery(ฟังก์ชัน($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('สไลด์ในเมนู'); }); });
บันทึกการเปลี่ยนแปลงตัวสร้างธีมและแสดงผลบนเว็บไซต์
เมื่อคุณทำองค์ประกอบทั้งหมดของส่วนหัวส่วนกลางเสร็จแล้ว สิ่งที่คุณต้องทำคือบันทึกการเปลี่ยนแปลงทั้งหมดและแสดงผลลัพธ์บนไซต์ของคุณ!
การสำรวจ
เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ครั้งสุดท้ายกัน
สรุป
โดยสรุป ในบทความนี้ เราได้แสดงให้คุณเห็นถึงวิธีใช้ตัวสร้างธีมของ Divi เพื่อสร้างเมนูการเลื่อนแบบตอบสนอง สำหรับสิ่งนี้ เราได้รวมองค์ประกอบและตัวเลือกในตัวที่ดีที่สุดของ Divi เข้ากับโค้ดฟังก์ชันการคลิกแบบกำหนดเอง ดังนั้น มันช่วยให้คุณมุ่งเน้นไปที่การออกแบบเมนูแบบเลื่อนออก และให้โค้ดดูแลส่วนการทำงานของส่วนหัวส่วนกลาง!
หากคุณมีคำถามหรือข้อเสนอแนะอย่าลังเลที่จะแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง
