วิธีเปิดเผยส่วนหัวโดยรวมของคุณขณะเลื่อนขึ้น & ซ่อนขณะเลื่อนลงด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

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

สีพื้นหลัง

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

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

ขนาด

ไปที่แท็บออกแบบและกำหนดความกว้าง 100% ให้กับส่วนของคุณถัดไป

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

ระยะห่าง

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

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

กล่องเงา

เราจะใช้เงาของกล่องที่ละเอียดอ่อนในส่วนของเราเช่นกัน

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

CSS ID

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

• CSS ID: global-header-section

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

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

position: fixed;
top: 0;

ดัชนี Z

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

• ดัชนี Z: 99999

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

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

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

display: flex;
align-items: center;

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

เพิ่มโซเชียลเน็ตเวิร์ก

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

รีเซ็ตสไตล์เครือข่ายโซเชียลส่วนบุคคล

ดำเนินการต่อโดยรีเซ็ตสไตล์ของแต่ละเครือข่ายโซเชียลในระดับบุคคล

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

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

• ช่องว่างภายใน: 0.5vw

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

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

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

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

เปลี่ยนสีไอคอนในการตั้งค่าไอคอนด้วย

• ไอคอนสี: #000000

การตั้งค่าไอคอนโฮเวอร์

และปรับเปลี่ยนสีของไอคอนเมื่อวางเมาส์ไว้

• สีไอคอน: #c2ab92

ชายแดน

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

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #000000

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

เลือกเมนู

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

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

อัปโหลดโลโก้ไปยังโมดูลถัดไป

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

และเอาสีพื้นหลังออก

เค้าโครง

จากนั้น ไปที่แท็บการออกแบบ และตรวจสอบให้แน่ใจว่าการตั้งค่าต่อไปนี้นำไปใช้กับเค้าโครง:

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

ข้อความเมนูเริ่มต้น

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

• สีของลิงค์ที่ใช้งาน: #c2ab92
• แบบอักษรของเมนู: Cormorant Garamond
• สีข้อความ: #000000
• ขนาดข้อความของเมนู: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)

วางเมาส์เหนือข้อความเมนู

แก้ไขข้อความเมนูเมื่อวางเมาส์เหนือ

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

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

ถัดไป เปลี่ยนสีของเส้นเมนูแบบเลื่อนลงในการตั้งค่าเมนูแบบเลื่อนลง

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

ไอคอน

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

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

ขนาด

ดำเนินการต่อโดยเปลี่ยนความกว้างสูงสุดของโลโก้ตามขนาดหน้าจอต่างๆ ในการตั้งค่าขนาด

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

ลิงค์เมนู CSS

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

padding-bottom: 1vw;
border-bottom: 1px solid #000;

เพิ่มโมดูลข้อความในคอลัมน์ 3

เพิ่มสำเนา

สู่โมดูลสุดท้าย! โมดูลเดียวที่เราต้องการคือโมดูลข้อความ

เพิ่มลิงค์

โมดูลนี้จะทำหน้าที่เป็น CTA เพิ่มลิงค์ที่คุณเลือก

• โมดูลลิงค์ URL: #

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

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

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

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

เปลี่ยนสีข้อความเมื่อโฮเวอร์

• สีข้อความ: #c2ab92

ขนาด

ดำเนินการต่อโดยเปลี่ยนการตั้งค่าขนาดของโมดูลตามขนาดหน้าจอต่างๆ

• ความกว้าง: 12vw (เดสก์ท็อป), 18vw (แท็บเล็ต), 22vw (โทรศัพท์)
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

และเพิ่มช่องว่างภายในด้านล่างในการตั้งค่าระยะห่าง

• ช่องว่างภายใน: 0.5vw

ชายแดน

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

• ความกว้างขอบล่าง: 1px
• สีขอบล่าง: #000000

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

แทรกโค้ด JQuery & CSS

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

jQuery(function($){
  
var topPosition = 0;


$(window).scroll(function() {

    var scrollMovement = $(window).scrollTop();
  
    if (topPosition < 200 ){
    }
    else{
    if(scrollMovement > topPosition) {
          $('#global-header-section').removeClass('show-header');
          $('#global-header-section').addClass('hide-header');
    } else {
          $('#global-header-section').removeClass('hide-header');
          $('#global-header-section').addClass('show-header');
    }
    }
    topPosition = scrollMovement;
});  
  
});

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

.hide-header {
opacity: 0;
margin-top: -200px !important;
}

.show-header {
opacity: 1;
margin-top: 0px !important;
}

#global-header-section {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

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

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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