คู่มือการทำความเข้าใจและการใช้ตำแหน่งคงที่ใน Divi

คุณสมบัติตำแหน่งคงที่เป็นประเภทตำแหน่งที่สำคัญในการเรียนรู้วิธีใช้อย่างถูกต้อง องค์ประกอบคงที่มีความสำคัญต่อการปรับปรุงประสบการณ์ผู้ใช้บนเว็บไซต์ของคุณ ส่วนหัวคงที่ยังอยู่ในมุมมองเมื่อเลื่อนดูหน้าเว็บ ทำให้ผู้ใช้ไปยังส่วนต่างๆ ของไซต์ได้ง่ายขึ้น แถบด้านข้างคงที่ทำให้ CTA และ Email Optins ที่สำคัญมองเห็นได้ ช่วยเพิ่ม Conversion และเช่นเดียวกันสำหรับแถบการแจ้งเตือนแบบคงที่ ป๊อปอัป และอื่นๆ อีกมากมาย เมื่อเราเข้าใจว่าตำแหน่งคงที่ทำงานอย่างไรและใช้งานอย่างถูกต้องใน Divi อย่างไร เราจะมีเครื่องมือออกแบบที่ทรงพลังเพื่อยกระดับไซต์ Divi ของเราไปอีกระดับ

ในโพสต์นี้เราจะกล่าวถึง:

• ภาพรวมการวางตำแหน่งสี่ประเภทของ Divi
• ตำแหน่งคงที่ "ตำแหน่ง" องค์ประกอบใน Divi
• การใช้ตัวเลือกตำแหน่งคงที่ใน Divi
• เคล็ดลับที่ควรทราบเมื่อใช้ตำแหน่งคงที่
• 6 วิธีที่เป็นประโยชน์ในการใช้ตำแหน่งคงที่ใน Divi

ตรวจสอบออก!

ภาพรวมการวางตำแหน่งสี่ประเภทของ Divi

ตำแหน่งคงที่เป็นหนึ่งในสี่ประเภทตำแหน่งที่มีอยู่ในตัวเลือกตำแหน่งของ Divi นี่คือภาพรวมโดยย่อของแต่ละรายการด้านล่าง

คงที่ (ค่าเริ่มต้น)

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

ญาติ

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

สำหรับข้อมูลเพิ่มเติม โปรดดูคำแนะนำในการทำความเข้าใจและการใช้ตำแหน่งสัมพัทธ์ใน Divi

แอบโซลูท

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

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

แก้ไขแล้ว

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

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

ตำแหน่งคงที่ "ตำแหน่ง" องค์ประกอบใน Divi

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

ความแตกต่างใหญ่ระหว่างค่าคงที่และค่าสัมบูรณ์คือ ไม่เหมือนกับตำแหน่งที่แน่นอนซึ่งสัมพันธ์กับคอนเทนเนอร์หลัก ตำแหน่งคงที่จะสัมพันธ์กับหน้าต่างเบราว์เซอร์หรือวิวพอร์ต นี่คือเหตุผลที่องค์ประกอบคงที่บอกว่าในมุมมองเมื่อผู้ใช้เลื่อนหน้าลงและองค์ประกอบตำแหน่งที่แน่นอนอาจไม่

นี่คือภาพประกอบว่าตำแหน่งทั้งสาม (สัมพัทธ์ สัมบูรณ์ และคงที่) ทำงานอย่างไรเมื่อเลื่อนหน้าลง ขอให้สังเกตว่าโมดูลคงที่ยังคงอยู่ (ตำแหน่งที่สัมพันธ์กับเบราว์เซอร์) ขณะที่ผู้ใช้เลื่อน

การใช้ตัวเลือกตำแหน่งคงที่ใน Divi

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

การปรับตำแหน่งฐานของตำแหน่งคงที่

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

การใช้ออฟเซ็ตกับตำแหน่งคงที่

การควบคุมออฟเซ็ตแนวตั้งและแนวนอนช่วยให้คุณปรับตำแหน่งฐานขององค์ประกอบคงที่เพิ่มเติมทั่วทั้งแกนของตำแหน่งได้

ค่า Offset Origin และค่า Offset จะทำงานร่วมกันเพื่อจัดตำแหน่งองค์ประกอบของเราทุกที่ที่เราต้องการภายในวิวพอร์ตของเบราว์เซอร์ ในตัวอย่างนี้ เรามีโมดูลที่มีตำแหน่งคงที่ จุดเริ่มต้นออฟเซ็ตด้านซ้ายบน ออฟเซ็ตแนวตั้ง 50px และออฟเซ็ตแนวนอน 50px สังเกตว่าค่าออฟเซ็ตจะย้ายองค์ประกอบออกจากแหล่งกำเนิดออฟเซ็ตในแนวนอนและ/หรือแนวตั้งอย่างไร (ห่างจากมุมบนซ้ายของเบราว์เซอร์)

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

ใช้จุดยึดที่ลากได้เพื่อเปลี่ยนตำแหน่งองค์ประกอบคงที่บนหน้า

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

เคล็ดลับบางประการสำหรับการใช้การกำหนดตำแหน่งคงที่

ปรับองค์ประกอบคงที่สำหรับมือถือ

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

สร้างพื้นที่สำหรับองค์ประกอบคงที่

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

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

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

ใช้ดัชนี Z ที่สูงขึ้นสำหรับองค์ประกอบคงที่

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

6 วิธีในการใช้ตำแหน่งคงที่

#1 ส่วนหัวคงที่

การใช้ตัวเลือกตำแหน่งคงที่ใหม่ที่ดีที่สุดวิธีหนึ่งคือการสร้างส่วนหัวคงที่ เมื่อใช้ Divi Theme Builder คุณสามารถสร้างส่วนหัวที่กำหนดเองทั้งหมดและแก้ไขส่วนทั้งหมดได้

วิธีการโพสต์

นี่คือโพสต์เกี่ยวกับวิธีสร้างส่วนหัวคงที่ใน Divi:

• วิธีสร้างส่วนหัวคงที่ด้วยตัวเลือกตำแหน่งของ Divi

#2 แถบส่วนท้ายคงที่

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

โพสต์วิธีการ

ต่อไปนี้เป็นโพสต์บางส่วนเกี่ยวกับวิธีสร้างแถบส่วนท้ายแบบตายตัวใน Divi:

• วิธีสร้างแถบส่วนท้ายคงที่สำหรับธีม Divi ของคุณ
• วิธีสร้างแถบส่วนท้ายมือถือแบบคงที่ด้วย Divi
• วิธีสร้าง (คงที่) Mobile Contact Bar ใน Divi

#3 แก้ไขแถบด้านข้าง/เมนูแนวตั้ง

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

โพสต์วิธีการ

นี่คือโพสต์เกี่ยวกับวิธีสร้างแถบด้านข้างคงที่ใน Divi:

• วิธีสร้างแถบด้านข้างคงที่ที่ตอบสนองด้วยการเชื่อมโยงสมอเลื่อนที่ราบรื่นด้วย Divi
• วิธีสร้างเมนูนำทางแนวตั้ง (คงที่) สำหรับเว็บไซต์ Divi ของคุณ

#4 แก้ไขปุ่ม Back-to-Top

ปุ่ม Back-to-Top มักจะถูกกำหนดไว้ที่ด้านล่างขวาของเว็บไซต์ ซึ่งผู้ใช้จะคลิกได้เสมอเพื่อส่งกลับไปยังด้านบนสุดของหน้า

นี่คือโพสต์เกี่ยวกับวิธีสร้างปุ่ม back-to-top แบบคงที่ใน Divi:

• วิธีสร้าง Custom Sticky (คงที่) กลับไปสู่การออกแบบยอดนิยมด้วย Divi

#5 เมนูคงที่

เมนูส่วนใหญ่ที่เลื่อนเข้าหรือป๊อปอัปมีตำแหน่งคงที่ สิ่งเหล่านี้ยอดเยี่ยมสำหรับมือถือเช่นกัน

นี่คือโพสต์เกี่ยวกับวิธีสร้างเมนูคงที่ใน Divi:

• วิธีสร้างเมนู Slide-In ที่ตอบสนองด้วยตัวสร้างธีมของ Divi

#6 แก้ไขกล่องการแจ้งเตือน คำกระตุ้นการตัดสินใจ การเลือกอีเมล ฯลฯ...

นี่คือโพสต์เกี่ยวกับวิธีสร้างกล่องการแจ้งเตือนแบบคงที่ใน Divi:

• วิธีเพิ่มคำกระตุ้นการตัดสินใจแบบสไลด์อินที่ปิดได้ในทุกมุมของเทมเพลตเพจของคุณใน Divi

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

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

ประสบการณ์ของคุณเกี่ยวกับประเภทตำแหน่งคงที่เป็นอย่างไร?

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

ไชโย!