วิธีทำให้ส่วนหัวโปร่งใสของคุณติดบน Scroll ด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลต Global Header ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

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

ส่วนที่ #1 การตั้งค่า

สีพื้นหลัง

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

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

ระยะห่าง

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

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

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

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

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

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

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

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

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

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

• แบบอักษรของข้อความ: Oswald
• รูปแบบตัวอักษรของข้อความ: ตัวพิมพ์ใหญ่
• สีข้อความ: #ffffff
• ขนาดข้อความ:
  • เดสก์ท็อป: 19px
  • แท็บเล็ต: 18px
  • โทรศัพท์: 16px
• การจัดตำแหน่งข้อความ: กึ่งกลาง

เพิ่มส่วน #2

ระยะห่าง

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

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

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

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

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

สีพื้นหลังโปร่งใส

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

• สีพื้นหลัง: rgba(255,255,255,0)

ขนาด

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

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

ระยะห่าง

เพิ่มช่องว่างภายในด้านซ้ายและขวาที่กำหนดเองต่อไป

• ช่องว่างภายในด้านซ้าย: 10%
• ช่องว่างภายในด้านขวา: 10%

กล่องเงา

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

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

ตำแหน่ง

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

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

การมองเห็นคอลัมน์ 2

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

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

เลือกเมนู

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

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

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

ลบสีพื้นหลัง

ลบสีพื้นหลังของโมดูลด้วย

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

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

• แบบอักษรของเมนู: Oswald
• น้ำหนักแบบอักษรของเมนู: ตัวหนา
• รูปแบบตัวอักษรของเมนู: ตัวพิมพ์ใหญ่
• สีข้อความของเมนู: #efefef
• ขนาดข้อความของเมนู: 18px
• การจัดตำแหน่งข้อความ: ขวา

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

เปลี่ยนการตั้งค่าเมนูแบบเลื่อนลงด้วย

• เมนูแบบเลื่อนลง สีของเส้น: rgba(0,0,0,0)
• สีพื้นหลังเมนูมือถือ: rgba(0,0,0,0.95)

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

จากนั้น เปลี่ยนสีไอคอนในการตั้งค่าไอคอน

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

การตั้งค่าโลโก้

เรากำลังเปลี่ยนสีโลโก้ของเราในการตั้งค่าโลโก้ด้วยโดยการเปลี่ยนฟิลเตอร์กลับภาพ

• กลับภาพ: 90%

ขนาด

จากนั้น เราจะกำหนดความสูงสูงสุดให้กับโลโก้ของเรา

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

ระยะห่าง

ต่อไป เราจะเพิ่มการเติมด้านบนและด้านล่างในขนาดหน้าจอที่เล็กกว่า

• แผ่นรองด้านบน:
  • แท็บเล็ตและโทรศัพท์: 10px
• แผ่นรองด้านล่าง:
  • แท็บเล็ตและโทรศัพท์: 10px

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

เพิ่มสำเนา

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

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

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

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

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

สไตล์ปุ่มถัดไป

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

• รัศมีเส้นขอบของปุ่ม: 0px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 4px
• แบบอักษรของปุ่ม: Oswald
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่
• แสดงไอคอนปุ่ม: ใช่
• ปุ่มไอคอนสี: #1a1a1a

ระยะห่าง

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

• ขอบบน: -70px
• ช่องว่างภายในด้านบน: 25px
• ช่องว่างภายในด้านล่าง: 25px

2. ใช้เอฟเฟกต์ Sticky แบบกำหนดเอง

เปิดส่วน #2 Sticky

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

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

สีพื้นหลัง Sticky Row

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

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

ระยะห่างระหว่างแถวเหนียว

ต่อไป เราจะแก้ไขค่าการเว้นวรรคแบบติดหนึบของแถว

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

เงากล่องแถวเหนียว

เรากำลังเปลี่ยนสีเงาของกล่องในสถานะติดหนึบด้วย

• เงาสี: rgba(0,0,0,0.08)

การวางตำแหน่ง Sticky Row

จากนั้น เราจะนำการวางตำแหน่งแถวกลับมาเป็นค่าสัมพัทธ์ในสถานะติดหนึบ

• ตำแหน่ง: ญาติ
• แหล่งกำเนิดออฟเซ็ต: บนซ้าย

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

ต่อไป เราจะเปลี่ยนสีข้อความเมนูเหนียว

• สีข้อความของเมนู: #000000

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

พร้อมกับสีพื้นหลังเมนูมือถือในการตั้งค่าเมนูแบบเลื่อนลง

• สีพื้นหลังเมนูมือถือ: #ffffff

สีไอคอนเมนูเหนียว

เปลี่ยนสีไอคอนในสถานะติดหนึบด้วย

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

ตัวกรองโลโก้ติดหนึบ

จากนั้น ลบตัวกรองการกลับภาพโลโก้ในสถานะติดหนึบ

• กลับภาพ: 0%

ระยะห่างปุ่มเหนียว

และทำการสอนให้เสร็จสิ้นโดยลบขอบด้านบนที่เป็นลบของปุ่มในขณะที่ติดหนึบ

• อัตรากำไรขั้นต้น: 0px

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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