ต้องการเปลี่ยนส่วนหัวในการเลื่อนหน้าด้วย Elementor ?
มีพฤติกรรมส่วนหัวมากมายที่คุณสามารถทำได้ด้วย Elementor Pro. หนึ่งในนั้นคือเปลี่ยนส่วนหัวหนึ่งกับอีกส่วนหัวเมื่อเลื่อนหน้า บทความนี้จะแสดงให้คุณเห็นว่า
Elementor Pro อย่างที่คุณรู้มาพร้อมกับคุณสมบัติ ตัวสร้างธีม เพื่อให้คุณสามารถสร้างส่วนหัวที่กำหนดเองบน your เว็บไซต์ เวิร์ดเพรส. ด้วยคุณสมบัตินี้ คุณไม่จำเป็นต้องพึ่งพาสิ่งที่คุณนำเสนออีกต่อไป ธีม WordPress เมื่อพูดถึงการปรับแต่งส่วนหัวซึ่งมักจะมีจำกัด
คุณสามารถเพิ่มองค์ประกอบใดๆ ที่คุณต้องการ ใช้การตั้งค่าตัวพิมพ์ที่คุณต้องการ และตั้งค่าลักษณะการทำงานใดๆ ที่คุณต้องการ
Elementor Pro มีตัวเลือกการปรับแต่งในตัวเพื่อเพิ่ม หัวเหนียว. เราจะใช้ฟังก์ชันนี้เพื่อสร้างส่วนหัวที่เปลี่ยนแปลงเมื่อเลื่อนหน้า CSS ที่กำหนดเองยังจำเป็นสำหรับพฤติกรรมส่วนหัวประเภทนี้
อ่าน: วิธีสร้างส่วนหัวที่กำหนดเองใน WordPress ด้วย Elementor
ต่อไปนี้คือตัวอย่างส่วนหัวที่เปลี่ยนแปลงเมื่อเลื่อนหน้า
ขั้นตอนที่ 1: สร้างส่วนหัวที่กำหนดเอง
ก่อนที่คุณจะเริ่มต้น ตรวจสอบให้แน่ใจว่าคุณได้อัปเกรด Elementor เป็นเวอร์ชันโปรแล้ว เนื่องจาก Theme Builder มีให้ใช้งานใน Elementor Pro เท่านั้น คุณสามารถรับ Elementor Pro เวอร์ชันโปรได้บน เว็บไซต์อย่างเป็นทางการ.
เมื่อคุณพร้อมแล้ว ไปที่ เทมเพลต -> ตัวสร้างธีม บนแดชบอร์ด WordPress หลักของคุณ ในแดชบอร์ดตัวสร้างธีม ให้วางตัวชี้ของคุณไว้เหนือแท็บ ส่วนหัว และคลิกที่ไอคอน บวก เพื่อสร้างเทมเพลตส่วนหัวใหม่
ในไลบรารีเทมเพลตที่ปรากฏขึ้น คุณสามารถเลือกเทมเพลตส่วนหัวที่กำหนดไว้ล่วงหน้าที่คุณต้องการได้ หรือถ้าคุณต้องการสร้างส่วนหัวตั้งแต่เริ่มต้น คุณสามารถปิดไลบรารีเทมเพลตเพื่อเปิดตัวแก้ไข Elementor
ค้นพบยัง: วิธีสร้างรูปร่างที่กำหนดเองใน Elementor
ในบทความนี้ เราจะสร้างเทมเพลตส่วนหัวตั้งแต่เริ่มต้น
เริ่มสร้างส่วนหัวของคุณโดยเพิ่มส่วน จากนั้นเพิ่มองค์ประกอบที่จำเป็นและสร้างสไตล์ตามนั้น
เมื่อคุณเพิ่มองค์ประกอบที่จำเป็นและสร้างสไตล์แล้ว ให้ไปที่แท็บ ขั้นสูง ภายใต้บล็อก ขั้นสูง ตั้งค่าดัชนี Z เป็น 100 และเพิ่มคลาส CSSheader-1
จากนั้นทำซ้ำส่วนหัวที่คุณเพิ่งสร้างขึ้นด้านบน ส่วนที่ซ้ำกันจะเป็นส่วนหัวที่สองของคุณ ซึ่งจะปรากฏขึ้นเมื่อเลื่อนลงมา
แก้ไขส่วนหัวที่ซ้ำกัน คุณสามารถเพิ่มรายการเพิ่มเติมหรือลบรายการที่มีอยู่ คุณยังสามารถเปลี่ยนพื้นหลังได้ ทั้งหมดที่คุณต้องการ เมื่อแก้ไขเสร็จแล้วให้ไปที่แท็บ ขั้นสูง ภายใต้บล็อก ตั้งค่าขั้นสูง, เปลี่ยนชื่อคลาส CSS เป็น header-2
จากนั้นเปิดบล็อก เอฟเฟกต์การเคลื่อนไหว ในรายการแบบหล่นลง เหนียว, ตั้งค่าให้ Top. คุณสามารถกำหนดออฟเซ็ตของเอฟเฟกต์ในฟิลด์ ออฟเซ็ตเอฟเฟกต์ ค่าที่คุณตั้งไว้ที่นี่จะเป็นตัวกำหนดความลึกของการเลื่อนก่อนที่เอฟเฟกต์ (ในกรณีนี้จะเหนียว) จะเกิดขึ้น
เมื่อคุณแก้ไขส่วนหัวทั้งสองเสร็จแล้ว ให้เปลี่ยนลำดับของส่วนหัว
แก้ไขส่วนล่างและตั้งค่าระยะขอบติดลบให้อยู่เหนือส่วนบน โดยไปที่ แท็บขั้นสูง และตั้งค่าระยะขอบบนเป็นประมาณ -65
เผยแพร่ส่วนหัวของคุณโดยคลิกที่ปุ่ม Publier ที่ด้านล่างของแผงการตั้งค่าของ Elementor เพิ่มเงื่อนไขการแสดงผลโดยคลิกที่ปุ่ม เพิ่มเงื่อนไข คลิกที่ปุ่ม บันทึกและปิด เมื่อคุณตั้งค่าสถานะการแสดงผลเสร็จแล้ว
ขั้นตอนที่ 2: เพิ่ม CSS ที่กำหนดเอง
CSS ด้านล่างใช้เพื่อควบคุมเอฟเฟกต์การเปลี่ยนแปลง คุณสามารถเพิ่ม CSS ในเครื่องมือปรับแต่งธีมได้ ไปที่ ลักษณะที่ปรากฏ -> ปรับแต่ง บนแดชบอร์ด WordPress หลักของคุณ ในแดชบอร์ดปรับแต่งธีม ให้เปิดบล็อก CSS เพิ่มเติม และวาง CSS ต่อไปนี้
ข้อมูลโค้ด CSS:
.header-2 {แปลง: translatey (-80px); -moz-transition: ทั้งหมด .3s ง่าย! สำคัญ; -webkit-transition: ทั้งหมด .3s ง่าย! สำคัญ; การเปลี่ยนแปลง: ทั้งหมด .3s ง่าย! สำคัญ; } .elementor-sticky - effects.header-2 {ความสูง: อัตโนมัติ!สำคัญ; แปลง: translatey (0px); } .elementor-sticky - effects.header-1 {แสดง: ไม่มี! สำคัญ; }
คลิกที่ปุ่ม Publier เพื่อใช้การเปลี่ยนแปลง
โดยสังเขป
Elementor Pro มาพร้อมกับคุณสมบัติตัวสร้างธีม ซึ่งคุณสามารถสร้างเทมเพลตแบบกำหนดเองสำหรับส่วนต่างๆ ของธีมของคุณได้ เช่น ส่วนหัว เมื่อสร้างส่วนหัวที่กำหนดเองโดยใช้ Elementor Theme Builder คุณสามารถตั้งค่าการทำงานใดๆ ที่คุณต้องการด้วยความสามารถในการเพิ่ม CSS ที่กำหนดเอง แม้จะไม่ได้เพิ่ม CSS ที่กำหนดเอง คุณก็ตั้งค่าเอฟเฟกต์เป็นแบบติดหนึบและโปร่งใสได้
อ่าน: วิธีสร้างหน้า 404 ใน WordPress ด้วย Elementor
การเปลี่ยนส่วนหัวในหน้าการเลื่อนนั้นมีข้อดีบางประการ
ตัวอย่างเช่น คุณสามารถใช้ส่วนหัวรอง (ส่วนหัวที่ปรากฏหลังจากเลื่อนลงมา) เพื่อเพิ่มโอกาสที่เพจของคุณจะถูกแชร์โดยแสดงเฉพาะปุ่มแชร์บนโซเชียลมีเดีย .
รับ Elementor Pro ทันที!
สรุป
ดังนั้น ! เท่านั้นสำหรับบทช่วยสอนนี้ซึ่งจะแสดงวิธีเปลี่ยนส่วนหัวการเลื่อนหน้าใน Elementor หากคุณมีข้อกังวลใด ๆ เกี่ยวกับวิธีการเดินทางไปที่นั่นแจ้งให้เราทราบใน ความเห็น.
อย่างไรก็ตามคุณสามารถปรึกษาได้ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
