เมื่อสร้างส่วนหัวร่วม มีหลายสิ่งที่คุณต้องพิจารณา องค์ประกอบที่คุณใส่ในส่วนหัวของคุณควรช่วยคุณ ผู้เข้าชม เพื่อนำทางได้อย่างง่ายดาย เพื่อลดเวลาที่ผู้คนใช้ในการท่องเว็บ นักออกแบบเว็บไซต์จำนวนมากเลือกใช้ส่วนหัวบนสุดแบบตายตัว ผู้เข้าชม เพื่อเข้าถึงหน้าหรือสิ่งพิมพ์อื่นๆ ได้ทันที สิ่งนี้มีประโยชน์มาก แต่เมื่อสร้างส่วนหัวคงที่ ความสูงส่วนใหญ่ของวิวพอร์ตของคุณ ผู้เข้าชม ไม่ว่างซึ่งอนุญาตน้อยกว่า เนื้อหา เพื่อแสดงทันที หากคุณไม่พร้อมที่จะเสียสละก็รู้ว่าคุณไม่จำเป็นต้องทำ คุณสามารถเก็บเกี่ยวผลประโยชน์จากส่วนหัวคงที่ได้โดยปล่อยให้ส่วนหัวโดยรวมของคุณเปิดเผยเมื่อผู้เยี่ยมชมของคุณเลื่อนขึ้นและซ่อนไว้เมื่อพวกเขาเลื่อนลง วันนี้เราจะแนะนำคุณเกี่ยวกับการซ่อนและเปิดเผยส่วนหัวส่วนกลางของคุณโดยใช้ตัวสร้างธีมของ Divi
การสำรวจ
ก่อนที่เราจะดำน้ำในบทช่วยสอนเรามาดูผลลัพธ์ของขนาดหน้าจอที่แตกต่างกัน
1. ไปที่ตัวสร้างธีม Divi และเพิ่มเทมเพลตใหม่
เริ่มต้นด้วยการไปที่ตัวสร้างธีม Divi
เริ่มสร้างส่วนหัวร่วม
คลิกที่ "เพิ่มส่วนหัวส่วนกลาง" แล้วเลือก "สร้างส่วนหัวส่วนกลาง"
2. เริ่มสร้างส่วนหัวร่วม
การตั้งค่ามาตรา
สีพื้นหลัง
ภายในตัวแก้ไขเทมเพลตคุณจะสังเกตเห็นส่วนหนึ่ง เปิดส่วนนี้และเปลี่ยนสีพื้นหลัง
- สีพื้นหลัง: #ffffff
ปรับขนาด
ไปที่แท็บออกแบบและกำหนดความกว้าง 100% ให้กับส่วนถัดไปของคุณ
- ความกว้าง: 100%
การเว้นวรรค
เพิ่มช่องว่างภายในและล่างแบบกำหนดเอง
- เสริมด้านบน: 2vw
- ช่องว่างภายในด้านล่าง: 2vw
กล่องเงา
นอกจากนี้เรายังจะใช้เฉดสีอ่อน ๆ ในส่วนของเรา
- ความแรงของกล่องเงาเบลอ: 50px
- สีเงา: rgba (0,0,0,0,08)
รหัส CSS
ต่อไปในบทช่วยสอนนี้เราจะต้องใช้โค้ดที่กำหนดเองเพื่อให้เอฟเฟกต์การเลื่อนเกิดขึ้น เพื่อเตรียมพร้อมสำหรับสิ่งนี้เราเพิ่มรหัส CSS ในส่วน
- CSS ID: ส่วนหัวส่วนกลาง
องค์ประกอบหลัก
นอกจากนี้เราจะทำให้ส่วนนี้เป็นส่วนหัวคงที่โดยการเพิ่มโค้ด 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
- แบบอักษรของเมนู: นกกาน้ำ
- สีข้อความ: # 000000
- ขนาดข้อความเมนู: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
ข้อความเมนูโฮเวอร์
เปลี่ยนข้อความเมนูเมื่อโฮเวอร์
- สีข้อความของเมนู: # c2ab92
เมนูแบบเลื่อนลง
จากนั้นเปลี่ยนสีของเส้นเมนูแบบเลื่อนลงในการตั้งค่าเมนูแบบเลื่อนลง
- สีของบรรทัดของเมนูแบบเลื่อนลง: # 000000
ไอคอน
นอกจากนี้เรายังเปลี่ยนสีของไอคอนเมนูแฮมเบอร์เกอร์ในการตั้งค่าไอคอน
- สีไอคอนเมนูแฮมเบอร์เกอร์: # 000000
ปรับขนาด
ดำเนินการต่อโดยเปลี่ยนความกว้างสูงสุดของโลโก้บนหน้าจอขนาดต่างๆในการตั้งค่าการปรับขนาด
- ความกว้างของโลโก้สูงสุด: 5vw (โต๊ะทำงาน), 10vw (แท็บเล็ต), 13vw (โทรศัพท์)
เมนูลิงค์ CSS
และทำการตั้งค่าโมดูลให้เสร็จสมบูรณ์โดยเพิ่มโค้ด CSS สองบรรทัดลงในลิงก์เมนูโมดูลในแท็บขั้นสูง
padding-bottom: 1vw;border-bottom: 1px solid #000;
เพิ่มโมดูลข้อความในคอลัมน์ 3
เพิ่มสำเนา
ไปที่โมดูลสุดท้ายกันเถอะ! มีโมดูลเดียวที่เราต้องการคือโมดูลข้อความ
เพิ่มการเชื่อมโยง
โมดูลนี้จะทำหน้าที่เป็น CTA เพิ่มลิงค์ที่คุณเลือก
- URL ลิงก์โมดูล: #
การตั้งค่าข้อความเริ่มต้น
สลับไปที่แท็บการออกแบบโมดูลและเปลี่ยนการตั้งค่าข้อความตาม:
- แบบอักษร: นกกามา
- สีข้อความ: # 000000
- ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)
เลื่อนการตั้งค่าข้อความ
เปลี่ยนสีของข้อความบนโฮเวอร์
- สีข้อความ: # c2ab92
ปรับขนาด
ดำเนินการต่อโดยเปลี่ยนพารามิเตอร์การปรับขนาดโมดูลบนหน้าจอขนาดต่างๆ
- ความกว้าง: 12vw (เดสก์ท็อป), 18vw (แท็บเล็ต), 22vw (โทรศัพท์)
- การจัดตำแหน่งของโมดูล: ศูนย์
การเว้นวรรค
และเพิ่มช่องว่างด้านล่างในการตั้งค่าระยะห่าง
- ช่องว่างภายในด้านล่าง: 0.5vw
ชายแดน
ทำพารามิเตอร์โมดูลให้สมบูรณ์โดยการเพิ่มเส้นขอบล่าง
- ความกว้างชายแดนด้านล่าง: 1px
- สีขอบด้านล่าง: # 000000
เพิ่มโมดูลโค้ดในคอลัมน์ 2
แทรกรหัส JQuery และ CSS
เมื่อคุณจัดสไตล์ม็อดทั้งหมดในแถวเรียบร้อยแล้วก็ถึงเวลาสร้างเอฟเฟกต์เปิดเผย / ซ่อน ในการดำเนินการนี้เราจะต้องเพิ่มโค้ดที่กำหนดเองลงในโมดูลโค้ดที่เราจะวางไว้ในคอลัมน์ 2 โค้ดนี้จะทำงานในส่วนใด ๆ ที่คุณเพิ่มไม่ว่าคุณจะออกแบบส่วนหัวหรือโมดูลอย่างไร ที่คุณใช้เพียงตรวจสอบให้แน่ใจว่าคุณได้เพิ่มรหัส CSS ในส่วนของคุณแล้ว วางโค้ด JQuery ระหว่างแท็กสคริปต์และโค้ด CSS ระหว่างแท็กสไตล์ดังที่แสดงในหน้าจอพิมพ์ด้านล่าง
jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });
main-content{margin-top: 7vw;}
3. บันทึกการปรับเปลี่ยนเครื่องกำเนิดและแสดงผลลัพธ์
เมื่อคุณทำส่วนหัวส่วนกลางเสร็จแล้ว ให้บันทึกการเปลี่ยนแปลงทั้งหมดและดูผลลัพธ์ใน เว็บไซต์เว็บ!
การสำรวจ
ตอนนี้เราได้ทำตามขั้นตอนทั้งหมดแล้วเรามาดูขั้นสุดท้ายกันว่าจะมีหน้าตาเป็นอย่างไรในขนาดหน้าจอต่างๆ
คิดสุดท้าย
ในบทความนี้เราได้แสดงวิธีทำให้ส่วนหัวร่วมของคุณปรากฏขึ้นเมื่อเลื่อนขึ้นและซ่อนไว้เมื่อเลื่อนลง นี่เป็นวิธีที่ได้รับความนิยมและมีประสิทธิภาพในการช่วยให้ผู้เยี่ยมชมของคุณไปยังส่วนต่างๆได้ง่าย คุณยังสามารถดาวน์โหลดไฟล์ JSON ได้ฟรี! หากคุณมีคำถามหรือข้อเสนอแนะอย่าลังเลที่จะแสดงความคิดเห็นในส่วนความคิดเห็นด้านล่าง
ใช้ได้! ขอแสดงความยินดีกับงาน! การอยู่คนเดียวโดยไม่มี stepper แบบนี้เป็นเรื่องยากสำหรับผู้เริ่มต้น ฉันแค่อยากรู้ว่าในกระบวนการเดียวกันนี้ คุณสามารถเพิ่มการกำหนดค่าเพื่อให้เมนูไม่หายไปได้หรือไม่ เพียงสแนปเมื่อเลื่อนดูหน้าต่างๆ