วิธีเพิ่มการซ้อนทับสีและการไล่ระดับสีให้กับ Divi Parallax & พื้นหลังวิดีโอ

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

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

เราเริ่มต้นกันเลย.

แอบมอง

มาดูสิ่งที่เราจะสร้างในบทช่วยสอนนี้

ฉันกำลังสร้างเลย์เอาต์ที่มีพื้นหลังพารัลแลกซ์ในส่วนหนึ่งและอีกส่วนหนึ่งเป็นพื้นหลังวิดีโอ พื้นหลังพารัลแลกซ์จะมีการไล่ระดับสีและพื้นหลังวิดีโอจะมีภาพซ้อนทับสีเดียว เราจะจัดรูปแบบตัวแบ่งส่วนด้วย ฉันใช้หน้า Landing Page จาก Pizzeria Layout Pack เพราะใช่แล้ว พิซซ่า นี่คือลักษณะที่ปรากฏบนเดสก์ท็อป

นี่คือลักษณะการออกแบบเดียวกันบนโทรศัพท์

มาตรฐาน Divi Parallax และพื้นหลังวิดีโอ

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

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

วิธีเพิ่มการซ้อนทับสีและการไล่ระดับสีให้กับ Divi Parallax & พื้นหลังวิดีโอ

เราจะเพิ่มการซ้อนทับสีและการไล่ระดับสีให้กับพื้นหลังพารัลแลกซ์และวิดีโอโดยใช้ปลั๊กอินของบริษัทอื่นที่เรียกว่า Divi Background Plus เราจะดูวิธีจัดรูปแบบตัวแบ่งส่วนโดยใช้ปลั๊กอินนี้

ติดตั้ง Divi Background Plus

Divi Background Plus มีอยู่ใน Divi Marketplace เรามาดูวิธีการเริ่มต้น ขั้นแรก ซื้อและดาวน์โหลด Divi Background Plus ลงในคอมพิวเตอร์ของคุณ

ในแดชบอร์ด WordPress ให้ไปที่ Plugins แล้วเลือก Add New คลิก อัปโหลดปลั๊กอิน ที่ด้านบนของหน้าจอ

เลือก เลือกไฟล์ นำทางไปยังไฟล์ซิปบนคอมพิวเตอร์ของคุณ เลือกไฟล์ แล้วคลิก ติดตั้ง ทันที

เมื่อไฟล์อัปโหลดแล้ว ให้คลิก เปิดใช้งานปลั๊กอิน ไม่จำเป็นต้องตั้งค่าอื่นใด ปลั๊กอินพร้อมใช้งานแล้ว

โมดูลใหม่ถูกเพิ่มลงใน Divi Builder ชื่อ Divi Background Plus เราจะใช้โมดูลนี้เพื่อสร้างการไล่ระดับสีและการวางซ้อนสีสำหรับพื้นหลังวิดีโอโฆษณาแบบพารัลแลกซ์ ปลั๊กอินนี้และพื้นหลังในส่วนต่าง ๆ ล้วนจำเป็นสำหรับบทช่วยสอนนี้

เพิ่มการซ้อนทับแบบไล่โทนสีให้กับ Divi Parallax Background

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

เปิดแท็บรูปภาพในการตั้งค่าเนื้อหา เปิด ใช้ งาน ใช้เอฟเฟกต์พารัลแลกซ์ ฉันใช้ True Parallax ซึ่งเป็นการตั้งค่าเริ่มต้น CSS Parallax ก็ใช้งานได้เช่นกัน

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

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

เลือกเพื่อเพิ่มโมดูลใหม่ในส่วนที่มีภาพพื้นหลังของคุณ และเลือก Divi Background Plus

ในการตั้งค่า เค้าโครง ในแท็บเนื้อหา ให้เลือกเพื่อใช้การตั้งค่ากับส่วน แถว หรือคอลัมน์ ฉันกำลังเลือก ส่วน

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

หากต้องการใช้เลย์เอาต์จากเลย์เอาต์ ให้คลิกขวาแล้วเลือก Paste Background Gradient Colors สิ่งนี้จะไม่เพียงแต่ใช้สีเท่านั้น แต่ยังรวมถึงการตั้งค่าสำหรับประเภทการไล่ระดับสี ทิศทาง ตำแหน่งเริ่มต้น ตำแหน่งสิ้นสุด และการวางการไล่ระดับสีเหนือภาพพื้นหลัง

นี่คือผลลัพธ์ ตอนนี้ฉันมีเวอร์ชันของต้นฉบับที่มีรูปภาพและโอเวอร์เลย์เหมือนกัน แต่ตอนนี้แสดงพื้นหลังเป็นพารัลแลกซ์จริง

รูปแบบเดียวกันบนโทรศัพท์มีลักษณะดังนี้

เพิ่มการซ้อนทับสีให้กับพื้นหลังวิดีโอ Divi

เพิ่มส่วนปกติใหม่ภายใต้ส่วนแรก เราจะเพิ่มวิดีโอพื้นหลังในส่วนนี้ โมดูล Divi Background Plus สำหรับโอเวอร์เลย์ และเพิ่มโมดูลข้อความเพื่อแสดงข้อความ ข้อมูลติดต่อ และ CTA ในโอเวอร์เลย์

ฉันวางแผนที่จะใช้ข้อความจากส่วนคำกระตุ้นการตัดสินใจ ทำได้ง่ายด้วยเครื่องมือ Divi's Layer ในการดำเนินการนี้ ให้คลิกขวาที่ส่วนที่คุณต้องการคัดลอกแล้วเลือก Go To Layer

คลิกขวาที่แถวที่คุณต้องการคัดลอกแล้วเลือก คัดลอกแถว

จากนั้นเลือกส่วนที่คุณต้องการวางแถว คลิกขวา แล้วเลือก วางแถว ฉันกำลังทำเช่นนี้สำหรับทั้งสองแถวที่ฉันต้องการคัดลอกจากส่วนนี้ อีกวิธีหนึ่ง ฉันสามารถคัดลอกส่วนนี้และเพิ่มโมดูล Divi Background Plus เข้าไปได้

ตอนนี้ฉันมีส่วนใหม่ที่มี Divi Background Plus โมดูลข้อความหลายโมดูล และ CTA

ถัดไป เพิ่มวิดีโอไปที่พื้นหลังของส่วน สีในวิดีโอใช้งานได้ดีกับสีในข้อความ แต่ฉันต้องการเพิ่มการซ้อนทับเพื่อให้ดูโดดเด่นขึ้นอีกเล็กน้อย สำหรับวิดีโอพื้นหลังของฉัน ฉันใช้วิดีโอฟรีของ Tima Miroshnichenko's Mixed Toppings Over a Pizza จาก Pexels

เปิดการตั้งค่า Divi Background Plus แล้วเลือก ส่วน สำหรับเลย์เอาต์

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

• rgba(150,0,0,0.15)

นี่คือลักษณะที่วิดีโอพื้นหลังที่มีการซ้อนทับสีแดงของฉันปรากฏบนเดสก์ท็อป

นี่คือเค้าโครงเดียวกันบนโทรศัพท์

สำหรับตัวอย่างเพิ่มเติม ต่อไปนี้คือพื้นหลังสีม่วงมาตรฐานที่มีความทึบ 30%

นี่คือสีส้มมาตรฐานที่มีความทึบ 80%

จัดรูปแบบตัวแบ่งส่วน

โอเวอร์เลย์ยังใช้งานได้กับตัวแบ่งส่วน หากต้องการเพิ่มตัวแบ่งส่วน ให้เปิดการตั้งค่าของส่วน

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

เลือกรูปแบบตัวแบ่งที่คุณต้องการ ฉันกำลังเลือกรูปแบบที่ห้า ซึ่งสร้างมุมที่มีสองสี

เลือกไอคอนแก้ไขเพื่อเพิ่มสีที่กำหนดเอง นี่คือสีที่ปรากฏในส่วนที่ตัวแบ่งไม่แสดง สีเริ่มต้นคือสีขาว ดังที่คุณเห็นในตัวอย่างก่อนหน้านี้ เพิ่มสีเป็นรหัสฐานสิบหกหรือเลือกสีจากตัวเลือกสี ฉันกำลังเพิ่มสี #0d0d0d ซึ่งเป็นหนึ่งในสีในส่วนด้านล่างของวิดีโอ

• สี #0d0d0d

ตอนนี้วิดีโอมีตัวแบ่งสไตล์ที่ด้านล่างของส่วนนั้น คุณสามารถดูวิดีโอที่แสดงผ่านส่วนที่โปร่งใสของตัวแบ่ง และเข้ากันได้ดีกับทั้งสองส่วน

ผลลัพธ์

มาดูกันว่าเลย์เอาต์มีลักษณะอย่างไรบนเดสก์ท็อปและมือถือ

มาดูเวอร์ชั่นเดสก์ท็อปกัน มันมีพื้นหลังพารัลแลกซ์ที่แท้จริงพร้อมการไล่ระดับสีซ้อนทับในส่วนแรก ส่วนที่สองประกอบด้วยภาพพื้นหลังที่มีการซ้อนทับสีและตัวแบ่งส่วนที่แยกจากส่วนถัดไป

นี่คือลักษณะการจัดวางบนโทรศัพท์ องค์ประกอบทั้งหมดทำงานได้ดีบนอุปกรณ์พกพา

จบความคิด

นั่นคือวิธีเพิ่มการซ้อนทับสีและการไล่ระดับสีให้กับ Divi Parallax และพื้นหลังวิดีโอ Divi Background Plus ทำให้ง่ายต่อการสร้างและใช้งาน ใช้งานได้กับส่วน แถว และคอลัมน์ และง่ายต่อการเลือกระหว่างส่วนเหล่านี้ การปรับแต่งทั้งหมดเป็นเครื่องมือและการตั้งค่ามาตรฐานของ Divi ดังนั้นจึงคุ้นเคย

ตอนนี้พื้นหลังของคุณสามารถใส่สีและการไล่ระดับสีโดยไม่ต้องปิดการใช้งานพารัลแลกซ์และวิดีโอ!

เราต้องการได้ยินจากคุณ คุณได้สร้างการซ้อนทับสีและการไล่ระดับสีสำหรับรูปภาพและวิดีโอพารัลแลกซ์ด้วย Divi Background Plus หรือไม่? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็น

ภาพเด่นผ่าน Lauritta / shutterstock.com