คุณต้องการสร้างส่วนท้ายที่ติดหนึบด้วย DIVI ที่จะเปิดเผยอย่างเต็มที่เมื่อเลื่อนลงมาหรือไม่
การเพิ่มส่วนท้ายติดหนึบให้กับ your เว็บไซต์เว็บ สามารถนำสัมผัสพิเศษเล็กๆ น้อยๆ ที่คุณกำลังมองหามาสู่ เว็บไซต์เว็บ. เอฟเฟกต์ "เปิดเผย" ซึ่งช่วยให้สามารถเปิดเผยส่วนท้ายได้เมื่อเลื่อนลงมา จะทำให้หน้าเว็บของคุณมีดีไซน์ที่สวยงามมาก
โดยปกติเอฟเฟกต์นี้ต้องใช้ CSS แบบกำหนดเองซึ่งมีการจำกัดและใช้งานยาก แต่ต้องขอบคุณ DIVI คุณจึงทำสำเร็จได้อย่างง่ายดาย
ในบทช่วยสอนนี้ เราจะแสดงวิธีสร้างเอฟเฟกต์การเปิดเผยให้กับส่วนท้ายของคุณ เพียงไม่กี่ขั้นตอนง่ายๆ
ขอเริ่มต้น!
การสำรวจ
นี่คือภาพรวมโดยย่อของส่วนท้ายที่ติดหนึบพร้อมเอฟเฟกต์เปิดเผยที่เราจะสร้างในบทช่วยสอนนี้
สร้างเทมเพลตส่วนท้ายใหม่
เยือน Divi >> ตัวสร้างธีม จากแดชบอร์ดของ WordPress
ที่นั่น คลิกที่ "เพิ่มส่วนท้ายทั่วโลก"
จากนั้นเลือก "สร้างส่วนท้ายของโลก"
ในบทช่วยสอนนี้ เราจะใช้เลย์เอาต์ที่สร้างไว้ล่วงหน้าเพื่อเร่งกระบวนการสร้าง แต่คุณสามารถทำได้ตั้งแต่เริ่มต้น เมื่อต้องการทำเช่นนี้ คลิก "โหลดจากห้องสมุด".
ใต้หน้าต่างป๊อปอัป โหลดจากห้องสมุด, ค้นหาและใช้เค้าโครง " มารีน่า เกี่ยวกับเพจ » จากแพ็คเลย์เอาต์ของมารีน่า
เมื่อโหลดเลย์เอาต์แล้ว ให้ลบส่วนทั้งหมดยกเว้นส่วนท้าย เราจะใช้ส่วนท้ายนี้เพื่อเพิ่มเอฟเฟกต์การเปิดเผย
เพิ่มเอฟเฟกต์เปิดเผยและทำให้ส่วนท้ายมีความเหนียว
ทำให้ส่วนท้ายมีความเหนียว
ดูเพิ่มเติม: จะสร้างเมนูเลื่อนและกดใน DIVI ได้อย่างไร?
ขั้นแรก เราต้องทำให้ส่วนท้ายมีความเหนียว ในการดำเนินการนี้ ให้เปิดการตั้งค่าส่วนและคลิกที่แท็บ สูง. ภายใต้ “เอฟเฟกต์การเลื่อน”, เปลี่ยนการตั้งค่าดังนี้:
- ตำแหน่งติดหนึบ: ติดที่ด้านล่าง
อัปเดตดัชนี Z สำหรับสถานะติดหนึบ
ต่อไป เราต้องกำหนดให้ส่วนท้ายของเรามีดัชนี z เป็น 0 เมื่อส่วนนั้นอยู่ในสถานะติดหนึบ ซึ่งจะทำให้ส่วนนั้นอยู่ด้านหลังส่วนหรือองค์ประกอบอื่นๆ บนเนื้อหาของหน้าเมื่อเลื่อน
ในการดำเนินการนี้ ให้อัปเดตตำแหน่งดัชนี Z โดยคลิกที่ไอคอนปักหมุดถัดจากตัวเลือกดัชนี Z จากนั้นอัปเดตดัชนี Z เป็น 0
- ดัชนี Z (เหนียว): 0
อัปเดตตัวยึดตำแหน่งท้ายกระดาษติดหนึบ Z index
เมื่อองค์ประกอบถูกกำหนดตำแหน่งเหนียวใน Divi องค์ประกอบตัวยึดตำแหน่งที่ซ้ำกันจะถูกสร้างขึ้นโดยอัตโนมัติเช่นกัน ซึ่งมีฟังก์ชันที่จำเป็นในการจัดตำแหน่งและออกแบบองค์ประกอบที่ติดหนึบโดยใช้ Divi Builder
ดูเพิ่มเติม: วิธีสร้างส่วนหัวส่วนกลางด้วยตัวสร้างธีมของ Divi
ในกรณีนี้ ตัวยึดตำแหน่งส่วนท้ายจะถูกสร้างขึ้นด้วยดัชนี z เริ่มต้นที่ 1 เราไม่ต้องการให้ส่วนท้ายแบบติดหนึบจริงของเรา (ขณะนี้มีดัชนี Z อยู่ที่ 0) อยู่ด้านหลังส่วนตัวยึดตำแหน่ง ดังนั้นเราจึงจำเป็นต้องอัปเดต ดัชนี Z ของตัวยึดตำแหน่งถึง -1
ในการดำเนินการนี้ ก่อนอื่นให้เพิ่มคลาส CSS ที่กำหนดเองในส่วนท้ายดังนี้:
- คลาส CSS: sticky-footer-reveal
จากนั้นเปิดการตั้งค่าหน้าโดยใช้เมนูการตั้งค่าของ ตัวสร้างธีม.
ไปที่ " ขั้นสูง " และป้อน CSS ต่อไปนี้ในกล่อง ปรับแต่ง CSS :
.sticky-footer-reveal.et_pb_sticky_placeholder {
z-index:-1;
}
การดำเนินการนี้จะบังคับให้ส่วนตัวยึดตำแหน่งอยู่ด้านหลังส่วนท้ายที่ติดหนึบ
บันทึกการเปลี่ยนแปลง
เมื่อเสร็จแล้ว ให้บันทึกการเปลี่ยนแปลงที่ทำกับเทมเพลตส่วนท้าย
บันทึกการเปลี่ยนแปลง Divi Theme Builder ด้วย
ผลสุดท้าย
หากต้องการดูผลลัพธ์สุดท้าย ให้ดูหน้าและเลื่อน
ดาวน์โหลด DIVI ทันที !!!
สรุป
ใน Divi ให้เพิ่มส่วนท้ายเหนียวให้กับคุณ เว็บไซต์เว็บ ไม่จำเป็นต้องมีปลั๊กอินหรือ CSS แบบกำหนดเองที่ซับซ้อน การใช้ตัวสร้าง ธีมคุณสามารถสร้างเทมเพลตส่วนท้ายได้อย่างง่ายดายด้วย เปิดเผยเอฟเฟกต์ ในไม่กี่นาที
หวังว่านี่จะช่วยให้การออกแบบส่วนท้ายของคุณดูดีขึ้นด้วยการโต้ตอบที่น่าดึงดูด ผู้เข้าชม จะขอบคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ พบกับเราได้ที่ ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ดูเพิ่มเติม ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
