วิธีสร้าง Sticky Block (คงที่) ใน Gutenberg โดยไม่มีรหัส

คุณกำลังมองหาวิธีสร้างบล็อกติดหนึบใน Gutenberg หรือไม่? 🤔

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

บล็อกเหนียวหรือที่เรียกว่าบล็อกคงที่ ยังคงมองเห็นได้บนหน้าจอแม้ในขณะที่ผู้ใช้เลื่อนหน้าลง เพื่อให้แน่ใจว่าเนื้อหาที่คุณต้องการไฮไลต์จะอยู่ในมุมมองของพวกเขาเสมอ

👉 นี่คือตัวอย่างของสิ่งที่เรากำลังพูดถึง – คุณสามารถดูว่าไอคอนโซเชียล "ติดอยู่" ในตำแหน่งของพวกเขาได้อย่างไรแม้ในขณะที่ผู้ใช้เลื่อนดู:

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

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

ในบทช่วยสอนนี้ เราจะแสดงวิธีใช้ปลั๊กอิน Gutenberg ยอดนิยมที่เรียกว่า Otter Blocks เพื่อเพิ่มบล็อกติดหนึบให้กับเว็บไซต์ WordPress ของคุณ

มาดำดิ่งกัน 🤿

วิธีเพิ่มบล็อกติดหนึบใน Gutenberg Editor

หากต้องการเพิ่มบล็อกติดหนึบใน Gutenberg Editor คุณต้องทำตามขั้นตอนต่อไปนี้:

• ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งานปลั๊กอิน Otter Blocks
• ขั้นตอนที่ 2: เปิดใช้งานเครื่องมือ Transform to Sticky สำหรับบล็อกของคุณ
• ขั้นตอนที่ 3: เปลี่ยนตำแหน่งบล็อกเหนียว
• ขั้นตอนที่ 4: กำหนดค่าออฟเซ็ต
• ขั้นตอนที่ 5: เปิดใช้งาน Sticky Block บนมือถือ
• ขั้นตอนที่ไม่บังคับ: ลองใช้โหมดโฟลต
• ขั้นตอนที่เป็นทางเลือก: ระบุพฤติกรรมของบล็อก

ขั้นตอนที่ 1: ติดตั้งและเปิดใช้งานปลั๊กอิน Otter Blocks 🔌

Otter Blocks เป็นปลั๊กอิน WordPress ที่ขยายฟังก์ชันการทำงานของ Gutenberg Editor

มีคอลเลกชันของโครงสร้างเพจ คุณลักษณะของตัวแก้ไข และเทมเพลตเพื่อช่วยปรับปรุงการออกแบบและฟังก์ชันของเว็บไซต์ของคุณ

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

Otter Blocks มีเวอร์ชันฟรีและพรีเมียม (เรียกว่า Otter Pro)

คุณสามารถใช้เวอร์ชันฟรีเพื่อสร้างบล็อกติดหนึบพื้นฐานใน Gutenberg เพื่อให้คุณสามารถปฏิบัติตามบทช่วยสอนนี้ได้ฟรี

อย่างไรก็ตาม เพื่อดำเนินการตามขั้นตอนที่เรากล่าวถึง เช่น การเพิ่มระยะห่างระหว่างบล็อกและหน้าจอ การถอด Sticky Block ที่ส่วนหน้าออก การแสดง Sticky Block บนมือถือ ฯลฯ คุณต้องมีปลั๊กอินเวอร์ชันพรีเมียม

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

➡️ หากต้องการดำเนินการต่อ ให้ติดตั้ง Otter เวอร์ชันฟรีหรือพรีเมียม ในบทช่วยสอนด้านล่างนี้ เราจะพยายามสังเกตว่าฟีเจอร์บางอย่างต้องใช้ตัวเลือกพรีเมียมเมื่อใด

ขั้นตอนที่ 2: เปิดใช้งานเครื่องมือแปลงเป็น Sticky สำหรับบล็อกของคุณ 🚧

เปิดหน้าหรือโพสต์ที่คุณต้องการเพิ่มบล็อกติดหนึบบน Gutenberg Editor

เลือกบล็อก ที่คุณต้องการทำให้ติดหนึบและไปที่ แผง ที่อยู่ทางด้านขวาของเครื่องมือแก้ไข

บนแผงควบคุมให้ไปที่ Block และไปที่ตัวเลือก Block Tools ขยายเครื่องมือบล็อกโดยเลือก เครื่องหมายบวก

จากนั้นเลือก แปลงเป็น Sticky จากเมนูแบบเลื่อนลง

ตัวเลือกใหม่ที่เรียกว่า Sticky จะปรากฏใต้เครื่องมือบล็อก ขยายสิ่งนั้นและไปที่ Sticky To

ใน Sticky To คุณสามารถตั้งค่าองค์ประกอบที่คุณต้องการให้บล็อกติดได้ มีสี่ตัวเลือก:

1. บล็อกระดับบนสุด
2. ส่วน
3. บล็อกผู้ปกครอง
4. หน้าจอ

เพื่อทำความเข้าใจตัวเลือกเหล่านี้และตัวเลือกที่เหมาะกับโพสต์ติดหนึบของคุณ ให้เปิด ภาพรวมเอกสาร ใน Gutenberg Editor และดูบล็อกที่อยู่รอบๆ บล็อกโพสต์ติดหนึบของคุณ

บล็อกบนสุดคือบล็อกระดับบนสุด โดยการเลือก บล็อกระดับบนสุด คุณจะทำให้ บล็อกติดหนึบของคุณคงที่ด้วยบล็อกบนสุด ในกรณีของเรา มันคือบล็อกกลุ่มในภาพด้านล่าง

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

ในกรณีของเรา บล็อกหลักคือบล็อกคอลัมน์ส่วน ดูภาพด้านล่าง

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

ตำแหน่งของบล็อกติดหนึบจะถูกตั้งค่าเริ่มต้นไว้ที่ด้านบน หากต้องการเรียนรู้วิธีเปลี่ยนตำแหน่ง ให้ดำเนินการขั้นตอนถัดไป

ขั้นตอนที่ 3: เปลี่ยนตำแหน่งบล็อกติดหนึบ 🚩

หากต้องการเปลี่ยนตำแหน่งบล็อกติดหนึบ ให้กลับไปที่แผงด้านขวาแล้วมองหา ตำแหน่ง ด้านล่างตัวเลือก Stick To

คุณสามารถวางตำแหน่งบล็อกติดหนึบได้ที่ ด้านบนหรือด้านล่าง ของหน้าจอ ตำแหน่งด้านล่างมีให้สำหรับผู้ใช้ Otter Pro เท่านั้น

นี่คือลักษณะของบล็อกบนเว็บไซต์สาธิตแห่งใดแห่งหนึ่งของเรา:

ขั้นตอนที่ 4: กำหนดค่าออฟเซ็ต ⚙️

หลังจากกำหนดตำแหน่งของบล็อกติดหนึบแล้ว ให้ลองดูตัวอย่าง หากบล็อกปรากฏไกลหรือใกล้หน้าจอมากเกินไป ให้ใช้ตัวเลือก ออฟเซ็ต เพื่อเพิ่มหรือลดระยะห่างระหว่างบล็อกติดหนึบและหน้าจอ

ขั้นตอนที่ 5: เปิดใช้งานบล็อกติดหนึบบนมือถือ 📱

ตามค่าเริ่มต้น บล็อกติดหนึบจะปรากฏบนเดสก์ท็อปเท่านั้น หากคุณต้องการเปิดใช้งานบนมือถือ เพียงเปิดใช้งานตัวเลือก เปิดใช้งานบนมือถือ

อย่างไรก็ตาม มีเพียงผู้ใช้ Otter Pro เท่านั้นที่สามารถเข้าถึงตัวเลือกมือถือ

ขั้นตอนเสริม: ลองใช้โหมดโฟลต 🏄

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

มีเพียงผู้ใช้ Otter Pro เท่านั้นที่สามารถใช้โหมดโฟลตได้ และสามารถใช้ได้กับ บล็อกระดับบนสุดเท่านั้น ซึ่งในกรณีของเราคือบล็อกกลุ่ม

ทันทีที่คุณสลับโหมดลอย คุณจะถูกขอให้กำหนด ความกว้าง ด้านข้าง และ ออฟเซ็ตด้านข้าง ของบล็อก

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

เราขอแนะนำให้คุณดูตัวอย่างเพจหลังจากกำหนดค่าโหมดลอยตัวและทำการปรับเปลี่ยนที่จำเป็น

ขั้นตอนที่ไม่บังคับ: ระบุพฤติกรรมของบล็อก 👨🏽‍💼

เมื่อใช้ปลั๊กอิน Otter Block คุณสามารถสร้างบล็อกติดหนึบหลายบล็อกในหน้าเดียวกันได้ บางครั้งบล็อกเหล่านี้อาจชนกัน คุณสามารถกำหนดได้ว่าบล็อกเหนียวจะตอบสนองอย่างไรในระหว่างการชนโดยใช้ตัวเลือก พฤติกรรม

คุณสามารถตั้งค่าลักษณะการทำงานให้ ยุบ จางลง หรือ ซ้อนกันได้

การเลือกการล่มสลายจะตั้งค่าบล็อกเหนียวที่มีการเคลื่อนไหวเดียวกันให้ ยุบเข้าหากัน เมื่อชนกัน เช่น:

และการเลือกเฟดจะเป็นการกำหนดให้บล็อก จางหรือหายไปจากบล็อกอื่น

สุดท้ายนี้ การเลือกสแต็กจะ ซ้อนบล็อกไว้ด้านบนของบล็อกเหนียวอื่นๆ ที่บล็อกชนกัน ดังที่แสดงใน GIF ด้านล่าง

ทั้งเฟดและสแต็คมีให้สำหรับผู้ใช้ Otter Pro เท่านั้น

แค่นั้นแหละ. ตอนนี้คุณได้เพิ่มบล็อกติดหนึบใน Gutenberg แล้ว 🤩

สร้างบล็อกติดหนึบแรกของคุณใน Gutenberg 🧱

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

เนื่องจาก Gutenberg ไม่มีบล็อกติดหนึบเริ่มต้น คุณจึงจำเป็นต้องใช้ปลั๊กอินของบุคคลที่สามเพื่อเพิ่มฟังก์ชันนี้ลงในไซต์ของคุณ

แม้ว่าจะมีปลั๊กอินบล็อกเหนียวจำนวนหนึ่ง Otter Blocks ก็เป็นปลั๊กอินบล็อกที่ง่ายที่สุดและใช้งานง่ายที่สุด

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

👉 หากต้องการให้บล็อกติดหนึบและทำงานบนเพจของคุณโดยใช้ปลั๊กอิน Otter Blocks คุณต้องทำตามขั้นตอนด้านล่าง:

หากคุณมีคำถามใด ๆ เกี่ยวกับวิธีสร้างบล็อกติดหนึบใน Gutenberg โปรดแจ้งให้เราทราบในส่วนความคิดเห็นด้านล่าง