วิธีเพิ่มเอฟเฟกต์ฟิลเตอร์ฉากหลัง CSS ให้กับ Sticky Header ใน Divi

การเพิ่มเอฟเฟกต์ฟิลเตอร์ฉากหลัง CSS เป็นวิธีที่สนุกและไม่เหมือนใครในการเพิ่มการออกแบบเมนูส่วนหัวที่ติดหนึบ สิ่งที่ทำให้คุณสมบัติ CSS ของตัวกรองฉากหลังมีเอกลักษณ์เฉพาะคือช่วยให้คุณสามารถใช้เอฟเฟ็กต์ตัวกรองกับพื้นที่ด้านหลังองค์ประกอบได้ นี่เป็นตัวเลือกที่สมบูรณ์แบบสำหรับส่วนหัวที่ติดหนึบเพราะการออกแบบหน้าของคุณสามารถเปลี่ยนได้อย่างน่าอัศจรรย์หลังส่วนหัวในขณะที่เลื่อนลงมาที่หน้า คุณอาจเคยเห็นเอฟเฟกต์นี้กับเว็บไซต์ยอดนิยมอย่าง apple.com

ในบทช่วยสอนนี้ เราจะแสดงวิธีเพิ่มเอฟเฟกต์ฉากหลังตัวกรอง CSS ให้กับส่วนหัวที่ติดหนึบใน Divi ขั้นแรก เราจะอธิบายขั้นตอนง่ายๆ ในการเพิ่มเอฟเฟกต์ฉากหลัง-ฟิลเตอร์ให้กับส่วนหัวที่มีอยู่ซึ่งมี 3 ขั้นตอนง่ายๆ หลังจากนั้น เราจะแบ่งย่อยวิธีการสร้างส่วนหัวทั้งหมดตั้งแต่เริ่มต้น

มาเริ่มกันเลย!

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

สังเกตเอฟเฟกต์ฟิลเตอร์เบลอและความอิ่มตัวของสีที่ใช้กับองค์ประกอบด้านหลังส่วนหัวเมื่อคุณเลื่อน

สำหรับการสาธิตสดอย่างง่ายของเอฟเฟกต์ฟิลเตอร์ฉากหลังนี้ที่เพิ่มในส่วนหัว ให้ลองดู Codepen นี้

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

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

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

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

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

ดาวน์โหลด

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

วิธีอัปโหลดเทมเพลต

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

ในการอัปโหลดเทมเพลต ให้ไปที่ Divi Theme Builder ที่ส่วนหลังของเว็บไซต์ WordPress ของคุณ

อัปโหลดเทมเพลตเว็บไซต์เริ่มต้นทั่วโลก

จากนั้น ที่มุมบนขวา คุณจะเห็นไอคอนที่มีลูกศรสองอัน คลิกที่ไอคอน

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

บันทึกการเปลี่ยนแปลงตัวสร้างธีม Divi

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

ไปกวดวิชากันเถอะ

การเพิ่มเอฟเฟกต์ฟิลเตอร์ฉากหลัง CSS ให้กับส่วนหัวที่มีอยู่

วิธีที่ง่ายที่สุดในการสาธิตกระบวนการนี้คือการเพิ่มเอฟเฟกต์ฉากหลังตัวกรอง CSS ให้กับส่วนหัวที่มีอยู่ใน Divi จริงๆ แล้ว ทำได้เพียง 3 ขั้นตอนง่ายๆ เหล่านี้:

1. เพิ่มสีพื้นหลังกึ่งโปร่งใสให้กับส่วนหัว
2. เพิ่ม CSS แบบกำหนดเองของตัวกรองฉากหลังให้กับส่วนหัว
3. เพิ่มตำแหน่งติดหนึบในส่วนหัว

นี่คือวิธีการทำใน Divi

แก้ไขส่วนหัวในตัวสร้างธีม

ไปที่ Theme Builder และคลิกเพื่อแก้ไขเทมเพลตส่วนหัวที่มีอยู่

เพิ่มสีพื้นหลังกึ่งโปร่งใสให้กับ Section

เปิดการตั้งค่าในส่วนที่มีองค์ประกอบเมนูส่วนหัว จากนั้นเพิ่มสีพื้นหลังกึ่งโปร่งใสในส่วน ในตัวอย่างนี้ เราให้ส่วนสีพื้นหลังต่อไปนี้:

• สีพื้นหลัง: rgba(0,0,0,0.8)

เพิ่มตัวกรองฉากหลัง CSS ที่กำหนดเอง

ต่อไป เราสามารถเพิ่มเอฟเฟกต์ฉากหลังตัวกรอง (โดยใช้คุณสมบัติ CSS ตัวกรองฉากหลัง) ด้วยตัวอย่าง CSS ที่กำหนดเองในองค์ประกอบหลักของส่วน ใต้แท็บขั้นสูง ให้วาง CSS ต่อไปนี้ในองค์ประกอบหลัก:

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

เอฟเฟกต์ฟิลเตอร์เหล่านี้คล้ายกับเอฟเฟกต์ฟิลเตอร์ในตัวขององค์ประกอบ Divi ทั้งหมด ความแตกต่างหลัก ๆ คือ ฟิลเตอร์ฉากหลังจะเพิ่มเอฟเฟกต์ให้กับองค์ประกอบที่อยู่เบื้องหลัง ในขณะที่เอฟเฟกต์ฟิลเตอร์ในตัวของ Divi จะเพิ่มเอฟเฟกต์ให้กับองค์ประกอบนั้นเอง

เราใช้เอฟเฟกต์ฟิลเตอร์ 2 แบบ (อิ่มตัวและเบลอ) ซึ่งจะปรับใช้เอฟเฟกต์ฟิลเตอร์กับองค์ประกอบการออกแบบใดๆ ที่อยู่เบื้องหลังส่วนนี้

อย่าลังเลที่จะสำรวจการเพิ่มค่าฟังก์ชันตัวกรองอื่นๆ (หรือค่าเหล่านี้รวมกัน) เพื่อสร้างการออกแบบที่เป็นเอกลักษณ์ของคุณเอง มีประโยชน์มากที่สุด ได้แก่ :

• เบลอ()
• ความสว่าง()
• ตัดกัน()
• ระดับสีเทา ()
• หมุนสี ()
• พลิกกลับ ()
• ซีเปีย()
• อิ่มตัว ()

เพิ่มตำแหน่งติดหนึบให้กับส่วนหัว

สุดท้าย ตรวจสอบให้แน่ใจว่าได้กำหนดตำแหน่งที่ติดหนึบของส่วนหัว

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายบนหน้าสด สังเกตเอฟเฟกต์ฟิลเตอร์เบลอและความอิ่มตัวของสีที่ใช้กับองค์ประกอบด้านหลังส่วนหัวเมื่อคุณเลื่อน

การสร้างส่วนหัวด้วยเอฟเฟกต์ฟิลเตอร์ฉากหลัง CSS ตั้งแต่เริ่มต้น

หากคุณต้องการสร้างส่วนหัวทั้งหมดด้วยเอฟเฟกต์ฉากหลังของ CSS ตั้งแต่ต้น ให้ทำดังนี้

สร้าง Global Header ใน Theme Builder

ไปที่ Theme Builder แล้วคลิกเพื่อสร้าง Global Header ใหม่

การสร้างส่วนที่ติดหนึบด้วยเอฟเฟกต์ตัวกรองพื้นหลัง CSS

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

ใน Global Header Layout Editor ให้เพิ่มแถวหนึ่งคอลัมน์ในส่วน

เปิดการตั้งค่าของส่วน จากนั้นเพิ่มสีพื้นหลังกึ่งโปร่งใสต่อไปนี้ในส่วน:

• สีพื้นหลัง: rgba(0,0,0,0.8)

อัพเดทเบาะดังนี้ครับ

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

ต่อไป เราสามารถเพิ่มเอฟเฟกต์ฉากหลังตัวกรอง (โดยใช้คุณสมบัติ CSS ตัวกรองฉากหลัง) ด้วยตัวอย่าง CSS ที่กำหนดเองในองค์ประกอบหลักของส่วน ใต้แท็บขั้นสูง ให้วาง CSS ต่อไปนี้ในองค์ประกอบหลัก:

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

สุดท้าย ตรวจสอบให้แน่ใจว่าได้กำหนดตำแหน่งที่ติดหนึบของส่วนหัว

• ตำแหน่งติดหนึบ: Stick to Top

แก้ไขการตั้งค่าแถว

เมื่อเสร็จสิ้นส่วนนี้แล้ว ให้เปิดการตั้งค่าแถวและอัปเดตสิ่งต่อไปนี้:

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 95%
• ช่องว่างภายใน: บน 20px ด้านล่าง 20px

เพิ่มภาพโลโก้

หลังจากอัปเดตการตั้งค่าแถวแล้ว ให้เพิ่มโมดูลรูปภาพในแถว/คอลัมน์เพื่อสร้างโลโก้

อัปโหลดภาพโลโก้ไปยังโมดูลรูปภาพ

อัปเดตการตั้งค่าการออกแบบรูปภาพดังนี้:

• ความกว้าง: 50px
• ระยะขอบ: 0px ขวา

สร้างเมนู

ถัดไป เพิ่มโมดูลเมนูภายใต้โมดูลรูปภาพ

ใต้แท็บเนื้อหา ให้เลือกเมนูและกำหนดสีพื้นหลังโปร่งใสให้กับเมนู

• สีพื้นหลัง: rgba(0,0,0,0)

ภายใต้แท็บการออกแบบ ให้อัปเดตการตั้งค่าการออกแบบเมนูดังนี้:

• สไตล์: จัดชิดซ้าย
• สีของลิงค์ที่ใช้งาน: #fff
• แบบอักษรของเมนู: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของเมนู: กึ่งหนา
• สีข้อความของเมนู: #fff
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีพื้นหลังของเมนูแบบเลื่อนลง: #333
• สีของเมนูดรอปดาวน์: #fff
• สีข้อความของเมนูแบบเลื่อนลง: #fff
• เมนูแบบเลื่อนลง ลิงก์ที่ใช้งานอยู่: #fff
• พื้นหลังเมนูมือถือ: #333
• สีข้อความเมนูมือถือ: #fff
• ไอคอนรถเข็นช็อปปิ้งสี: #fff
• ค้นหาไอคอนสี: #fff
• ไอคอนเมนูแฮมเบอร์เกอร์สี: #fff
• ความกว้าง: 80% (เดสก์ท็อปและแท็บเล็ต)

สร้างปุ่มด้วยโมดูลข้อความ

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

อัพเดทเนื้อหาเกี่ยวกับงาน “ร้านค้า” จากนั้นให้โมดูลข้อความเป็นสีพื้นหลังสีขาว

• เนื้อความ: “ร้านค้า”
• สีพื้นหลัง: #fff

ภายใต้แท็บการออกแบบ ให้อัปเดตสิ่งต่อไปนี้:

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
• สีข้อความ: #333
• ความสูงของบรรทัดข้อความ: 2em
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• ความกว้าง: 50px
• มุมโค้งมน: 5px

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

ปรับแนวโมดูลในคอลัมน์ด้วยคุณสมบัติ CSS Flex

เมื่อเพิ่มโลโก้ เมนู และโมดูลข้อความลงในคอลัมน์แล้ว ให้เปิดการตั้งค่าคอลัมน์และวาง CSS ที่กำหนดเองต่อไปนี้ลงในองค์ประกอบหลัก:

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

บันทึกเค้าโครงส่วนหัวและเทมเพลต

เมื่อเสร็จแล้ว อย่าลืมบันทึกเลย์เอาต์และเทมเพลต

ผลสุดท้าย

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

รองรับเบราว์เซอร์

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

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!