Divi: วิธีสร้างการเปลี่ยนพื้นหลังระหว่างองค์ประกอบ

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

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

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

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

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

ขอเริ่มต้น

การสำรวจ

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

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

สร้างหน้าใหม่ด้วย Divi Builder

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

จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่

ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder

จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)

หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้างการเปลี่ยนแปลงอย่างราบรื่นในพื้นหลังระหว่างส่วน Divi และบรรทัด

การสร้างส่วนหัวเป็นเนื้อหาตัวแทน

อ่าน: Divi: วิธีสร้างแท็บด้วยเอฟเฟกต์โฮเวอร์จากเส้น

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

จากนั้นเพิ่มโมดูลข้อความลงในบรรทัด

เพิ่มข้อความขนาด H1

ภายใต้แท็บ ออกแบบให้อัปเดตการออกแบบข้อความส่วนหัวตามต้องการ

• แบบอักษร: Roboto Condensed
• น้ำหนักแบบอักษร: ตัวหนา
• สไตล์: TT
• การจัดตำแหน่งข้อความ: กึ่งกลาง
• สีข้อความ: #000000
• ขนาดข้อความหัวเรื่อง: 4vw
• ระยะห่างระหว่างตัวอักษร: 0.1em
• ความสูงของสาย: 1.3em

การออกแบบพื้นหลังส่วน

เพิ่มช่องว่างภายในส่วน

เมื่อส่วนหัวปลอมเข้าที่แล้ว ให้เปิดการตั้งค่าส่วนและอัปเดตระยะห่างดังนี้:

• Padding (บนและล่าง): 15vw

เพิ่มการไล่ระดับสีพื้นหลังให้กับส่วน

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

• ไล่ระดับหยุด:
  • 0%: #4f0f75 (ที่ 0%)
  • 25%: #2843c9 (ที่ 25%)
  • 50%: #4ae2e0 (ที่ 50%)
  • 75%: #3881ff (ที่ 75%)
  • 100%: #4f0f75 (ที่ 100%)

การเพิ่มรูปแบบพื้นหลังให้กับส่วน

ภายใต้แท็บ รูปแบบพื้นหลัง, ปรับปรุงสิ่งต่อไปนี้:

• รูปแบบ: เส้นทแยงมุม
• รูปแบบสี: rgba(79,15,117,0.23)
• แปลงร่าง: หมุน
• ขนาดรูปแบบ: ขนาดที่กำหนดเอง
• ความกว้าง: 7vw
• ส่วนสูง: 5vw
• รูปแบบการทำซ้ำแหล่งกำเนิด: Center

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

การเพิ่มมาสก์พื้นหลังให้กับส่วน

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

• มาสก์พื้นหลัง: Layer Blob
• หน้ากากสี: rgba(0,0,0,0.7)
• ความกว้างของหน้ากาก: 100vw
• ตำแหน่ง: Center

หมายเหตุ: เช่นเดียวกับรูปแบบ เราจำเป็นต้องปรับขนาดหน้ากากโดยใช้หน่วยความยาว VW เราต้องให้หน้ากากเป็นศูนย์กลางด้วย

การออกแบบพื้นหลังเส้น

คัดลอกและวางพื้นหลังส่วนไปที่พื้นหลังแถว

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

จากนั้นวางพื้นหลังบนบรรทัดที่มีอยู่

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

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

ปรับขนาดแถวและช่องว่างภายในโดยใช้VW

ต่อไป เราต้องกำหนดความกว้างที่กำหนดเองให้กับแถวของเราโดยใช้หน่วยความยาว VW อัปเดตสิ่งต่อไปนี้:

• ความกว้าง: 75vw
• ความกว้างสูงสุด: 75vw

• Padding (บน ล่าง ซ้ายและขวา): 10vw

ปรับการหยุดการไล่ระดับสีบนเส้น

ต่อไป เราจำเป็นต้องปรับการหยุดการไล่ระดับสีบนพื้นหลังของเส้นเพื่อให้การเปลี่ยนไปใช้การไล่ระดับสีพื้นหลังของส่วนได้อย่างราบรื่น

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

จากนั้นตั้งค่าจุดแรกเป็น 0% และจุดที่สามเป็น 100% เมื่อเสร็จแล้วคุณควรมีการไล่ระดับสีต่อไปนี้

• ไล่ระดับหยุด
  • 0%: #2843c9
  • 50%: #4ae2e0
  • 100%: #3881ff

ใส่เงากล่องให้ไลน์

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

• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้ง: 0px
• Box Shadow Blur ความแรง: 4vw
• เงาสี: rgba(0,0,0,0.5)

ปรับสีลวดลายพื้นหลังเส้น

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

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

• รูปแบบสี: rgba(255,255,255,0.23)

ปรับสีมาสก์พื้นหลังของเส้น

นอกจากนี้เรายังสามารถอัปเดตสีมาสก์สำหรับเส้นเพื่อให้การออกแบบดูโดดเด่น

ภายใต้แท็บ หน้ากากพื้นหลัง, ปรับปรุงสิ่งต่อไปนี้:

• หน้ากากสี: #ffffff
• Mask Transform: กลับด้าน

ผลสุดท้าย

เรามาดูผลสุดท้ายกัน

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

ความเป็นไปได้มากขึ้น

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

ดูสิ่งนี้ด้วย: Divi: วิธีใช้ "Gradient Builder" เพื่อตกแต่งภาพของคุณ

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

สรุป

กุญแจสำคัญในการสร้างการเปลี่ยนการออกแบบพื้นหลังที่ไร้รอยต่อใน Divi คือการใช้หน่วยความยาว VW เหล่านี้อย่างชาญฉลาด

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

หวังว่าเทคนิคนี้จะช่วยเพิ่มทักษะการออกแบบที่มีประโยชน์สำหรับโครงการในอนาคต

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

ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ

อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.

แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.

...