วิธีรวมมาสก์พื้นหลังกับตัวแบ่งส่วนใน Divi

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

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

สนุก!

แอบมอง

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

แนวคิด

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

ขั้นแรก เราเพิ่มมาสก์พื้นหลัง

จากนั้นเราเพิ่มตัวแบ่งส่วนเพื่อเสริมรูปร่างมาสก์อย่างสร้างสรรค์

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

หากต้องการใช้การออกแบบจากบทช่วยสอนนี้ คุณจะต้องดาวน์โหลดโดยใช้ปุ่มด้านล่างก่อน เพื่อที่จะเพิ่ม
การเข้าถึงการดาวน์โหลดคุณจะต้องสมัครรับรายชื่ออีเมล 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. เพิ่มขนาดและระยะห่างของส่วน

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

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

• ความสูงขั้นต่ำ: 50vw
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

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

2. สร้างการไล่ระดับสีพื้นหลัง

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

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

• หยุดสี 1: #1a2a6c (ที่ 20%)
• หยุดสี 2: #b21f1f (ที่ 60%)
• หยุดสี 2: #fdbb2d (ที่ 100%)

3. สร้างมาสก์พื้นหลัง

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

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

• หน้ากาก: บั้ง
• หน้ากากสี: #000
• การแปลงหน้ากาก: กลับด้าน
• อัตราส่วนภาพของหน้ากาก: ดูภาพหน้าจอ

4. เพิ่มตัวแบ่งพื้นหลังส่วน

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

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

ขั้นแรก เพิ่มตัวแบ่งด้านบนใต้แท็บด้านบน

• รูปแบบตัวแบ่ง: ดูภาพหน้าจอ
• ตัวแบ่งสี: #000
• ความสูงของตัวแบ่ง: 10vw

ถัดไป เพิ่มตัวแบ่งด้านล่างใต้แท็บด้านล่าง

• รูปแบบตัวแบ่ง: ดูภาพหน้าจอ
• ตัวแบ่งสี: #000
• ความสูงของตัวแบ่ง: 10vw
• พลิกตัวแบ่ง: พลิกแนวตั้ง

ผลลัพธ์

นี่คือผลลัพธ์จนถึงตอนนี้

ปรับแต่งตัวเลือกพื้นหลังและตัวแบ่งสำหรับการออกแบบเพิ่มเติม

เมื่อคุณมีแนวคิดพื้นฐานแล้ว เราสามารถลองใช้ตัวแบ่งส่วนตัวเลือกพื้นหลังเพื่อสร้างการออกแบบเพิ่มเติมได้อย่างง่ายดาย

การออกแบบทางเลือก #1

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

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

• Mask Transform: พลิกแนวตั้ง, หมุน
• อัตราส่วนภาพของหน้ากาก: ดูภาพหน้าจอ

ถัดไป ปรับปรุงตัวแบ่งส่วนดังนี้:

ตัวแบ่งด้านบน

• รูปแบบตัวแบ่ง: ดูภาพหน้าจอ
• ความสูงของตัวแบ่ง: 13vw

ตัวแบ่งด้านล่าง

• รูปแบบตัวแบ่ง: ดูภาพหน้าจอ
• ความสูงของตัวแบ่ง: 13vw
• Divider Flip: ปิดการใช้งาน

ผลลัพธ์

นี่คือผลลัพธ์

การออกแบบทางเลือก #2

สำหรับการออกแบบทางเลือกที่สองและขั้นสุดท้าย เราจะแทนที่ Chevrons Mask ด้วย Diagonal Bars 2 Mask และยังให้ตัวแบ่งส่วนบนแบบใหม่เพื่อเพิ่มเอฟเฟกต์ swooshing ที่ละเอียดอ่อนให้กับการออกแบบ

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

• หน้ากาก: เส้นทแยงมุม 2
• การแปลงหน้ากาก: พลิกแนวนอน
• อัตราส่วนภาพของหน้ากาก: ดูภาพหน้าจอ

ถัดไป ปรับปรุงตัวแบ่งส่วนดังนี้:

ตัวแบ่งด้านบน

• รูปแบบตัวแบ่ง: ดูภาพหน้าจอ
• พลิกตัวแบ่ง: พลิกแนวนอน

ตัวแบ่งด้านล่าง

• รูปแบบตัวแบ่ง: ไม่มี

ผลลัพธ์

นี่คือผลลัพธ์

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

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

ตรวจสอบพวกเขาออก!

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

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

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

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

ไชโย!