วิธีสร้างหีบเพลงที่คลิกได้โดยใช้ส่วนหัวของ Sticky Page ใน Divi

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

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

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

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

นี่คือฟังก์ชั่นบนมือถือเช่นกัน

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

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

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

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

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้าง Sticky Row

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

เปิดการตั้งค่าแถว ภายใต้แท็บ Advanced ให้อัปเดตตำแหน่ง Sticky ดังนี้:

• ตำแหน่งติดหนึบ: ติดบนและล่าง

ซึ่งจะทำให้แถวติดที่ด้านบนของหน้าต่างเบราว์เซอร์เมื่อผู้ใช้เลื่อนลงแล้วติดที่ด้านล่างของหน้าต่างเบราว์เซอร์เมื่อผู้ใช้เลื่อนขึ้น

จัดแต่งทรงผม Sticky Row

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

• สีพื้นหลัง (เดสก์ท็อป): #ffffff
• สีพื้นหลัง (เหนียว): #051923

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง (แท็บเล็ตและโทรศัพท์): 100%
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

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

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

• สีขอบ: #6eeb83
• ความกว้างขอบล่าง (เดสก์ท็อป): 8px
• ความกว้างขอบล่าง (เหนียว): 0px
• ความกว้างของเส้นขอบด้านซ้าย (เดสก์ท็อป): 0px
• ความกว้างของเส้นขอบด้านซ้าย (เหนียว): 8px

การสร้างข้อความหัวเรื่องติดหนึบ

ในการสร้างข้อความส่วนหัวของหน้า ให้เพิ่มโมดูลข้อความใหม่ลงในแถว

จากนั้นวาง HTML ต่อไปนี้ในเนื้อหาเนื้อหา

<h2><strong>Step 2:</strong> S<span>ed do eiusmod tempor incididunt</span></h2>

และอัพเดทสีพื้นหลังบนโฮเวอร์ด้วย…

• สีพื้นหลัง (โฮเวอร์): rgba(255,255,255,0.2)

ซึ่งจะทำให้ชัดเจนมากขึ้นว่าผู้ใช้สามารถคลิกส่วนหัวได้

การจัดรูปแบบข้อความหัวเรื่องติดหนึบ

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• หัวข้อ 2 แบบอักษร: มอนต์เซอร์รัต
• การจัดตำแหน่งข้อความหัวเรื่อง 2: ซ้าย
• หัวเรื่อง 2 สีข้อความ (เดสก์ท็อป): ค่าเริ่มต้น (หรือสีดำ)
• หัวเรื่อง 2 สีข้อความ (เหนียว): #ffffff
• ขนาดข้อความของหัวเรื่อง 2: 80px (เดสก์ท็อป), 22px (เหนียว), 28px (โทรศัพท์)
• ส่วนหัว 2 ความสูงของบรรทัด: 1.3em (เดสก์ท็อป), 1em (เหนียว)

จากนั้นอัปเดตการเติมดังนี้:

• Padding (เดสก์ท็อป): บน 15px, ด้านล่าง 15px
• Padding (เหนียว): 10px บน, 0px ล่าง, 20px ซ้าย
• ช่องว่างภายใน (แท็บเล็ตและโทรศัพท์): บน 15px, ล่าง 15px, ซ้าย 15px, 15px ขวา

การสร้างเนื้อหาหน้าจำลอง

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

จากนั้นเพิ่มโมดูลข้อความใหม่ลงในแถวและวางเนื้อหาจำลอง

ทำซ้ำส่วนตามความจำเป็นสำหรับหัวเรื่องและเนื้อหาของหน้าที่มีความเหนียวมากขึ้น

ณ จุดนี้ คุณมีการออกแบบพื้นฐานเพื่อสร้างส่วนหน้าเพิ่มเติมที่มีหัวเรื่องแบบติดหนึบได้ง่ายๆ โดยการทำซ้ำส่วนนั้น

มาตราซ้ำ

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

อัปเดตเนื้อหาข้อความและสีขอบแถว

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

ทำซ้ำตามต้องการ

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

การเพิ่ม Anchor Links ไปที่ Sticky Page Headings

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

ในการเพิ่มลิงก์ Anchor ก่อนอื่นเราต้องเพิ่ม CSS ID ในส่วนที่เราต้องการให้ลิงก์ข้ามไป

เพิ่มรหัส CSS ส่วนที่ 1

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

• CSS ID: one

จากนั้นเปิดการตั้งค่าสำหรับแถว Sticky และเพิ่ม URL ลิงก์แถวต่อไปนี้:

• URL ของลิงก์แถว: #one

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

เพิ่มรหัส CSS ส่วนที่ 2

ต่อไป เราต้องเพิ่มลิงก์สมอสำหรับหัวข้อที่สอง

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

• CSS ID: two

เพิ่มส่วนที่ 1 Sticky Row Link URL

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

• URL ของลิงก์แถว: #two

เพิ่มส่วน 3 CSS ID

ต่อไป เราต้องเพิ่มลิงก์สมอสำหรับหัวข้อที่สาม

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

• CSS ID: สาม

เพิ่มส่วนที่ 1 Sticky Row Link URL

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

• URL ของลิงก์แถว: #three

เพิ่มรหัส CSS ส่วนที่ 4

สุดท้าย เราต้องเพิ่มลิงก์สมอสำหรับส่วนหัวที่สี่

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

• CSS ID: สี่

เพิ่มส่วนที่ 1 Sticky Row Link URL

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

• URL ของลิงก์แถว: #four

ผลสุดท้าย

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

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

นี่คือฟังก์ชั่นบนมือถือเช่นกัน

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

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

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

ไชโย!