วิธีเปลี่ยนโลโก้ Sticky ของคุณบน Scroll ด้วย Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

สีพื้นหลัง

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

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

ระยะห่าง

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

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

กล่องเงา

เพิ่มเงากล่องด้วย

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

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

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง:
  • เดสก์ท็อป: 80%
  • แท็บเล็ตและโทรศัพท์: 100%
• ความกว้างสูงสุด: 2580px

ระยะห่าง

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

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

ระยะห่างคอลัมน์ 1

จากนั้นเปิดการตั้งค่าคอลัมน์ 1 และใช้ช่องว่างภายในด้านบนและด้านล่าง

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

คอลัมน์ 2 สีพื้นหลัง

ไปที่การตั้งค่าของคอลัมน์ที่สองและเพิ่มสีพื้นหลัง

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

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

เลือกเมนู

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

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

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

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

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

• แบบอักษรของเมนู: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของเมนู: ตัวหนา
• สีข้อความของเมนู: #ffffff
• ขนาดข้อความของเมนู: 16px
• การจัดตำแหน่งข้อความ: ขวา

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

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

• สีพื้นหลังของเมนูแบบเลื่อนลง: #556de0
• เมนูแบบเลื่อนลง Line Color: rgba(0,45,76,0)
• สีพื้นหลังเมนูมือถือ: #556de0
• สีข้อความเมนูมือถือ: #ffffff

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

เปลี่ยนสีไอคอนต่อไป

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

ระยะห่าง

และใช้ค่าการเว้นวรรคที่ตอบสนองบางอย่าง

• มาร์จิ้นสูงสุด:
  • แท็บเล็ตและโทรศัพท์: 10px
• ขอบล่าง:
  • แท็บเล็ตและโทรศัพท์: 10px
• ระยะขอบซ้าย:
  • แท็บเล็ตและโทรศัพท์: 5%
• ระยะขอบขวา: 5%

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

เพิ่มสำเนา

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

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

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

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

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

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

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

• ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
• แบบอักษรของปุ่ม: มอนต์เซอร์รัต
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

และใช้ค่าการเว้นวรรคที่ตอบสนองบางอย่าง

• มาร์จิ้นสูงสุด:
  • เดสก์ท็อป: 30px
  • แท็บเล็ตและโทรศัพท์: 20px
• ขอบล่าง:
  • เดสก์ท็อป: 30px
  • แท็บเล็ตและโทรศัพท์: 20px

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

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

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

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

สีพื้นหลังมาตราเหนียว

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

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

การปรับขนาดแถวเหนียว

แก้ไขความกว้างของแถวในสถานะติดหนึบถัดไป

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

ปักหมุดคอลัมน์ 1 ระยะห่าง

จากนั้น เราจะลบการเติมด้านบนและด้านล่างของคอลัมน์ 1 ในสถานะติดหนึบ

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

คอลัมน์ปักหมุด 2 สีพื้นหลัง

เราจะเปลี่ยนสีพื้นหลังคอลัมน์เหนียว 2 ด้วย

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

สีข้อความเมนูเหนียว

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

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

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

เปลี่ยนสีเมนูแบบเลื่อนลงบางส่วนในสถานะเหนียวเช่นกัน

• สีพื้นหลังของเมนูแบบเลื่อนลง: #ffffff
• สีพื้นหลังเมนูมือถือ: #ffffff
• สีข้อความเมนูมือถือ: #556de0

การตั้งค่าไอคอนเมนูเหนียว

พร้อมกับสีของไอคอนที่ติดหนึบ

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

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

จากนั้นไปที่การตั้งค่าการเว้นวรรคและใช้ระยะขอบซ้ายแบบเหนียว

• ระยะขอบซ้าย: 5%

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

สุดท้ายแต่ไม่ท้ายสุด แก้ไขค่าระยะขอบแบบติดหนึบของโมดูลปุ่มในการตั้งค่าระยะห่าง

• ขอบบน: 15px
• ขอบล่าง: 15px

3. เปลี่ยนโลโก้ในสถานะติดหนึบ

อัปโหลดทั้งสองไอคอนไปยัง Media Library

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

เลือกโลโก้แบบคงที่

จากนั้น เปิดโมดูลเมนูและเลือกไฟล์ภาพโลโก้คงที่ในการตั้งค่าโลโก้

ใช้ความกว้างและความสูงของโลโก้สูงสุดเป็นพิกเซล

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

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

คัดลอก URL โลโก้ติดหนึบ

ตอนนี้ กลับไปที่ไลบรารีสื่อของคุณและคัดลอก URL ของโลโก้ติดหนึบของคุณ

เพิ่ม Sticky URL ในสถานะ Sticky (องค์ประกอบหลักของโลโก้เมนู)

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

content: url(addlinkhere);

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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