Divi: ใช้การตั้งค่ามาสก์พื้นหลังและตัวเลือกการแปลงรูปแบบ

คุณต้องการที่จะรวมการตั้งค่ามาสก์พื้นหลังและตัวเลือกการแปลงรูปแบบ Divi เพื่อสร้างพื้นหลังที่ไม่เหมือนใคร?

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

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

ขอเริ่มต้น

การสำรวจ

อันดับแรก ต่อไปนี้คือการแสดงตัวอย่างของแต่ละตัวอย่างบนหน้าจอขนาดต่างๆ (โทรศัพท์และเดสก์ท็อป)

อ่าน: Divi: วิธีใช้เอฟเฟกต์เงาและโฮเวอร์เพื่อสร้างเนื้อหาแบบโต้ตอบ

ตัวอย่าง 1

เวอร์ชัน 1 บนเดสก์ท็อป

เวอร์ชัน 1 บนโทรศัพท์

ดาวน์โหลด DIVI ทันที!!!

เวอร์ชัน 2 บนเดสก์ท็อป

เวอร์ชัน 2 บนโทรศัพท์

ตัวอย่าง 2

เวอร์ชัน 1 บนเดสก์ท็อป

เวอร์ชัน 1 บนโทรศัพท์

ดาวน์โหลด DIVI ทันที!!!

เวอร์ชัน 2 บนเดสก์ท็อป

เวอร์ชัน 2 บนโทรศัพท์

ตัวอย่าง 3

เวอร์ชัน 1 บนเดสก์ท็อป

เวอร์ชัน 1 บนโทรศัพท์

ดาวน์โหลด DIVI ทันที!!!

เวอร์ชัน 2 บนเดสก์ท็อป

เวอร์ชัน 2 บนโทรศัพท์

ตัวเลือกมาสก์พื้นหลัง Divi และรูปแบบการแปลงรูปแบบ

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

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

การตั้งค่ารูปแบบการเปลี่ยนรูปแบบและรูปแบบ Divi ของ Divi ทำงานอย่างไร

รูปแบบด้านล่างคือ Zig Zag พร้อมการตั้งค่าเริ่มต้น

ตัวเลือกมาสก์พื้นหลัง Divi และรูปแบบการแปลงรูปแบบ

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

พลิกแนวนอน

เป็นการกลับตัวในแนวนอน เราใช้การตั้งค่าการแปลงกับทั้งรูปแบบและมาสก์

พลิกแนวตั้ง

นี่คือการพลิกแนวตั้งสำหรับลวดลายและมาสก์

การหมุน

อันนี้แสดงการหมุนสำหรับรูปแบบและมาสก์

ย้อนกลับ

ตัวอย่างนี้แสดง Invert for pattern และ mask

มาสก์พื้นหลังและรูปแบบการแปลงรูปแบบผสม

แน่นอน เรายังสามารถใช้พารามิเตอร์การแปลงในชุดค่าผสมต่างๆ ได้ นี่คือตัวอย่างบางส่วน.

วิธีนี้จะหมุนรูปแบบและพลิกมาสก์

ตัวอย่างนี้ใช้การพลิกแนวตั้ง การหมุน และการผกผันในแนวตั้งสำหรับรูปแบบพื้นหลัง มาสก์พื้นหลังใช้การพลิกแนวนอน การพลิกแนวตั้ง และการหมุน

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

ตัวอย่างของพื้นหลังมาสก์และการตั้งค่าการแปลงรูปแบบ

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

สำหรับตัวอย่างของเรา เรากำลังใช้เวอร์ชันที่แก้ไขของส่วนฮีโร่ของหน้า Landing Page ของเลย์เอาต์ การวางแผนอสังหาริมทรัพย์ มีอยู่ใน Divi

นี่คือภาพรวมของส่วนที่เป็นปัญหา ใช้สีพื้นหลัง: #92a5ab

พื้นหลัง: #92a5ab

ตัวอย่างของพื้นหลังมาสก์และการตั้งค่าการแปลงรูปแบบ

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

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

ลวดลายพื้นหลัง

เปิดการตั้งค่าส่วน เลื่อนลงไปที่ พื้นหลัง แล้วเลือกแท็บ รูปแบบพื้นหลัง เลือก Tufted สำหรับรูปแบบพื้นหลังและ Inverting สำหรับ Pattern Transform

รูปแบบพื้นหลัง: กระจุก
การแปลงรูปแบบ: ย้อนกลับ

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

หน้ากากพื้นหลัง

เลือกแท็บ หน้ากากพื้นหลัง และเลือก โค้ง สำหรับมาสก์พื้นหลัง เปลี่ยนสีมาสก์เป็น #616d72 และตั้งค่าการแปลงมาสก์เป็น Invert นี่เป็นการเติมเต็มคันธนูรุ่นแรกของเราที่มีกระจุก

มาสก์พื้นหลัง: Arch
หน้ากากสี: #616d72
การแปลงหน้ากาก: กลับด้าน

ตัวอย่างที่ 1 เวอร์ชัน 2

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

Mask Transform: พลิกแนวนอน พลิกแนวตั้ง

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

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

ลวดลายพื้นหลัง

ในการตั้งค่าพื้นหลัง เลือกแท็บ รูปแบบพื้นหลัง และเลือก Shippo สำหรับแรงจูงใจ ตั้งค่ารูปแบบการแปลงเป็น Invert

รูปแบบพื้นหลัง: Shippo
การแปลงรูปแบบ: ย้อนกลับ

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

หน้ากากพื้นหลัง

จากนั้นเลือกแท็บ หน้ากากพื้นหลัง และเปลี่ยนการตั้งค่าต่อไปนี้

มาสก์พื้นหลัง: วงรี
สี: #758489
Mask Transform: พลิกแนวนอน, หมุน

แท็บเล็ตและโทรศัพท์

ทั้งแท็บเล็ตและโทรศัพท์จะใช้การตั้งค่าเดียวกัน ดังนั้นเราจะต้องเปลี่ยนการตั้งค่าแท็บเล็ตเท่านั้น เลือก แท็บแท็บเล็ต และแก้ไข การแปลงหน้ากาก ในการกลับตัวในแนวนอน

Mask Transform: พลิกแนวนอน, ผกผัน

ตัวอย่างที่ 2 เวอร์ชัน 2

ต่อไป เราจะสร้างรูปแบบสำหรับตัวอย่างที่สองของเรา ขั้นแรก เลือกแท็บ รูปแบบพื้นหลัง และตั้งค่า Pattern Color เป็น rgba(0,0,0,0.06)

รูปแบบสี: rgba(0,0,0,0.06)

จากนั้นเลือกแท็บ หน้ากากพื้นหลัง และเลือกพลิกแนวนอน หมุน และพลิกกลับสำหรับการแปลงมาสก์

Mask Transform: พลิกแนวนอน, หมุน, ผกผัน

แท็บเล็ตและโทรศัพท์

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

Mask Transform: พลิกแนวนอน, ผกผัน

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

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

ลวดลายพื้นหลัง

ขั้นแรก เลือกแท็บการตั้งค่าอุปกรณ์และเลือกไอคอนอุปกรณ์ สำนัก. เลือกแท็บ รูปแบบพื้นหลัง และเลือกรังผึ้งสำหรับรูปแบบพื้นหลัง เปลี่ยนสีเป็น rgba(0,0,0,0.42) สำหรับอันนี้เราจะปล่อยให้ตัวเลือก การแปลงรูปแบบ ปิดการใช้งาน เราจะเพิ่มพวกเขาสำหรับรุ่นอื่น

รูปแบบพื้นหลัง: รังผึ้ง
รูปแบบสี: rgba(0,0,0,0.42)
การแปลงรูปแบบ: none

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

หน้ากากพื้นหลัง

จากนั้นเลือกแท็บ พื้นหลังหน้ากาก เลือก สี สำหรับมาสก์พื้นหลัง เปลี่ยนสีเป็น #697b82 เลือก Flip Vertical สำหรับการแปลงมาสก์

มาสก์พื้นหลัง: เพ้นท์
หน้ากากสี: #697b82
Mask Transform: พลิกแนวตั้ง

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

ขนาดหน้ากาก: ปก
ตำแหน่งหน้ากาก: ล่างขวา

แท็บเล็ตและโทรศัพท์

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

Mask Transform: พลิกแนวตั้ง, หมุน

ตัวอย่างที่ 3 เวอร์ชัน 2

สำหรับตัวอย่างเวอร์ชันอื่น เราจะปรับทั้งรูปแบบพื้นหลังและมาสก์พื้นหลัง

ลวดลายพื้นหลัง

สำหรับรูปแบบพื้นหลัง เปลี่ยนสีลวดลายเป็น rgba(0,0,0,0.11) เปลี่ยนการแปลงรูปแบบเพื่อพลิกแนวนอน พลิกแนวตั้ง และหมุน

หน้ากากสี: rgba(0,0,0,0.11)
Mask Transform: พลิกแนวนอน พลิกแนวตั้ง หมุน

หน้ากากพื้นหลัง

จากนั้นเลือก tab พื้นหลังหน้ากาก เปลี่ยนสีเป็นสีขาวและเปลี่ยนมาสก์เป็นแบบพลิกแนวนอน พลิกแนวตั้ง และกลับด้าน

หน้ากากสี: #ffffff
การแปลงหน้ากาก: พลิกแนวนอน พลิกแนวตั้ง ผกผัน

ถัดไป เปลี่ยนขนาดของมาสก์เพื่อปกปิด จากนั้นเลือก Center สำหรับตำแหน่งของมาสก์

ขนาดหน้ากาก: ปก
ตำแหน่งหน้ากาก: ตรงกลาง

แท็บเล็ตและโทรศัพท์

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

Mask Transform: พลิกแนวนอน, พลิกแนวตั้ง, หมุน, ผกผัน