วิธีสลับส่วนหัว Divi ของคุณเป็นอีกอันบน Scroll

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

1. ไปที่ตัวสร้างธีม Divi และเริ่มสร้างส่วนหัวส่วนกลาง

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

เริ่มต้นด้วยการไปที่ Divi Theme Builder ในแบ็กเอนด์ของเว็บไซต์ WordPress ของคุณและคลิกที่ 'Add Global Header'

สร้างส่วนหัวระดับโลก

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

2. สร้างทั้งสองส่วนหัวในส่วนเดียวกัน

แก้ไขมาตรา

ขนาด

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

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

ระยะห่าง

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

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

กล่องเงา

เรากำลังใช้เงากล่องที่ละเอียดอ่อนเช่นกัน

• ตำแหน่งแนวตั้งเงาของกล่อง: 15px
• เงาสี: rgba(0,0,0,0.06)

ตำแหน่ง

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

• ตำแหน่ง: คงที่
• ที่ตั้ง: ท็อปเซ็นเตอร์

เพิ่มส่วนหัวของแถว #1

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

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

สีพื้นหลัง

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

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

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

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

ระยะห่าง

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

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

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

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

display: flex;
align-items: center;

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลดภาพ

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

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

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

• การจัดตำแหน่งภาพ: กึ่งกลาง

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

เลือกเมนู

ในคอลัมน์ที่สอง โมดูลเดียวที่เราต้องการคือโมดูลเมนู เลือกเมนูที่ต้องการ

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

ลบสีพื้นหลังของโมดูลถัดไป

เค้าโครง

ไปที่แท็บออกแบบและเปลี่ยนเลย์เอาต์ตามลำดับ:

• สไตล์: กึ่งกลาง

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

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

• แบบอักษรของเมนู: Roboto
• น้ำหนักแบบอักษรของเมนู: ตัวหนา
• สีข้อความของเมนู: #ffffff (เดสก์ท็อป), #000000 (แท็บเล็ตและโทรศัพท์)
• ขนาดข้อความของเมนู: 18px

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

ต่อไป เราจะเปลี่ยนสีเส้นของเมนูดรอปดาวน์ในการตั้งค่าข้อความของเมนูดรอปดาวน์

• สีของเมนูดร็อปดาวน์: #000000

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

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

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

ระยะห่าง

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

• Padding ด้านซ้าย: 30px (เฉพาะแท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านขวา: 30px (แท็บเล็ตและโทรศัพท์เท่านั้น)

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

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

ในคอลัมน์สุดท้าย โมดูลเดียวที่เราต้องการคือ Social Media Follow Module เพิ่มเครือข่ายโซเชียลที่คุณเลือก

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

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

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

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

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

• การจัดตำแหน่งโมดูล: ศูนย์

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

ปรับเปลี่ยนสีของไอคอนด้วย

• ไอคอนสี: #0042c9

ชายแดน

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

• ทุกมุม: 100px

เพิ่มส่วนหัวของแถว #2

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

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

ขนาด

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

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

ระยะห่าง

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

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

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

จากนั้น จัดแนวเนื้อหาคอลัมน์ทั้งหมดโดยใช้โค้ด CSS สองบรรทัดในองค์ประกอบหลักของแถว

display: flex;
align-items: center;

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

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

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

เพิ่มโมดูลรูปภาพในคอลัมน์ 1

อัพโหลดภาพ

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

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

เปลี่ยนการจัดแนวภาพของโมดูลต่อไป

• การจัดตำแหน่งภาพ: กึ่งกลาง

โคลนโมดูลเมนู & วางในคอลัมน์ 2 ของส่วนหัวของแถว #2

ลอกแบบโมดูลเมนูที่ใช้ในแถวก่อนหน้า และวางที่ซ้ำกันในคอลัมน์กลางของแถวที่สอง

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

เปิดโมดูลเมนูที่ซ้ำกันและเปลี่ยนสีข้อความของเมนู

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

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

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

• สีของเมนูดรอปดาวน์: #ffc21d

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

ทำการตั้งค่าโมดูลเมนูโดยเปลี่ยนสีไอคอนเมนูแฮมเบอร์เกอร์

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

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

เพิ่มสำเนา

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

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

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

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

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 20px (เดสก์ท็อป), 18px (แท็บเล็ต), 15px (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• ความกว้างของขอบปุ่ม: 0px

• แบบอักษรของปุ่ม: Roboto
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 33px (เดสก์ท็อป), 35px (แท็บเล็ต), 38px (โทรศัพท์)
• ช่องว่างภายในด้านล่าง: 33px (เดสก์ท็อป), 35px (แท็บเล็ต), 38px (โทรศัพท์)

2. เพิ่มคลาส CSS

ส่วน

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

• CSS Class: header-section

ส่วนหัวของแถว #1

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

• CSS คลาส: header-1

ส่วนหัวของแถว #2

เปิดแถวที่สองด้วย ใช้คลาส CSS ต่อไปนี้:

• CSS คลาส: ส่วนหัว-2

3. เพิ่ม JQuery & CSS Code

เพิ่มโมดูลโค้ดในคอลัมน์ที่สามของแถวแรก

เมื่อคลาส CSS ทั้งหมดพร้อมแล้ว ก็ถึงเวลาเพิ่มโค้ด เพิ่ม Code Module ใหม่ทุกที่ที่คุณต้องการภายในส่วนของคุณ เรากำลังวางไว้ในคอลัมน์ที่สามของแถวแรก

เพิ่มรหัส JQuery (ระหว่างแท็กสคริปต์)

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

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

เพิ่มโค้ด CSS (ระหว่างแท็กสไตล์)

เพิ่มโค้ด CSS ต่อไปนี้ ระหว่างแท็กสไตล์ ด้วย:

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

4. บันทึกการเปลี่ยนแปลงตัวสร้างธีมและดูผลลัพธ์

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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