เมื่อสร้างส่วนหัวร่วม มีหลายสิ่งที่คุณต้องพิจารณา องค์ประกอบที่คุณใส่ในส่วนหัวของคุณควรช่วยคุณ ผู้เข้าชม เพื่อนำทางได้อย่างง่ายดาย เพื่อลดเวลาที่ผู้คนใช้ในการท่องเว็บ นักออกแบบเว็บไซต์จำนวนมากเลือกใช้ส่วนหัวบนสุดแบบตายตัว ผู้เข้าชม เพื่อเข้าถึงหน้าหรือสิ่งพิมพ์อื่นๆ ได้ทันที สิ่งนี้มีประโยชน์มาก แต่เมื่อสร้างส่วนหัวคงที่ ความสูงส่วนใหญ่ของวิวพอร์ตของคุณ ผู้เข้าชม ไม่ว่างซึ่งอนุญาตน้อยกว่า เนื้อหา เพื่อแสดงทันที หากคุณไม่พร้อมที่จะเสียสละก็รู้ว่าคุณไม่จำเป็นต้องทำ คุณสามารถเก็บเกี่ยวผลประโยชน์จากส่วนหัวคงที่ได้โดยปล่อยให้ส่วนหัวโดยรวมของคุณเปิดเผยเมื่อผู้เยี่ยมชมของคุณเลื่อนขึ้นและซ่อนไว้เมื่อพวกเขาเลื่อนลง วันนี้เราจะแนะนำคุณเกี่ยวกับการซ่อนและเปิดเผยส่วนหัวส่วนกลางของคุณโดยใช้ตัวสร้างธีมของ 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