วิธีสร้างหัวข้อ Sticky Section ด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

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

1. สร้างการออกแบบส่วน

เพิ่มมาตราใหม่

ระยะห่าง

เริ่มต้นด้วยการเพิ่มส่วนใหม่ในหน้าที่คุณกำลังทำงานอยู่ เปิดการตั้งค่าส่วนและใช้ช่องว่างภายในด้านบนและด้านล่าง

• ช่องว่างภายในด้านบน: 200px
• ช่องว่างภายในด้านล่าง: 200px

เพิ่มแถว #1

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใด ๆ ให้เปิดการตั้งค่าแถวและแก้ไขการตั้งค่าการปรับขนาดดังนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มเนื้อหา H2

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

การตั้งค่าข้อความ H2

ไปที่แท็บการออกแบบของโมดูลและแก้ไขการตั้งค่าข้อความ H2 ดังนี้:

• หัวข้อที่ 2 แบบอักษร: Poppins
• หัวข้อ 2 น้ำหนักแบบอักษร: กึ่งหนา
• การจัดแนวข้อความหัวเรื่อง 2: Center
• หัวเรื่อง 2 สีข้อความ: #000000
• หัวเรื่อง 2 ขนาดข้อความ:
  • เดสก์ท็อป: 20vw
  • แท็บเล็ตและโทรศัพท์: 28vw

เพิ่มแถว #2

โครงสร้างคอลัมน์

เพิ่มแถวอื่นด้านล่างแถวก่อนหน้าโดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

เปิดการตั้งค่าแถวและเปลี่ยนการตั้งค่าขนาดตามลำดับ:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

เพิ่มโมดูลข้อความในคอลัมน์ 2

เพิ่มเนื้อหา

จากนั้น เพิ่มโมดูลข้อความแรกลงในคอลัมน์ 2 พร้อมเนื้อหาอธิบายที่คุณเลือก

การตั้งค่าข้อความ

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรของข้อความ: Poppins
• สีข้อความ: #000000
• ขนาดข้อความ:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 4vw
  • โทรศัพท์: 5vw
• ระยะห่างของตัวอักษรข้อความ: -0.1vw
• ความสูงของบรรทัดข้อความ: 1.6em

ขนาด

แก้ไขการตั้งค่าการปรับขนาดตามขนาดหน้าจอต่างๆ ด้วย

• ความกว้าง:
  • เดสก์ท็อป: 70%
  • แท็บเล็ตและโทรศัพท์: 90%
• การจัดตำแหน่งโมดูล: ศูนย์

เพิ่มโมดูลรูปภาพในคอลัมน์ 2

อัพโหลดภาพ

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลรูปภาพ อัปโหลดรูปภาพที่คุณเลือก

ขนาด

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

• บังคับเต็มความกว้าง: ใช่

ระยะห่าง

เพิ่มระยะขอบด้านบนด้วย

• ขอบบน: 100px

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 2

เพิ่มสำเนา

ถัดไป เรามีโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

การตั้งค่าปุ่ม

เปลี่ยนการตั้งค่าปุ่มของโมดูลตามลำดับ:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม:
  • เดสก์ท็อป: 1.5vw
  • แท็บเล็ต: 2.5vw
  • โทรศัพท์: 3.5vw
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #f6223e
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px

• แบบอักษรของปุ่ม: Poppins
• แสดงไอคอนปุ่ม: ใช่
• ตำแหน่งไอคอนปุ่ม: ซ้าย
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: ไม่

ระยะห่าง

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

• แผ่นรองด้านบน:
  • เดสก์ท็อปและแท็บเล็ต: 3%
  • โทรศัพท์: 5%
• แผ่นรองด้านล่าง:
  • เดสก์ท็อปและแท็บเล็ต: 3%
  • โทรศัพท์: 5%
• ช่องว่างภายในด้านซ้าย:
  • เดสก์ท็อป: 5vw
  • แท็บเล็ต: 8vw
  • โทรศัพท์: 12vw
• ช่องว่างภายในด้านขวา:
  • เดสก์ท็อป: 5vw
  • แท็บเล็ต: 8vw
  • โทรศัพท์: 12vw

เพิ่มโมดูลข้อความในคอลัมน์ 2

เพิ่มเนื้อหารายการหัวข้อย่อย

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

การตั้งค่าข้อความ

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรของข้อความ: Poppins
• สีข้อความ: #000000
• ขนาดข้อความ:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 4vw
  • โทรศัพท์: 5vw
• ระยะห่างของตัวอักษรข้อความ: -0.1vw
• ความสูงของบรรทัดข้อความ: 1.6em

การตั้งค่าข้อความรายการสั่งซื้อ

ทำการเปลี่ยนแปลงการตั้งค่าข้อความรายการสั่งซื้อด้วย

• สีข้อความของรายการสั่งซื้อ: #ff2340
• รายการที่สั่งซื้อ ความสูงของบรรทัด: 1.6em
• ประเภทรายการที่ได้รับคำสั่ง: upper-roman
• ตำแหน่งสไตล์รายการที่สั่งซื้อ: ภายนอก

เพิ่มสีข้อความสีดำลงในรายการทีละรายการในกล่องเนื้อหา

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

ขนาด

ต่อไป เราจะเปลี่ยนการตั้งค่าการปรับขนาดตามขนาดหน้าจอต่างๆ

• ความกว้าง:
  • เดสก์ท็อป: 70%
  • แท็บเล็ตและโทรศัพท์: 90%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

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

• ขอบบน: 50px
• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

2. ใช้เอฟเฟกต์ติดหนึบกับหัวข้อหัวข้อ

เพิ่มเอฟเฟกต์ Sticky ให้กับ Row

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

• ตำแหน่งติดหนึบ: Stick to Top
• ขีด จำกัด ติดหนึบด้านล่าง: Section
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: ใช่
• ค่าเริ่มต้นของการเปลี่ยนและรูปแบบที่ติดหนึบ

แก้ไขดัชนีแถว Z

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

• ดัชนี Z: 1

เพิ่มโหมดผสมผสานคอลัมน์ 2 (แถว #2)

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

• โหมดผสมผสาน: ทวีคูณ

เปลี่ยนการตั้งค่าข้อความ Sticky H2

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

• สีข้อความ Sticky H2: #ffffff
• หัวเรื่อง 2 Text Shadow: ตัวเลือกที่สอง (ดู Print Sreen ด้านล่าง)
• หัวเรื่อง 2 สีเงาข้อความ:
  • ค่าเริ่มต้น: rgba(0,0,0,0)
  • เหนียว: rgba(0,0,0,0.08)

เปลี่ยนระยะห่างโมดูลข้อความติดหนึบ

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

• ระยะขอบซ้ายติดหนึบ: -35%

เพิ่มระยะเวลาการเปลี่ยนโมดูลข้อความ

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

• ระยะเวลาการเปลี่ยนภาพ: 500ms

3. มาตราการนำกลับมาใช้ใหม่

ส่วนโคลน

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

เปลี่ยนเนื้อหาชื่อเรื่อง

ตรวจสอบให้แน่ใจว่าคุณได้เปลี่ยนชื่อเนื้อหาในแถวแรก

จับคู่ขนาดข้อความกับความยาวของอักขระ

คุณอาจต้องปรับขนาดข้อความของหัวข้อ 2 ทั้งนี้ขึ้นอยู่กับจำนวนอักขระที่ชื่อ H2 ใหม่ของคุณมี

เปลี่ยนเนื้อหาและรูปภาพอื่นๆ ทั้งหมด

และแน่นอน คุณจะต้องเปลี่ยนเนื้อหาอื่นๆ ทั้งหมดในส่วนที่ซ้ำกันด้วย แค่นั้นแหละ!

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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