ส่วนหัวแบบติดหนึบเป็นวิธีที่ดีในการทำให้เมนูนำทางของเว็บไซต์ของคุณมองเห็นได้ตลอดเวลา ทำให้สามารถเข้าถึงลิงก์และข้อมูลที่สำคัญได้อย่างง่ายดาย อย่างไรก็ตาม ส่วนหัวแบบคงที่อาจกลายเป็นเรื่องซ้ำซากเมื่อเวลาผ่านไป และคุณอาจต้องการเปลี่ยนสีบนแถบเลื่อนเพื่อสร้างประสบการณ์ผู้ใช้ที่ไดนามิกและน่าดึงดูดยิ่งขึ้น ในคู่มือนี้ เราจะแสดงวิธีเปลี่ยนสีของส่วนหัวแบบติดหนึบในการเลื่อนใน Elementor โดยใช้ขั้นตอนง่ายๆ และง่ายต่อการปฏิบัติตาม ไม่ว่าคุณจะเป็นมือใหม่หรือผู้ใช้ Elementor ที่มีประสบการณ์ คุณสามารถใช้เอฟเฟกต์นี้ได้อย่างง่ายดายและทำให้เว็บไซต์ของคุณมีรูปลักษณ์ใหม่และทันสมัย
วิธีการออกแบบ
หากคุณยังไม่ได้ใช้ คุณจะต้องใช้เครื่องมือสร้างธีมเพื่อสร้างเทมเพลตส่วนหัวแบบกำหนดเอง เริ่มต้นด้วยการใส่โลโก้ของคุณในวิดเจ็ตรูปภาพและวิดเจ็ตการนำทางในส่วนหัวสองคอลัมน์
แท็บขั้นสูง
แท็บขั้นสูงในส่วนการควบคุมจะถูกใช้สำหรับขั้นตอนต่อไปนี้
การตั้งค่าระยะขอบ
วิธีทั่วไปที่สุดในการสร้างส่วนหัวแบบโปร่งใสคือการกำหนดให้ส่วนมีระยะขอบติดลบเท่ากับความสูงของส่วนนั้น ปลดล็อกตัวควบคุมระยะขอบบนแท็บขั้นสูง และตั้งค่าด้านล่างเป็นค่าลบ (ตัวอย่าง: -125px) เพื่อย้ายส่วนที่อยู่ใต้ส่วนหัวไปที่ด้านบนของหน้า
สร้างเว็บไซต์ที่น่าทึ่ง
ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด
เริ่มเลยดัชนี Z
คุณจะต้องเพิ่มดัชนี Z ของส่วนเพื่อให้แน่ใจว่าจะอยู่ด้านบนสุดของเนื้อหาเสมอ คุณสามารถป้อนตัวเลขใดๆ ที่มากกว่าเนื้อหาที่เหลือบนเว็บไซต์ของคุณได้ แต่นักออกแบบจำนวนมากใช้ตัวเลข 1,000
การตั้งค่าเหนียว
เลือกตัวเลือก Sticky จากหีบเพลง Motion Effects และตั้งค่าเป็นด้านบน
การเพิ่มเอฟเฟกต์
ตอนนี้เราได้สร้างส่วนหัวโปร่งใสขั้นพื้นฐานแล้ว เราจะเพิ่มเอฟเฟกต์การเลื่อน
แท็บสไตล์
แท็บสไตล์ในการควบคุมส่วนจะถูกใช้สำหรับขั้นตอนต่อไปนี้
สีสุดท้าย
ตั้งค่าสีของพื้นหลังสุดท้ายหรือการไล่ระดับสีในตัวเลือกสี
เอฟเฟกต์การเลื่อน
สลับตัวเลือกเอฟเฟกต์การเลื่อนในแผงควบคุม
ตั้งค่า
ตอนนี้เราจำเป็นต้องปรับค่าในตัวเลื่อนวิวพอร์ตเพื่อให้ได้เอฟเฟกต์ตามที่ต้องการ เลื่อนไปยังตำแหน่งบนเพจที่คุณต้องการให้มีความทึบเต็มที่ และลดค่าบนสุดจนกว่าส่วนหัวของคุณจะทึบแสงอย่างสมบูรณ์ (ตัวอย่าง: 25%) ตอนนี้คุณสามารถเพิ่มมูลค่าของด้านล่างได้แล้ว ในตัวอย่างก่อนหน้านี้ เราต้องการให้เอฟเฟกต์เกิดขึ้นอย่างรวดเร็ว ดังนั้นเราจึงตั้งค่าให้ใกล้เคียงกันมาก (ตัวอย่าง: 22%) ซึ่งจะส่งผลให้เกิดเอฟเฟกต์ที่เกิดจากการเลื่อนหน้า 3%
ห่อ
โดยสรุป การเปลี่ยนสีส่วนหัวแบบติดหนึบบนแถบเลื่อนใน Elementor สามารถปรับปรุงความดึงดูดสายตาและประสบการณ์ผู้ใช้ของเว็บไซต์ของคุณได้ เป็นวิธีที่ง่ายและมีประสิทธิภาพในการทำให้เว็บไซต์ของคุณโดดเด่นและสร้างความประทับใจไม่รู้ลืมแก่ผู้เยี่ยมชมของคุณ อย่างไรก็ตาม โปรดทราบว่าคุณจะต้องปรับหรือเผื่ออุปกรณ์เคลื่อนที่และแท็บเล็ต เนื่องจากลักษณะการทำงานของส่วนหัวอาจแตกต่างกันไปตามขนาดหน้าจอที่แตกต่างกัน การค้นหาจุดที่น่าสนใจนั้นจะต้องมีการทดสอบและปรับแต่ง แต่ผลลัพธ์ที่ได้จะคุ้มค่ากับความพยายาม ดังนั้นลองใช้เทคนิคนี้เพื่อทำให้เว็บไซต์ของคุณมีรูปลักษณ์ใหม่และทันสมัย
