วิธีซ่อนส่วนหัวของคุณก่อนเลื่อนด้วยตัวเลือก Sticky ของ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตส่วนหัวฟรี

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

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

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

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

ดาวน์โหลด

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

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

1. การสร้างโครงสร้างองค์ประกอบส่วนหัวภายในเทมเพลตส่วนหัวใหม่

สร้างเทมเพลตส่วนหัวส่วนกลางใหม่

เริ่มต้นด้วยการไปที่ตัวสร้างธีม Divi ที่นั่น ให้เริ่มสร้างส่วนหัวส่วนกลางหรือแบบกำหนดเองใหม่

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

สีพื้นหลัง

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

• สีพื้นหลัง: #001b34

ระยะห่าง

ไปที่แท็บการออกแบบของส่วนและลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

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

เพิ่มแถวใหม่

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

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

สีพื้นหลัง

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

• สีพื้นหลัง: #001b34

ขนาด

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

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

ระยะห่าง

ดำเนินการต่อโดยเปลี่ยนค่าการเติมตาม:

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

คอลัมน์ 1 การตั้งค่า

สีพื้นหลัง

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

• สีพื้นหลัง: #f4d5b8

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

เลือกเมนู

ได้เวลาเพิ่มโมดูล โดยเริ่มจากโมดูลเมนูในคอลัมน์ 1 เลือกเมนูที่คุณต้องการ

อัพโหลดโลโก้

อัปโหลดโลโก้ต่อไป

สีพื้นหลัง

จากนั้นเปลี่ยนสีพื้นหลัง

• สีพื้นหลัง: #063765

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง: พอดี
• ตำแหน่งภาพพื้นหลัง: Center

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

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

• ขนาดข้อความของเมนู: 18px

การตั้งค่าเมนูแบบเลื่อนลง

จากนั้น เปลี่ยนการตั้งค่าเมนูดรอปดาวน์ตามลำดับ:

• เมนูแบบเลื่อนลง สีของเส้น: rgba(0,0,0,0)
• สีพื้นหลังเมนูมือถือ: #ddc1a7
• สีข้อความเมนูมือถือ: #063765

การตั้งค่าไอคอน

เปลี่ยนสีไอคอนในการตั้งค่าไอคอนเป็นสีขาวด้วย

• ไอคอนรถเข็นช็อปปิ้งสี: #ffffff
• ค้นหาไอคอนสี: #ffffff
• ไอคอนเมนูแฮมเบอร์เกอร์สี: #ffffff

ขนาด

จากนั้นแก้ไขความกว้างสูงสุดของโลโก้ในการตั้งค่าการปรับขนาด

• โลโก้ความกว้างสูงสุด: 70px

ระยะห่าง

ใช้ค่าช่องว่างภายในที่กำหนดเองต่อไป

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

กล่องเงา

พร้อมกับเงาของกล่องแบบกำหนดเอง

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.3)

แปลงแปล

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยแก้ไขการตั้งค่าการแปลการแปลงดังนี้:

• ถูกต้อง:
  • เดสก์ท็อป: 20px
  • แท็บเล็ตและโทรศัพท์: 0px

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

เพิ่มสำเนา

ในคอลัมน์ 2 โมดูลเดียวที่เราต้องการคือโมดูลปุ่ม เพิ่มสำเนาที่คุณเลือก

การจัดตำแหน่งปุ่ม

ไปที่แท็บออกแบบแล้วเปลี่ยนการจัดตำแหน่งปุ่ม

• การจัดตำแหน่งปุ่ม: ขวา

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

จากนั้นจัดรูปแบบปุ่มตามนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 16px
• สีข้อความของปุ่ม: #2a2a2a
• สีพื้นหลังของปุ่ม: #ffffff
• ความกว้างของขอบปุ่ม: 0px
• ปุ่มสีเส้นขอบ: rgba(0,0,0,0)

• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

กำหนดรูปร่างให้กับปุ่มของคุณโดยใช้ช่องว่างภายในแบบกำหนดเองด้วย

• ช่องว่างภายในด้านบน: 20px
• ช่องว่างภายในด้านล่าง: 20px
• ช่องว่างภายในด้านซ้าย: 40px
• ช่องว่างภายในด้านขวา: 40px

กล่องเงา

ถัดไป ใช้เงาของกล่อง

• ความแรงของกล่องเงาเบลอ: 30px
• เงาสี: rgba(0,0,0,0.18)

แปลงแปล

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยแก้ไขค่าการแปลการแปลงตามนั้น:

• ถูกต้อง:
  • เดสก์ท็อป: 50px
  • แท็บเล็ตและโทรศัพท์: 0px

2. ใช้เอฟเฟกต์ Sticky แบบกำหนดเองเพื่อให้ได้เอฟเฟกต์ซ่อนก่อนเลื่อน

ทำให้แถวอยู่ในตำแหน่งที่แน่นอน

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

• ตำแหน่ง: Absolute
• ตำแหน่ง: บนซ้าย

ทำให้ส่วนเหนียว

ต่อไป เราจะเปิดการตั้งค่าส่วนและอนุญาตให้อยู่ด้านบนสุด

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

นิเมชั่นมาตรา

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

• สไตล์แอนิเมชั่น: Fade

ระยะเวลาการเปลี่ยนมาตรา

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

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

ส่วนการแปลงแปล

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

• ขวา: -300px

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

• ปักหมุดขวา: 0px

คุณสมบัติ CSS ที่มองเห็นได้ของส่วน

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

• องค์ประกอบหลัก:

  visibility: hidden

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

• องค์ประกอบหลักเหนียว:

  visibility: visible;

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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