คุณต้องการที่จะสร้างสรรค์โดยการสร้างเมนูเหนียวที่ขยายได้เมื่อวางเมาส์เหนือด้วย Divi ?
ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างเมนูปักหมุดที่ขยายได้บนโฮเวอร์โดยใช้ โดย Divi's Mechanic Layout Pack .
เราจะจัดการตัวอย่างสองแบบที่แตกต่างกันซึ่งคุณสามารถสร้างใหม่ตั้งแต่ต้นและนำไปใช้กับ .ประเภทใดก็ได้ เว็บไซต์เว็บ ที่คุณสร้าง!
เมนูจะแสดงเมื่อวางเมาส์เหนือเดสก์ท็อปและเปิดใช้งานเมื่อคลิกบนอุปกรณ์มือถือ
Let 's go!
การสำรวจ
ก่อนดำดิ่งสู่บทช่วยสอนนี้ มาดูผลลัพท์ของหน้าจอขนาดต่างๆ กันก่อน
ตัวอย่าง 1
คอมพิวเตอร์ตั้งโต๊ะ
โทรศัพท์มือถือ
ดาวน์โหลด DIVI ทันที!!!
ตัวอย่าง 2
คอมพิวเตอร์ตั้งโต๊ะ
โทรศัพท์มือถือ
ดาวน์โหลด DIVI ทันที!!!
ขั้นตอนทั่วไป
ปิดการใช้งานการนำทางคงที่
เข้าถึงตัวเลือกธีม Divi
เราจะเริ่มต้นด้วยขั้นตอนทั่วไป ขั้นตอนเหล่านี้เหมือนกันสำหรับทั้งสองตัวอย่างและจำเป็นเพื่อให้ได้ผลลัพธ์ที่ต้องการ
หากคุณวางแผนที่จะใช้เมนู Sticky แบบขยายที่ด้านล่างของหน้า คุณอาจต้องการเว้นแถบเมนูหลักที่ด้านบน
อ่าน: วิธีสร้างภาพซ้อนทับแบบกำหนดเองใน Divi
สำหรับสิ่งนี้คุณจะต้องไป Divi >> ตัวเลือกธีม จากแดชบอร์ด WordPress
ปิดการใช้งานการนำทางคงที่
ที่นั่นคุณจะต้องปิดการใช้งาน “แถบนำทางคงที่” เพื่อให้แน่ใจว่าไม่มีที่ว่างเหลือที่ด้านบนสุดของหน้าของคุณ
- แถบนำทางคงที่: ปิดการใช้งาน
ซ่อนแถบเมนูหลักในหน้า
เปิดการตั้งค่าหน้า
ไปที่หน้าที่คุณต้องการเพิ่มเมนู Sticky ที่ขยายได้ และเปิดการตั้งค่าหน้า
เพิ่ม CSS . ที่กำหนดเอง
ซ่อนเมนูหลักโดยเพิ่มบรรทัดโค้ด CSS ต่อไปนี้ในหน้าของคุณ
#main-header {
display: none;
}
เพิ่มส่วนใหม่ที่ท้ายหน้า
ไม่ว่าคุณจะต้องการสร้างตัวอย่างใด ขั้นตอนพื้นฐานบางอย่างยังคงเหมือนเดิม ขั้นตอนแรกคือการเพิ่มส่วนปกติที่ด้านล่างของหน้า
การเว้นวรรค
เปิดการตั้งค่าส่วนและเปลี่ยนการตั้งค่าต่อไปนี้ในแท็บ ออกแบบ ภายใต้ตัวเลือก การเว้นวรรค.
- ช่องว่างภายใน (บนและล่าง): 0px
เพิ่มบรรทัดใหม่
โครงสร้างของคอลัมน์
ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:
ปรับขนาด
โดยไม่ต้องเพิ่มโมดูลใด ๆ ให้เปิดการตั้งค่าบรรทัดและเปลี่ยนการตั้งค่าต่อไปนี้ในแท็บ ออกแบบ ภายใต้ตัวเลือก การกำหนดขนาด
- ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
- ความกว้างของรางน้ำ: 1
- ความกว้าง: 100%
- ความกว้างสูงสุด: 100%
การเว้นวรรค
จากนั้นลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดภายใต้ตัวเลือก การเว้นวรรค.
- ช่องว่างภายใน (บนและล่าง): 0px
องค์ประกอบหลัก
เราอนุญาตให้ทั้งแถวติดกับด้านล่างสุดของหน้าของเราโดยเพิ่มโค้ด CSS ง่ายๆ สองบรรทัดลงในองค์ประกอบแถวหลัก
bottom: 0px;
position: fixed;
ดัชนี Z
และเราจะตรวจสอบให้แน่ใจว่าบรรทัด (และโมดูลข้อความที่เราจะเพิ่มในขั้นตอนถัดไป) อยู่เหนือทุกสิ่ง เนื้อหา ของหน้าโดยการเพิ่มดัชนี Z ขยายตัวเลือก ตำแหน่ง.
- ดัชนี Z: 99
เพิ่มโมดูลโค้ดลงในคอลัมน์
เพิ่มโค้ด CSS ระหว่างแท็กสไตล์
ส่วนสุดท้ายของขั้นตอนทั่วไปคือการเพิ่มโมดูลโค้ดในบรรทัดใหม่ โค้ด CSS ที่เราเพิ่มในโมดูลโค้ดนี้จะช่วยให้เราบรรลุผลการเปิดเผยเมื่อโฮเวอร์
ดูเพิ่มเติม: วิธีสร้างเมนู Spinning Wheel บน Hover ใน Divi
วางโค้ด CSS ต่อไปนี้ลงในโมดูล:
<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>
ตัวอย่างการออกแบบ #1
เพิ่มโมดูลข้อความลงในคอลัมน์
เพิ่มเนื้อหา
เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว เราสามารถเริ่มมุ่งเน้นไปที่ตัวอย่างการออกแบบที่แตกต่างกันสองแบบ เริ่มจากตัวอย่างแรก!
เพิ่มโมดูลข้อความลงในคอลัมน์ของแถวของคุณ ในพื้นที่ของ เนื้อหาเราใช้ลักษณะย่อหน้าเพื่อแสดงข้อความ '≡เมนู'.
จากนั้นเราวางรายการเมนูทั้งหมดในรายการที่ไม่เรียงลำดับ เราจะเพิ่มลิงก์ไปยังชื่อหน้าแต่ละหน้าทีละรายการ
สีพื้นหลังเริ่มต้น
ไปที่การตั้งค่าพื้นหลังของโมดูลและเปลี่ยนสีพื้นหลัง
- ความเป็นมา: #ffffff
สีพื้นหลังบนโฮเวอร์
เปลี่ยนสีพื้นหลังนี้เมื่อโฮเวอร์
- พื้นหลัง (โฮเวอร์): rgba(255,255,255,0.83)
พื้นหลังไล่ระดับสี
และยังเพิ่มพื้นหลังการไล่ระดับสีเริ่มต้น
- ซ้ายสี: rgba(255,255,255,0)
- สีขวา: #ffffff
- ตำแหน่งขวา: 60%
การตั้งค่าข้อความเริ่มต้น
ดำเนินการต่อโดยไปที่แท็บ ออกแบบ และเปลี่ยนการตั้งค่าข้อความ
- แบบอักษรของข้อความ: Khand
- น้ำหนักแบบอักษร: ตัวหนา
- สีข้อความ: #021827
- ขนาดตัวอักษร: 3vh
- ปฐมนิเทศ: ศูนย์
เลื่อนการตั้งค่าข้อความ
เปลี่ยนการตั้งค่าข้อความโฮเวอร์บางส่วน
- สีข้อความ (โฮเวอร์: rgba(255,255,255,0)
- ขนาดข้อความ (วางเมาส์เหนือ): 0vh
ลิงก์การตั้งค่าข้อความ
ถัดไป ไปที่การตั้งค่าข้อความลิงก์และเปลี่ยนสีข้อความลิงก์
- ลิงค์สีข้อความ: #000000
รายการค่าเริ่มต้น (เดสก์ท็อป)
สลับไปที่การตั้งค่าข้อความรายการเริ่มต้นและปรับแต่งตามที่คุณต้องการ ตรวจสอบให้แน่ใจว่าคุณใช้ '0px' สำหรับขนาดข้อความในสถานะเริ่มต้น
- แบบอักษรของรายการที่ไม่เรียงลำดับ: Khand
- รายการรูปแบบตัวอักษร: TT
- การจัดตำแหน่งข้อความรายการ: กึ่งกลาง
- สีข้อความที่ไม่เรียงลำดับ: rgba(255,255,255,0)
- ขนาดข้อความรายการที่ไม่เรียงลำดับ: 0px
- รายการน้ำหนักข้อความ: 0em
- ตำแหน่งสไตล์รายการที่ไม่เรียงลำดับ: ภายใน
การตั้งค่ารายการวางเมาส์
จากนั้นเปลี่ยนค่าบางค่าบนโฮเวอร์เพื่อให้รายการเมนูปรากฏขึ้น
- รายการสีข้อความ (โฮเวอร์): #000000
- ขนาดข้อความรายการที่ไม่เรียงลำดับ (โฮเวอร์): 2vh
- ความสูงของข้อความรายการที่ไม่เรียงลำดับ (โฮเวอร์): 2,1 em
ระยะห่างเริ่มต้น (เดสก์ท็อป)
จากนั้นไปที่การตั้งค่าระยะห่าง (ตัวเลือก การเว้นวรรค) และกำหนดรูปร่างให้กับโมดูลข้อความ
- Margin (ซ้ายและขวา): 45vw (เดสก์ท็อป), 39vw (แท็บเล็ต), 33vw (โทรศัพท์)
- Padding (บนและล่าง): 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
โฮเวอร์ระยะห่าง
แก้ไขค่าเดียวกันเหล่านี้เมื่อวางเมาส์เหนือ
- ระยะขอบ (ซ้ายและขวา): 14vw
- Padding (บนและล่าง): 8vw
เส้นขอบเริ่มต้น (เดสก์ท็อป)
ไปที่การตั้งค่าเส้นขอบและตรวจดูให้แน่ใจว่ามุมโค้งมนแต่ละมุมมีค่า '0px'
เส้นขอบบนโฮเวอร์
เปิดใช้งานตัวเลือกโฮเวอร์ที่มุมโค้งมนและเปลี่ยนค่าเป็นซ้ายบนและขวาบน
- ซ้ายบน: 50vw
- บนขวา: 50vw
กล่องเงา
ดำเนินการต่อโดยให้ความลึกแก่โมดูลโดยใช้เงากล่อง เพื่อให้แน่ใจว่าเมนูจะไม่ถูกมองข้ามบนหน้า
- ความชัดของเงากล่อง: 1000px
- เงาสี: rgba(0,0,0,0.68)
ชั้น CSS
นอกจากนี้เรายังเพิ่มคลาส CSS ให้กับโมดูล
- CSS Class: dt-menu
การเปลี่ยน
สุดท้าย ลดระยะเวลาการเปลี่ยนแปลงในการตั้งค่าการเปลี่ยน
- ระยะเวลาการเปลี่ยนภาพ: 100ms
ตัวอย่างการออกแบบ #2
เพิ่มโมดูลข้อความลงในคอลัมน์
เพิ่มเนื้อหา
มาต่อกันที่ตัวอย่างที่สองกัน! ที่นี่เราจะเพิ่มอีกครั้ง '≡เมนู' โดยใช้รูปแบบข้อความย่อหน้าและรายการเมนูโดยใช้รายการที่ไม่เรียงลำดับ เราจะเพิ่มลิงก์ไปยังรายการเมนูแต่ละรายการด้วย
สีพื้นหลังเริ่มต้น (เดสก์ท็อป)
ไปที่การตั้งค่าพื้นหลังและเปลี่ยนสีพื้นหลัง
- ความเป็นมา: #ffffff
สีพื้นหลังบนโฮเวอร์
เปลี่ยนสีพื้นหลังบนโฮเวอร์
- พื้นหลัง (โฮเวอร์): #f71535
การตั้งค่าข้อความเริ่มต้น (เดสก์ท็อป)
จากนั้นไปที่แท็บ ออกแบบ และทำการเปลี่ยนแปลงลักษณะที่ปรากฏของข้อความ
- แบบอักษรของข้อความ: Khand
- น้ำหนักแบบอักษร: ตัวหนา
- สีข้อความ: #021827
- ขนาดตัวอักษร: 3vh
เลื่อนการตั้งค่าข้อความ
เปลี่ยนการตั้งค่าเหล่านี้เมื่อวางเมาส์เหนือ
- สีข้อความ (โฮเวอร์): rgba(255,255,255,0)
- ขนาดข้อความ (วางเมาส์เหนือ): 0vh
ลิงก์การตั้งค่าข้อความ
ไปที่การตั้งค่าข้อความและเปลี่ยนสีข้อความลิงก์
- สีของข้อความลิงก์: #ffffff
การตั้งค่าข้อความรายการเริ่มต้น
เปลี่ยนการตั้งค่าการออกแบบของรายการที่ไม่เรียงลำดับด้วย
- แบบอักษรของรายการที่ไม่เรียงลำดับ: Khand
- รูปแบบตัวอักษรของรายการที่ไม่เรียงลำดับ: TT
- การจัดตำแหน่งข้อความรายการ: center
- สีข้อความของรายการที่ไม่เรียงลำดับ: rgba(255,255,255,0)
- ขนาดรายการข้อความ: 0px
- รายการที่ไม่เรียงลำดับ ความสูงของบรรทัด: 0em
- ตำแหน่งสไตล์รายการที่ไม่เรียงลำดับ: ภายใน
การตั้งค่ารายการวางเมาส์
และเปลี่ยนค่าเหล่านี้บางส่วนเมื่อวางเมาส์ไว้
- สีข้อความของรายการที่ไม่เรียงลำดับ: #ffffff
- ขนาดรายการข้อความ: 2vh
- รายการที่ไม่เรียงลำดับ ความสูงของบรรทัด: 2,1 em
ระยะห่างเริ่มต้น (เดสก์ท็อป)
จากนั้นไปที่การตั้งค่าระยะห่างและให้พื้นที่โมดูลบางส่วน
- Margin (ขวา): 88 vw (เดสก์ท็อปและแท็บเล็ต), 71 vw (โทรศัพท์)
- Padding (บน): 6 vw (เดสก์ท็อป)), 10 vw (แท็บเล็ต), 18 vw (โทรศัพท์)
- Padding (ด้านล่าง): 4 vw (เดสก์ท็อป), 10 vw (แท็บเล็ต), 12 vw (โทรศัพท์)
- ช่องว่างภายในด้านซ้าย: 1vw
โฮเวอร์ระยะห่าง
เปลี่ยนค่าเมื่อโฮเวอร์
- มาร์จิ้น (ขวา): 59vw
- ช่องว่างภายใน: (บน)13vw, (ล่าง)8vw, (ซ้าย)1vw, (ขวา)13vw
ชายแดน
และเพื่อสร้างการออกแบบควอแดรนท์นี้ เราจะเปลี่ยนเส้นขอบบนขวาในการตั้งค่าเส้นขอบ
- บนขวา: 50vw
กล่องเงา
เราจะเพิ่มเงาของกล่องเพื่อสร้างความลึกให้กับหน้า
- ความแรงของกล่องเงาเบลอ: 1000px
- เงาสี: rgba(0,0,0,0.68)
ชั้น CSS
ต่อไปเราจะเพิ่มคลาส CSS ใน tab ระดับสูง.
- CSS Class: dt-menu
การเปลี่ยน
และลดระยะเวลาของการเปลี่ยนแปลงในแท็บ ระดับสูง เพื่อสร้างการเปลี่ยนแปลงอย่างรวดเร็ว
- ระยะเวลาการเปลี่ยนภาพ: 100ms
การสำรวจ
ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ
ตัวอย่าง # 1
สำนัก
โทรศัพท์มือถือ
ดาวน์โหลด DIVI ทันที!!!
ตัวอย่าง # 2
คอมพิวเตอร์ตั้งโต๊ะ
โทรศัพท์มือถือ
ดาวน์โหลด DIVI ทันที!!!
สรุป
ในบทความนี้ เราแสดงวิธีสร้างเมนูปักหมุดที่ขยายได้โดยใช้ ของ Divi Mechanic Layout Pack. เราได้ครอบคลุมสองตัวอย่างการออกแบบที่แตกต่างกันซึ่งคุณสามารถปรับเปลี่ยนและใช้กับ .ประเภทใดก็ได้ เว็บไซต์เว็บ ที่คุณสร้าง!
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการต่อไปของคุณ Divi. หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
