วิธีวางหัวข้อ Sticky บน Scroll สำหรับการนำทาง Anchor Link ที่ไม่ซ้ำใน Divi

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

ในการสร้างการนำทางลิงก์ Anchor ส่วนหัวที่ติดหนึบ เราจะใช้เฉพาะตัวเลือกในตัวของ Divi เท่านั้น ฟังก์ชันการทำงานบนเดสก์ท็อปและมือถือนั้นมีเอกลักษณ์เฉพาะตัว และผลลัพธ์อาจทำให้คุณประหลาดใจ!

มาเริ่มกันเลย!

แอบมอง

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

ดาวน์โหลดเค้าโครงการนำทางของ Sticky Headings Anchor Link ฟรี

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปกวดวิชากันเถอะ

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

• หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
• สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
• เลือกตัวเลือก “เลือกเค้าโครงล่วงหน้า”

• จากป๊อปอัป Load from Library ให้ค้นหาและอัปโหลดเลย์เอาต์หน้าสูตรชุดอาหารจากชุดเลย์เอาต์ Meal Kit

ส่วนที่ 2: การปรับเปลี่ยนเค้าโครง

การลบแถว

เมื่อโหลดเลย์เอาต์แล้ว ให้ลบสองแถวล่างสุดภายใต้ส่วนที่สองที่มีข้อความว่าคำแนะนำ

ตอนนี้คุณควรมีหนึ่งแถวที่มีเนื้อหาสำหรับ "ขั้นตอน -01" ของสูตร

การสร้างแถวใหม่และเติมด้วยเนื้อหา

หัวข้อติดหนึบจะอยู่ในคอลัมน์ด้านซ้ายของแถวสองคอลัมน์ ในการสร้างการตั้งค่านี้ ให้เพิ่มแถวคอลัมน์ 3 ใน 4 ของ 0ne-fourths ใหม่ใต้แถวปัจจุบัน

ใช้ mulitselect (กด cmd/ctrl ค้างไว้แล้วคลิก) เลือกโมดูลสามโมดูลที่มีเนื้อหาสำหรับขั้นตอนที่หนึ่งของสูตรในแถวเค้าโครงที่สร้างไว้ล่วงหน้าด้านบน

จากนั้นลากโมดูลเหล่านั้นในคอลัมน์ด้านขวาของแถวใหม่ที่คุณเพิ่งสร้างขึ้น

ลบแถวว่างด้านบนเมื่อเสร็จแล้ว

ส่วนที่ 3: การสร้าง Sticky Headings สำหรับแต่ละแถว

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

การสร้าง Sticky Heading สำหรับแถวแรก (ขั้นตอนที่หนึ่ง)

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

จากนั้นอัปเดตการตั้งค่าการออกแบบสำหรับข้อความส่วนหัว H4 ดังนี้:

• หัวข้อที่ 4 น้ำหนักแบบอักษร: ตัวหนา
• หัวข้อ 4 รูปแบบตัวอักษร: TT
• การจัดตำแหน่งข้อความหัวเรื่อง 4: Center
• หัวเรื่อง 4 ขนาดข้อความ: 15px
• หัวเรื่อง 4 ระยะห่างตัวอักษร: 3px
• ส่วนหัว 4 ความสูงของบรรทัด: 2em

จากนั้นอัปเดตระยะห่างและมุมโค้งมนดังนี้:

• มาร์จิ้น: 0px
• ช่องว่างภายใน: 10px
• มุมโค้งมน: 3px

หมายเหตุ: เนื่องจากขนาดข้อความ (15px) ความสูงของบรรทัด (2em ซึ่งเท่ากับ 30px) การเติม (10px) และระยะขอบด้านล่างเริ่มต้นของ H4 (10px) ความสูงของผลลัพธ์ของโมดูลข้อความคือ 50px (30px + 10px + 10px) นี่เป็นสิ่งสำคัญที่ควรทราบเพื่อให้เราทราบว่าจะชดเชยตำแหน่งบนและล่างของแท่งแต่ละตำแหน่งในอนาคตเท่าใด

ภายใต้แท็บขั้นสูง ให้อัปเดตตัวเลือกติดหนึบต่อไปนี้:

• ออฟเซ็ตล่างเหนียว: 150px (เดสก์ท็อป), 0px (แท็บเล็ต)
• ขีด จำกัด ติดหนึบสูงสุด: ส่วน (เดสก์ท็อป), ไม่มี (แท็บเล็ต)
• ขีด จำกัด ปักหมุดด้านล่าง: ส่วน (เดสก์ท็อป), แถว (แท็บเล็ต)
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: NO

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

ถัดไป อัปเดตสีพื้นหลังในสถานะติดหนึบ:

• สีพื้นหลังเหนียว: #febd2d

จากนั้นอัปเดตดัชนี Z ในสถานะติดหนึบ:

• ดัชนี Z (เหนียว): 10003

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

อัปเดตเนื้อหาจำลอง

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

ซ้ำแถว 1

ในการสร้างแถวที่สองสำหรับขั้นตอนที่สอง ให้ทำซ้ำแถวที่ 1

สร้าง Sticky Heading สำหรับแถวที่สอง (ขั้นตอนที่ 2)

เปิดการตั้งค่าข้อความสำหรับส่วนหัวในคอลัมน์ 1 ของแถวที่ซ้ำกัน (ที่สอง) และเปลี่ยนข้อความ H4 เป็น “ขั้นตอน-02”

จากนั้นอัปเดตตัวเลือกติดหนึบสำหรับข้อความดังนี้:

• Sticky Top Offset: 50px (เดสก์ท็อป), 0px (แท็บเล็ต)
• ออฟเซ็ตล่างติดหนึบ: 100px (เดสก์ท็อป)
• ขีด จำกัด ติดหนึบสูงสุด: ส่วน (แท็บเล็ต)

จากนั้นอัปเดตดัชนี Z สำหรับสถานะติดหนึบ:

• ดัชนี Z (เหนียว): 10002

ทำซ้ำแถว2

หากต้องการสร้างแถวที่สามสำหรับขั้นตอนที่สาม ให้ทำซ้ำแถวที่ 2

สร้าง Sticky Heading สำหรับแถวที่สาม (ขั้นตอนที่ 3)

เปิดการตั้งค่าข้อความสำหรับส่วนหัวในคอลัมน์ 1 ของแถวที่ซ้ำกัน (ที่สาม) และเปลี่ยนข้อความ H4 เป็น “ขั้นตอน-03”

จากนั้นอัปเดตตัวเลือกติดหนึบสำหรับข้อความดังนี้:

• Sticky Top Offset: 100px (เดสก์ท็อป)
• ออฟเซ็ตล่างติดหนึบ: 50px (เดสก์ท็อป)

จากนั้นอัปเดตดัชนี Z สำหรับสถานะติดหนึบ:

• ดัชนี Z (เหนียว): 10001

ทำซ้ำแถว3

หากต้องการสร้างแถวที่สี่สำหรับขั้นตอนที่สี่ ให้ทำซ้ำแถวที่ 3

สร้าง Sticky Heading สำหรับแถวที่สี่ (ขั้นตอนที่สี่)

เปิดการตั้งค่าข้อความสำหรับส่วนหัวในคอลัมน์ 1 ของแถวที่ซ้ำกัน (ที่สาม) และเปลี่ยนข้อความ H4 เป็น "ขั้นตอน-04"

จากนั้นอัปเดตตัวเลือกติดหนึบสำหรับข้อความดังนี้:

• Sticky Top Offset: 150px (เดสก์ท็อป)
• ออฟเซ็ตล่างเหนียว: 0px (เดสก์ท็อป)

จากนั้นอัปเดตดัชนี Z สำหรับสถานะติดหนึบ:

• ดัชนี Z (เหนียว): 10000

อัปเดตดัชนีคอลัมน์ Z สำหรับแต่ละหัวข้อที่ติดหนึบ

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

ในการดำเนินการนี้ ให้เปิดการตั้งค่าสำหรับคอลัมน์หลักของแต่ละคอลัมน์ที่ติดหนึบ (ขั้นตอนที่ 1-4) และอัปเดตคอลัมน์ z-index สำหรับแต่ละคอลัมน์ดังนี้:

แถว 1 คอลัมน์ 1

• ดัชนี Z: 20

แถว 2 คอลัมน์ 1

• ดัชนี Z: 19

แถวที่ 3 คอลัมน์ 1

• ดัชนี Z: 18

แถวที่ 4 คอลัมน์ 1

• ดัชนี Z: 17

ส่วนที่ 3: การสร้างลิงก์ Anchor ส่วนหัวที่ติดหนึบ

ในการสร้างลิงก์ Anchor สำหรับแต่ละหัวข้อ เราจำเป็นต้องกำหนด CSS ID ให้กับแถวที่สอดคล้องกับ URL ของโมดูลสำหรับส่วนหัว

ขั้นตอนที่หนึ่ง Anchor Link

ในการสร้างลิงก์สมอสำหรับส่วนหัวติดหนึบแรกในแถวที่ 1 ให้เปิดการตั้งค่าสำหรับแถวที่ 1 และเพิ่มรหัส CSS ต่อไปนี้:

• CSS ID: one

จากนั้นเปิดการตั้งค่าโมดูลข้อความสำหรับหัวข้อ "ขั้นตอน-01" และเพิ่ม URL ลิงก์โมดูลต่อไปนี้:

• URL ลิงก์โมดูล: #one

ขั้นตอนที่สอง Anchor Link

ในการสร้างลิงก์สมอสำหรับส่วนหัวติดหนึบที่สองในแถวที่ 2 ให้เปิดการตั้งค่าสำหรับแถวที่ 2 และเพิ่ม CSS ID ต่อไปนี้:

• CSS ID: two

จากนั้นเปิดการตั้งค่าโมดูลข้อความสำหรับหัวข้อ "ขั้นตอน-02" และเพิ่ม URL ลิงก์โมดูลต่อไปนี้:

• URL ลิงก์โมดูล: #two

ขั้นตอนที่สาม Anchor Link

ในการสร้างลิงก์สมอสำหรับส่วนหัวติดหนึบที่สามในแถวที่ 3 ให้เปิดการตั้งค่าสำหรับแถวที่ 3 และเพิ่ม CSS ID ต่อไปนี้:

• CSS ID: สาม

จากนั้นเปิดการตั้งค่าโมดูลข้อความสำหรับหัวข้อ "step-03" และเพิ่ม URL ลิงก์โมดูลต่อไปนี้:

• URL ลิงก์โมดูล: #three

ขั้นตอนที่สี่ Anchor Link

ในการสร้างลิงก์สมอสำหรับส่วนหัวติดหนึบที่สี่ในแถวที่ 4 ให้เปิดการตั้งค่าสำหรับแถวที่ 4 และเพิ่ม CSS ID ต่อไปนี้:

• CSS ID: สี่

จากนั้นเปิดการตั้งค่าโมดูลข้อความสำหรับหัวข้อ "ขั้นตอน-04" และเพิ่ม URL ลิงก์โมดูลต่อไปนี้:

• โมดูลลิงค์ URL: #four

ผลลัพธ์สุดท้าย

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

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

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

ไชโย!