วิธีย่อขนาดส่วนหัวโดยรวมของคุณเมื่อเลื่อนด้วยตัวสร้างธีมของ Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

สมัครสมาชิกช่อง Youtube ของเรา

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

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

เริ่มต้นด้วยการไปที่ตัวสร้างธีม Divi

เริ่มสร้าง Global Header

จากนั้น คลิกที่ 'สร้างส่วนหัวส่วนกลาง' และเลือก 'สร้างส่วนหัวส่วนกลาง'

2. เริ่มสร้าง Global Header

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

สีพื้นหลัง

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

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

ขนาด

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

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

ระยะห่าง

แก้ไขช่องว่างด้านบนและด้านล่างของส่วนด้วย

• ช่องว่างภายในด้านบน: 2vw
• แผ่นรองด้านล่าง: 2vw

กล่องเงา

และแยกเนื้อหาของหน้าออกจากส่วนหัวส่วนกลางโดยเพิ่มเงาของกล่องที่ละเอียดอ่อนไปยังส่วนถัดไป

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

CSS ID

จากนั้น เพิ่มรหัส CSS ในส่วน ภายหลังในบทช่วยสอน เราจะใช้ CSS ID นี้เพื่อสร้างเอฟเฟกต์ส่วนหัวโดยรวมที่ย่อขนาดลงในการเลื่อน

• CSS ID: ส่วนเติม

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

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

position: fixed;
top: 0;

ดัชนี Z

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

• ดัชนี Z: 99999

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

CSS ID

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

• CSS ID: ความกว้างของแถว

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

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

display: flex;
align-items: center;

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

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

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

ขนาด

แก้ไขความกว้างของโมดูลต่อไป

• ความกว้าง: 5vw (เดสก์ท็อป), 9vw (แท็บเล็ต), 13vw (โทรศัพท์)

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

เลือกเมนู

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

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

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

เค้าโครง

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

• สไตล์: กึ่งกลาง
• ทิศทางเมนูแบบเลื่อนลง: ลงด้านล่าง

ข้อความเมนู

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

• แบบอักษรของเมนู: Rubik
• สีข้อความของเมนู: #000000
• ขนาดข้อความของเมนู: 0.9vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)

เมนูแบบเลื่อนลง

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

• สีพื้นหลังของเมนูแบบเลื่อนลง: #ffffff
• สีของเมนูดร็อปดาวน์: #2970fa

ไอคอน

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

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

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

เพิ่มสำเนา

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

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

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

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

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

จัดรูปแบบปุ่มตามลำดับ:

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

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

ระยะห่าง

และเพิ่มค่าการเติมที่กำหนดเองในขนาดหน้าจอต่างๆ

• ด้านบน: 0.8vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ช่วงล่าง: 0.8vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ช่องว่างภายในด้านซ้าย: 1.5vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 1.5vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)

กล่องเงา

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

• ตำแหน่งแนวตั้งของกล่องเงา: 20px
• ความแรงของกล่องเงาเบลอ: 30px
• เงาสี: rgba(41,112,250,0.2)

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

แทรกโค้ด JQuery & CSS

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

jQuery(function($){
  $(window).scroll(function() {
      if ($(document).scrollTop() > 50) {
        $('#section-padding').addClass('reduce-section-padding');
        $('#row-width').addClass('increase-row-width');
    } else {
       $('#section-padding').removeClass('reduce-section-padding');
       $('#section-padding').addClass('slow-transition');
       $('#row-width').removeClass('increase-row-width');
       $('#row-width').addClass('slow-transition');
    }
  });
});

.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}

.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}

.slow-transition {
transition: all 0.9s ease-out 0s;
}

#main-content {
margin-top: 5vw;
}

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

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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