วิธี "หยิบ" Divi Sticky Header ของคุณเมื่อผ่านส่วน Hero ของเพจ

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

1. สร้างหน้าใหม่โดยใช้หน้า Landing Page ชุดเค้าโครงเบาะของ Divi

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

2. ดาวน์โหลดและติดตั้ง Header & Footer ฟรีสำหรับ Divi's Upholstery Layout Pack

ดาวน์โหลดส่วนหัวและส่วนท้ายฟรีบนบล็อกของเรา

ต่อไป เราจะดาวน์โหลดเทมเพลตส่วนหัวและส่วนท้ายฟรีสำหรับ Divi's Upholstery Layout Pack การดาวน์โหลดและติดตั้ง freebie นี้จะช่วยให้เรามุ่งเน้นไปที่ส่วนสำคัญของบทช่วยสอนนี้ ซึ่งจะทำให้เทคนิคถูกต้อง เมื่อคุณไปที่โพสต์ในบล็อกแล้ว ให้ไปที่แบบฟอร์ม optin อีเมลและกรอกที่อยู่อีเมลของคุณ จากนั้นจะมีปุ่มดาวน์โหลดปรากฏขึ้น ปุ่มดาวน์โหลดนี้จะให้คุณดาวน์โหลดโฟลเดอร์ซิป เมื่อคุณคลายซิปโฟลเดอร์แล้ว คุณจะพบไฟล์ JSON ที่มีเทมเพลตเว็บไซต์เริ่มต้นที่มีส่วนหัวและส่วนท้ายส่วนกลาง

ไปที่ตัวสร้างธีมของ Divi

ในการใช้ไฟล์ JSON ที่คุณเพิ่งดาวน์โหลด ให้ไปที่ Divi Theme Builder ของคุณ

อัปโหลดเทมเพลตเว็บไซต์เริ่มต้นด้วยการออกแบบส่วนหัวและส่วนท้าย

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

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

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

• ใช้บน: ทุกหน้า

ลบเทมเพลตส่วนหัวและส่วนท้ายออกจากเทมเพลตเว็บไซต์เริ่มต้น

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

3. วางส่วนหัวด้านล่างส่วนฮีโร่

เปิดเทมเพลตส่วนหัวส่วนกลาง

ตอนนี้เราได้ตั้งค่าสภาพแวดล้อมของตัวสร้างธีมสำหรับส่วนหัวแล้ว ก็ถึงเวลาสลับไปยังเทมเพลตส่วนหัวของเราโดยคลิกที่ไอคอนดินสอ

กำหนด CSS ID ที่กำหนดเองให้กับ Section Inside Global Header

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

• CSS ID: ส่วนหัวที่กำหนดเอง

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

ดำเนินการต่อโดยเพิ่ม Code Module ใหม่ในคอลัมน์แรกของแถว

เพิ่มรหัส JQuery เพื่อวางส่วนด้านล่างส่วนแรกของแต่ละหน้า

ที่นั่น เราจะแทรกโค้ด JQuery ที่จะวางส่วนหัวใต้ส่วนฮีโร่แรกของแต่ละหน้าโดยอัตโนมัติ

jQuery(function($){
$(document).ready(function(){
$('#custom-header').insertAfter('.et_pb_section_0');
});
});

เพิ่มโค้ด CSS ลงในโมดูลโค้ดเดียวกัน

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

#et_pb_root #custom-header {
display: none;
}

4. ใช้ตำแหน่งและรูปแบบที่ติดหนึบกับส่วนหัว

เพิ่มตำแหน่งติดหนึบใน Section

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

• ตำแหน่งติดหนึบ: Stick to Top

เพิ่ม Sticky Box Shadow ไปยัง Section

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

• ความแรงของกล่องเงาเบลอ: 30px
• เงาสี
  • ค่าเริ่มต้น: rgba(0,0,0,0)
  • เหนียว: rgba(0,0,0,0.13)

แก้ไขพื้นหลังไล่ระดับ Sticky Row

จากนั้น เราจะใช้พื้นหลังไล่ระดับสีแบบเหนียวกับแถวของเรา

• สี 1: #ffffff
• สี 2: #e8e8e8

แก้ไขสีข้อความโมดูล Sticky Menu

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

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

แก้ไขสีไอคอนเมนูเหนียวแฮมเบอร์เกอร์

เราจะปรับเปลี่ยนสีไอคอนแฮมเบอร์เกอร์เมนูเหนียวด้วย

• ไอคอนเมนูแฮมเบอร์เกอร์สี: #2d2e34

เพิ่มตัวกรองกลับด้านโลโก้ปักหมุด

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

• กลับภาพ: 80%

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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