วิธีสร้าง Sticky Header ด้วยตัวเลือก Sticky ของ Divi

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

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

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

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

ไปที่ Divi Theme Builder และเริ่มสร้างส่วนหัวระดับโลกหรือแบบกำหนดเองใหม่

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

พื้นหลังไล่โทนสี

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

• สี 1: #ffba60
• สี 2: #ffd6a0
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 50%
• ตำแหน่งสุดท้าย: 50%

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

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

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

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

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

ขนาด

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

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

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนและด้านล่างแบบกำหนดเองด้วย

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

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

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

display: flex;

เพิ่มโมดูลการติดตามโซเชียลมีเดียในคอลัมน์ 1

เพิ่มเครือข่ายโซเชียลทางเลือก

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

ลบสีพื้นหลังของแต่ละเครือข่ายโซเชียล

ดำเนินการต่อโดยลบสีพื้นหลังของโซเชียลเน็ตเวิร์กแต่ละสีแยกกัน

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

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

• ไอคอนสี: #26333a

ระยะห่าง

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

• ขอบบน: 5px

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

เพิ่มสำเนา

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

เพิ่มลิงค์

เพิ่มลิงค์ต่อไป

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

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

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

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

เรากำลังจัดสไตล์ปุ่มด้วย

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 14px
• สีข้อความของปุ่ม: #26333a
• ความกว้างของขอบปุ่ม: 2px
• สีเส้นขอบของปุ่ม: #26333a
• รัศมีเส้นขอบของปุ่ม: 0px

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

ระยะห่าง

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

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

เพิ่มส่วน #2

พื้นหลังไล่โทนสี

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

• สี 1: #ffffff
• สี 2: #f7f7f7
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 90deg
• ตำแหน่งเริ่มต้น: 25%
• ตำแหน่งสุดท้าย: 25%

ระยะห่าง

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

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

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

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

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

ขนาด

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

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

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

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

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

เลือกเมนู

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

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

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

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

จากนั้น ลบสีพื้นหลังสีขาวเริ่มต้นของโมดูล

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

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

• น้ำหนักแบบอักษรของเมนู: ตัวหนา
• สีข้อความของเมนู: #002d4c
• ขนาดข้อความของเมนู: 15px
• ระยะห่างระหว่างตัวอักษรของเมนู: 4px
• การจัดตำแหน่งข้อความ: ขวา

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

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

• สีพื้นหลังของเมนูแบบเลื่อนลง: #ffffff
• เมนูแบบเลื่อนลง Line Color: #002d4c

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

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

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

ขนาด

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

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

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

เปิดส่วน #2 Sticky

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

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

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

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

• สี 1: #26333a
• สี 2: #1e272f

ยืดแถวในสถานะติดหนึบ

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

• ความกว้าง: 95%

ลบการเติมแถวในสถานะติดหนึบ

เรากำลังเอาการเสริมด้านบนและด้านล่างที่เหนียวของแถวของเราออกด้วย

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

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

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

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

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

พร้อมกับสีของไอคอน

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

ลบความสูงของโลโก้ในสถานะติดหนึบ

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

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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