วิธีสร้างพื้นหลังภาพพารัลแลกซ์ด้วยการไล่ระดับสีแบบผสมใน Divi

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

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

แอบมอง

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

อันแรกนี้มีภาพซ้อนทับแบบไล่ระดับสีด้วยโหมดการผสมสีที่ใช้กับภาพพื้นหลังโดยใช้วิธี True Parallax

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

และนี่คือตัวอย่างของการซ้อนทับแบบไล่ระดับสีโดยใช้สต็อปสีกึ่งโปร่งใสโดยไม่มีโหมดผสมผสาน

แนวคิด

แนวคิดพื้นฐานของการออกแบบนี้ประกอบด้วยสองขั้นตอน:

1. สร้างการไล่ระดับสีพื้นหลังสำหรับส่วนโดยใช้ตัวสร้างการไล่ระดับสี ตรวจสอบให้แน่ใจว่าได้วางการไล่ระดับสีไว้เหนือภาพพื้นหลัง

2. เพิ่มภาพพื้นหลังในส่วนเดียวกันกับที่ใช้หนึ่งในวิธีพารัลแลกซ์และโหมดการผสมสี

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

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ทำดังต่อไปนี้:

1. ไปที่ห้องสมุด Divi
2. คลิกปุ่มนำเข้าที่ด้านบนของหน้า
3. ในป๊อปอัปการพกพา ให้เลือกแท็บการนำเข้า
4. เลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ (อย่าลืมแตกไฟล์ก่อนแล้วจึงใช้ไฟล์ JSON)
5. จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

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

สิ่งที่คุณต้องการเพื่อเริ่มต้น

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"
4. ตอนนี้มีผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi!

วิธีสร้างพื้นหลังภาพพารัลแลกซ์ด้วยการไล่ระดับสีแบบผสมใน Divi

1. สร้างแถวกรอกข้อมูลและข้อความหัวเรื่อง

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

ในการเริ่มต้นสิ่งต่าง ๆ ให้เพิ่มแถวหนึ่งคอลัมน์ไปยังส่วนที่มีอยู่ในตัวสร้าง

ถัดไป เพิ่มโมดูลข้อความในแถว/คอลัมน์

การตั้งค่าข้อความ

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

<h2>Say Hello to Divi</h2>

ใต้แท็บออกแบบ อัปเดตตัวเลือกส่วนหัวและความกว้างสูงสุดดังนี้:

• หัวข้อที่ 2 แบบอักษร: Inter
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 2 สีข้อความ: #fff
• หัวเรื่อง 2 ขนาดข้อความ: 8vw
• ส่วนหัว 2 ความสูงของบรรทัด: 1.2em
• หัวเรื่อง 2 ข้อความเงา: ดูภาพหน้าจอ
• หัวเรื่อง 2 ความชัดเจนของเงาข้อความ: 0.28em
• หัวเรื่อง 2 สีเงาข้อความ: #10076d

• ความกว้างสูงสุด: 50%

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

เมื่อหัวเรื่องเข้าที่แล้ว เรามาอัปเดตขนาดแถวและระยะห่างกันเพื่อให้ตอบสนองได้ดีขึ้น

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

• ความกว้าง: 100%
• ความกว้างสูงสุด: 80vw

• Padding: บน 15vw, 15vw ด้านล่าง

2. ออกแบบพื้นหลังไล่ระดับสำหรับ Section

เมื่อการกรอกเนื้อหาเสร็จสมบูรณ์แล้ว เราก็พร้อมที่จะเริ่มออกแบบพื้นหลังการไล่ระดับส่วนของเรา

การตั้งค่าไล่ระดับพื้นหลัง

เปิดการตั้งค่าสำหรับส่วน ภายใต้แท็บเนื้อหา ให้เลือกแท็บการไล่ระดับสีภายใต้ตัวเลือกพื้นหลังและอัปเดตตัวเลือกการไล่ระดับสีดังนี้:

• Gradient Stop 1: #0094ff (ที่ 0%)
• Gradient Stop 2: #ff00c7 (ที่ 25%)
• Gradient Stop 3: #0094ff (ที่ 50%)
• Gradient Stop 4: #ff00c7 (ที่ 75%)
• Gradient Stop 5: #0094ff (ที่ 100%)

• ประเภทการไล่ระดับสี: วงกลม
• ตำแหน่งไล่ระดับ: ล่างซ้าย
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

3. เพิ่มภาพพื้นหลังพารัลแลกซ์ด้วยโหมดการผสมสี

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

การตั้งค่าภาพพื้นหลัง

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

• ใช้เอฟเฟกต์พารัลแลกซ์: ใช่
• วิธีพารัลแลกซ์: ทรูพารัลแลกซ์
• การผสมผสานภาพพื้นหลัง: สี

ทำไมต้องเป็นโหมดผสมผสานสี?

โหมดการผสมสีจะผสมผสานภาพในเวอร์ชันระดับสีเทาเข้ากับสี (เฉดสีและความอิ่มตัวของสี) ของการไล่ระดับสี ซึ่งจะรักษาคุณภาพของภาพด้วยโทนสีใหม่ทั้งหมด

4. เพิ่มมาสก์พื้นหลัง (ทำไมไม่?)

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

การตั้งค่ามาสก์พื้นหลัง

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

• หน้ากาก: ใบมีด
• การแปลงรูปแบบ: พลิกแนวนอน, พลิกกลับ
• ขนาดหน้ากาก: ขนาดที่กำหนดเอง
• ความกว้างของหน้ากาก: 72vw
• ตำแหน่งหน้ากาก: ขวาบน

5. เพิ่มพื้นที่เลื่อนชั่วคราวสำหรับการทดสอบ

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

• ขอบ: 80vh บน 80vh ล่าง

อย่าลืมลบระยะห่างนี้เมื่อเพิ่มส่วนในหน้าของคุณเอง

ผลลัพธ์สุดท้าย

มาดูผลสุดท้ายกันบนหน้าสดกัน

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

การใช้การไล่ระดับสีแบบไล่ระดับโดยไม่มี Blend Mode

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

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

ในการทำเช่นนี้ คุณสามารถลดความทึบของแต่ละสีลงเหลือ 72% แล้วตั้งค่าตัวเลือกการผสมภาพพื้นหลังกลับเป็น Normal

นี่คือตัวอย่างของสิ่งที่จะมีลักษณะเช่นนี้

ลองไล่สีเพิ่มเติม!

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

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

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

หวังว่านี่จะเป็นประโยชน์สำหรับเว็บไซต์ของคุณเองหรือโครงการต่อไปของคุณ

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

ไชโย!