วิธีทำให้องค์ประกอบหน้า Divi เหนียว

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

ในบทช่วยสอนนี้ ฉันจะแสดงวิธีง่ายๆ ในการทำให้องค์ประกอบใดๆ บนหน้าเว็บของคุณติดหนึบโดยใช้ปลั๊กอินชื่อ Sticky Menu (หรืออะไรก็ได้!) บน Scroll ใช้เวลาสักครู่ในการกำหนดการตั้งค่าปลั๊กอิน สิ่งที่คุณต้องทำคือเพิ่ม CSS ID ที่กำหนดเองให้กับองค์ประกอบของคุณ มันง่ายมาก

เข้าไปกันเถอะ!

สิ่งที่คุณต้องการสำหรับบทช่วยสอนนี้

สำหรับบทช่วยสอนนี้ คุณจะต้องมีสิ่งต่อไปนี้:

• ธีม Divi
• เมนูเหนียว (หรืออะไรก็ได้!) บนปลั๊กอินเลื่อน
• เค้าโครงหน้าบล็อกนักบัญชี (มีให้ใน Divi Builder)

วิธีทำให้องค์ประกอบหน้า Divi เหนียว

สมัครสมาชิกช่อง Youtube ของเรา

การกำหนดค่าการตั้งค่าปลั๊กอิน

เมื่อคุณติดตั้งและเปิดใช้งาน Sticky Menu (หรืออะไรก็ได้!) บนปลั๊กอิน Scroll บนธีม Divi แล้ว ให้ไปที่แดชบอร์ดของ WordPress และไปที่ Settings > Sticky Menu (หรืออะไรก็ได้!)

ภายใต้แท็บ การตั้งค่าพื้นฐาน ให้อัปเดตตัวเลือกดังต่อไปนี้:

ขั้นแรก คุณจะต้องเพิ่มตัวระบุเฉพาะสำหรับองค์ประกอบที่ติดหนึบของคุณ ซึ่งอาจเป็น CSS ID หรือ Class จากนั้นเราจะเพิ่มตัวระบุนี้ไปยังองค์ประกอบของเราใน Divi ในภายหลัง เพื่อให้จำง่าย ฉันจะเพิ่ม CSS ID “#sticky”

องค์ประกอบเหนียว: #sticky

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

ช่องว่างระหว่างส่วนบนของหน้าและองค์ประกอบที่ติดหนึบ: 54 พิกเซล

เป็นความคิดที่ดีที่จะปิดการใช้งานองค์ประกอบติดหนึบบนมือถือ ในการดำเนินการนี้ เราต้องกำหนดค่าปลั๊กอินไม่ให้ติดองค์ประกอบเมื่อหน้าจอมีขนาดเล็กกว่า 980px

ไม่ติดองค์ประกอบเมื่อหน้าจอมีขนาดเล็กกว่า: 980 พิกเซล

บันทึกการตั้งค่าของคุณแล้วไปที่แท็บการตั้งค่าขั้นสูงและอัปเดตสิ่งต่อไปนี้:

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

ดัชนี Z: 99999

เพื่อให้คุณทราบว่าองค์ประกอบต่างๆ ถูกจัดลำดับใน Divi อย่างไร ส่วนต่างๆ จะมีดัชนี z เท่ากับ 2 คอลัมน์มีดัชนี z เท่ากับ 9 และแถบส่วนหัว/การนำทางมีดัชนี z เท่ากับ 99999 โดยพื้นฐานแล้ว เรา ต้องการให้องค์ประกอบ Sticky ของเรามีค่าต่ำกว่าดัชนี z 1 หมายเลขสำหรับการนำทางส่วนหัว วิธีนี้จะทำให้แน่ใจว่าองค์ประกอบที่ติดหนึบอยู่เหนือสิ่งอื่นใดบนหน้ายกเว้นการนำทาง สิ่งนี้จะมีประโยชน์เมื่อใดก็ตามที่คุณต้องการหยุดองค์ประกอบของคุณและดันมันขึ้นไปบนหน้า เพื่อที่องค์ประกอบที่ติดหนึบจะไม่นั่งอยู่บนการนำทางในขณะที่คุณเลื่อน (ดูยุ่งเหยิงและแตกหัก)

ต่อไป เราสามารถเพิ่มตัวระบุองค์ประกอบ "ดันขึ้น" คุณสามารถมองว่าสิ่งนี้เป็นตัวกั้นสำหรับองค์ประกอบที่เหนียวเหนอะหนะของเรา โดยทั่วไปจะเป็นองค์ประกอบส่วนท้าย โดยพื้นฐานแล้ว สิ่งนี้จะระบุองค์ประกอบที่จะหยุดองค์ประกอบที่ติดหนึบเมื่อเลื่อนลงมาในหน้า ซึ่งช่วยให้องค์ประกอบ Sticky ถูกผลักขึ้นพร้อมกับส่วนที่เหลือของหน้า สำหรับตัวอย่างนี้ ฉันจะตั้งค่าตัวระบุด้วย CSS ID “#stop”

องค์ประกอบดันขึ้น: #stop

บันทึกการตั้งค่า.

ตอนนี้เรามีพลังที่เราต้องการเพื่อสร้างองค์ประกอบที่เหนียวแน่น!

ทำให้องค์ประกอบหน้า Divi เหนียว

เพื่อแสดงวิธีทำให้องค์ประกอบ Divi ติดหนึบ ฉันจะใช้หน้าบล็อกนักบัญชีของ Divi จากชุดเค้าโครงนักบัญชี ในการเริ่มต้น ให้สร้างเพจใหม่ ตั้งชื่อเพจของคุณ และปรับใช้ Visual Builder จากนั้นเลือกตัวเลือก “Choose a Premade Layout” จากป๊อปอัปการโหลดจากไลบรารี ให้เลือก Accountant Layout Pack และเลือกหน้าบล็อก

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

วิธีทำให้คอลัมน์ติดหนึบ

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

ในการทำให้คอลัมน์ 2 ติดหนึบ ให้เปิดการตั้งค่าแถวของแถวที่มีคอลัมน์ที่เราต้องการกำหนดเป้าหมาย จากนั้น ภายใต้แท็บขั้นสูง เพิ่ม CSS ID “เหนียว” ซึ่งสอดคล้องกับตัวระบุเฉพาะองค์ประกอบเหนียวที่เราเพิ่มในการตั้งค่าปลั๊กอินของเรา

CSS ID: เหนียว

(หมายเหตุ: อย่าใส่สัญลักษณ์แฮชแท็ก (หรือปอนด์) ก่อนรหัสที่นี่ นอกจากนี้ ให้ตรวจสอบให้แน่ใจว่าคุณเพิ่มลงใน CSS ID ไม่ใช่คลาส CSS)

บันทึกการตั้งค่าและดูตัวอย่างเวอร์ชันสดของหน้า หากคุณเลื่อนลง คุณจะสังเกตเห็นว่าคอลัมน์ 2 (ที่มีทั้งสองโมดูล) จะติดหนึบเมื่อคอลัมน์นั้นกลายเป็น 54px จากด้านบนของหน้าต่างและอยู่ที่ตำแหน่งนั้นเมื่อคุณเลื่อนต่อไป

หยุดองค์ประกอบเหนียวที่ส่วน

อย่างที่คุณเห็น องค์ประกอบยังคงเหนียวแน่นเพื่อให้ซ้อนทับเนื้อหาของส่วนอื่นๆ ด้านล่าง เพื่อป้องกันไม่ให้สิ่งนี้เกิดขึ้น เราสามารถใช้ตัวระบุ "ดันขึ้น" (#stop) ที่เราเพิ่มในการตั้งค่าปลั๊กอิน

หากต้องการหยุดองค์ประกอบที่ติดหนึบในส่วนด้านล่าง เราจำเป็นต้องเปิดการตั้งค่าส่วนและเพิ่ม CSS ID “หยุด”

CSS ID: หยุด

ตอนนี้ไปดูตัวอย่างเวอร์ชันสดของหน้า สังเกตว่าองค์ประกอบเหนียวหยุดที่ส่วนที่คุณระบุ

สวยเย็นใช่มั้ย?

วิธีสร้างโมดูล Sticky

ในการทำให้โมดูลเดียวมีความเหนียว คุณจะต้องทำการปรับเปลี่ยนใน Divi เพื่อให้แน่ใจว่าองค์ประกอบของคุณมีดัชนี z ที่ถูกต้อง เพื่อให้วางอยู่บนองค์ประกอบอื่นๆ ตลอดทั้งหน้าเมื่อเลื่อน ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้ Divi กำหนด aa z-index เป็น 2 ให้กับทุกส่วน และปลั๊กอินใช้ดัชนี z ของ 99999 กับองค์ประกอบที่ติดหนึบ แต่เนื่องจากโมดูลไม่สามารถสั่ง (หรือจัดทำดัชนี) เหนือองค์ประกอบหลัก (ส่วน) โมดูลจะยังคงนั่งอยู่หลังโมดูลอื่นๆ บนหน้า ในการแก้ไขปัญหานี้ เราต้องตรวจสอบให้แน่ใจและให้ส่วนที่ถือโมดูลเหนียวของเราเป็นดัชนี z ที่ 99999 ด้วยตนเอง

เพื่อแสดงสิ่งนี้ ฉันจะใช้เค้าโครงหน้าบล็อกนักบัญชีแบบเดียวกับที่เราใช้ก่อนหน้านี้ ก่อนที่เราจะเพิ่ม CSS ID ของเราลงในโมดูล อันดับแรก เราต้องลบ CSS ID (เหนียว) ที่เราตั้งค่าไว้สำหรับคอลัมน์ 2 แล้วจึงนำ CSS ID (หยุด) ที่เราตั้งค่าไว้สำหรับส่วนด้านล่างออก หลังจากนั้น เปิดการตั้งค่าโมดูล Social Media Follow และเพิ่ม CSS ID “ติดหนึบ” ให้กับโมดูล

หากคุณดูหน้าสด คุณจะสังเกตเห็นองค์ประกอบที่ติดหนึบถูกซ่อนไว้เมื่อซ้อนทับโมดูลอื่นๆ ในส่วนด้านล่างเมื่อคุณเลื่อน

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

z-index: 99998;

ตอนนี้ตรวจสอบหน้าสด สังเกตว่าไอคอนโซเชียลมีเดียจะติดอยู่ที่ด้านบนของหน้าอย่างไร (54px จากด้านบนสุด) ใต้การนำทางคงที่แล้วอยู่เหนือโมดูลอื่นๆ เมื่อคุณเลื่อนดู

ทำให้ส่วนเหนียว

ในการทำให้ทั้งส่วนมีความเหนียว คุณจะต้องทำตามขั้นตอนเดียวกันในการเพิ่ม CSS ID "เหนียว" ในส่วนที่คุณเลือก ไม่จำเป็นต้องอัปเดตดัชนี z โดยใช้ css ที่กำหนดเอง เนื่องจากปลั๊กอินทำเพื่อคุณโดยอัตโนมัติ

เอฟเฟกต์โฮเวอร์อาจทำให้องค์ประกอบที่เหนียวเหนอะหนะผิดพลาด

หากคุณใช้เอฟเฟกต์โฮเวอร์ตลอดทั้งหน้าหรือองค์ประกอบที่ติดหนึบ คุณอาจพบข้อบกพร่องบางอย่าง หากเกิดเหตุการณ์นี้ คุณอาจต้องปิดใช้งานเอฟเฟกต์การเลื่อนองค์ประกอบแบบติดหนึบ

เพียงหนึ่งองค์ประกอบที่ติดหนึบต่อหน้า

ปลั๊กอินอนุญาตเพียงหนึ่งองค์ประกอบเหนียวต่อหน้า ดังนั้นหากคุณต้องการเพิ่มองค์ประกอบที่ติดหนึบหลายรายการ คุณจะต้องใช้โซลูชันขั้นสูงกว่านี้ (หรือปลั๊กอินอื่นที่รองรับสิ่งนี้)

ความคิดสุดท้าย

ฉันหวังว่าบทความนี้จะเป็นประโยชน์ในการจัดเตรียมวิธีง่ายๆ ในการทำให้องค์ประกอบของหน้า Divi ติดหนึบ ใช้สำหรับสร้างเมนูย่อยแบบติดหนึบ, CTA แบบติดหนึบ, ข้อเสนอโปรโมชันแบบติดหนึบ และอะไรก็ได้ที่คุณนึกออก ขอให้สนุกกับการสำรวจความเป็นไปได้!

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็นด้านล่าง

ไชโย!