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

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

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

ดูตัวอย่าง

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

ตัวอย่างหนึ่งผลลัพธ์

เดสก์ท็อปเวอร์ชันปกติ

โทรศัพท์รุ่นปกติ

เดสก์ท็อปเวอร์ชันสำรอง

โทรศัพท์รุ่นสำรอง

ตัวอย่างสองผลลัพธ์

เดสก์ท็อปเวอร์ชันปกติ

โทรศัพท์รุ่นปกติ

เดสก์ท็อปเวอร์ชันสำรอง

โทรศัพท์รุ่นสำรอง

ตัวอย่างสามผลลัพธ์

เดสก์ท็อปเวอร์ชันปกติ

โทรศัพท์รุ่นปกติ

เดสก์ท็อปเวอร์ชันสำรอง

โทรศัพท์รุ่นสำรอง

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

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

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

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

รูปแบบด้านล่างคือซิกแซกที่มีการตั้งค่าเริ่มต้น

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

พลิกแนวนอน

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

พลิกแนวตั้ง

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

หมุน

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

พลิกกลับ

ตัวอย่างนี้แสดงการกลับด้านสำหรับรูปแบบและรูปแบบ

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

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

อันนี้หมุนรูปแบบและพลิกมาสก์

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

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

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

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

สำหรับตัวอย่างของฉัน ฉันใช้เวอร์ชันที่แก้ไขของส่วนฮีโร่จากหน้า Landing Page ของการวางแผนอสังหาริมทรัพย์ที่มีอยู่ใน Divi นี่คือการดูที่ส่วนของฉัน การปรับเปลี่ยนทำให้ส่วนฮีโร่ง่ายขึ้นสำหรับความต้องการของเรา ใช้พื้นหลังสีพื้นหลัง: #92a5ab

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

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

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

รูปแบบพื้นหลัง

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

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

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

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

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

ตัวอย่างหนึ่งรูปแบบ

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

• การแปลงหน้ากาก: การพลิกแนวนอน การพลิกแนวตั้ง

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

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

รูปแบบพื้นหลัง

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

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

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

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

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

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

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

• การแปลงหน้ากาก: การพลิกแนวนอน, การพลิกกลับ

ตัวอย่างสองรูปแบบ

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

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

จากนั้นเลือกแท็บ Background Mask แล้วเลือก Horizontal Flipping, Rotating and Inverting for Mask Transform

• การเปลี่ยนรูปแบบหน้ากาก: การพลิกแนวนอน, การหมุน, การพลิกกลับ

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

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

• การแปลงหน้ากาก: การพลิกแนวนอน, การพลิกกลับ

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

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

รูปแบบพื้นหลัง

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

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

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

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

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

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

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

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

จากนั้นเลือกแท็บแท็บ เล็ต และเปลี่ยน Background Mask Transform เป็น Vertical Flipping and Rotating การจัดสไตล์สำหรับตัวอย่างที่สามของเราเสร็จสมบูรณ์ ต่อไป เราจะสร้างเวอร์ชันสำรอง

• การเปลี่ยนมาสก์พื้นหลัง: การพลิกแนวตั้ง, การหมุน

ตัวอย่างสามรูปแบบ

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

รูปแบบพื้นหลัง

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

• รูปแบบสี: rgba(0,0,0,0.11)
• การแปลงรูปแบบ: พลิกแนวนอน, พลิกแนวตั้ง, หมุน

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

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

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

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

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

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

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

• การเปลี่ยนรูปแบบพื้นหลัง: การพลิกแนวนอน, การพลิกแนวตั้ง, การหมุน, การพลิกกลับ

ผลลัพธ์

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

ตัวอย่างหนึ่งผลลัพธ์

เดสก์ท็อปเวอร์ชันปกติ

โทรศัพท์รุ่นปกติ

เดสก์ท็อปเวอร์ชันสำรอง

โทรศัพท์รุ่นสำรอง

ตัวอย่างสองผลลัพธ์

เดสก์ท็อปเวอร์ชันปกติ

โทรศัพท์รุ่นปกติ

เดสก์ท็อปเวอร์ชันสำรอง

โทรศัพท์รุ่นสำรอง

ตัวอย่างสามผลลัพธ์

เดสก์ท็อปเวอร์ชันปกติ

โทรศัพท์รุ่นปกติ

เดสก์ท็อปเวอร์ชันสำรอง

โทรศัพท์รุ่นสำรอง

จบความคิด

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

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