คุณต้องการใช้มาสก์และรูปแบบสำหรับส่วนฮีโร่ของคุณใน Divi ?

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

วันนี้เราจะมาแนะนำวิธีการใช้ Divi และมาสก์และรูปแบบพื้นหลังใหม่เพื่อออกแบบส่วนฮีโร่ 

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

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

การสำรวจ

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

อ่าน: Divi: วิธีสร้างตารางรูปภาพที่ตอบสนองด้วยลิงก์และเอฟเฟกต์โฮเวอร์

ตัวอย่างส่วนของ Hero ที่มีหน้ากากสีขาวและลวดลาย

ใช้มาสก์และรูปแบบสำหรับส่วนฮีโร่ของคุณใน Divi

นี่คือเวอร์ชันมืดของส่วนฮีโร่เดียวกันกับหน้ากากสีดำและรูปแบบ

ใช้มาสก์และรูปแบบสำหรับส่วนฮีโร่ของคุณใน Divi

ด้วยการออกแบบนี้ คุณสามารถเปลี่ยนมาสก์และตำแหน่งมาสก์ได้อย่างง่ายดายด้วยการคลิกเพียงไม่กี่ครั้ง!

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

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

เส้น Divi แปลงเป็นแท็บ

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

#image_title

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

เส้น Divi แปลงเป็นแท็บ

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

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

1. สร้างโครงสร้างเค้าโครง

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

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

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

2. เพิ่มชื่อและคำกระตุ้นการตัดสินใจ

ในคอลัมน์ด้านซ้าย (คอลัมน์ 1) เพิ่มโมดูลข้อความสำหรับชื่อหลักของคุณ โมดูลข้อความสำหรับข้อความคำบรรยาย และโมดูลปุ่มสำหรับปุ่มของคุณ

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

3. เพิ่มระยะห่างแนวตั้งให้กับส่วน

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

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

  • การขยายความ:
    • เดสก์ท็อป: บน 20vw ล่าง 20vw
    • แท็บเล็ต: บน 8vw ล่าง 48vw
    • โทรศัพท์: บน 8vw ล่าง 70vw
มาสก์และรูปแบบพื้นหลังส่วนฮีโร่ Divi

4. เพิ่มภาพพื้นหลังและการไล่ระดับสี

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

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

ภายใต้แท็บ ภาพพื้นหลังอัปโหลดรูปภาพในพื้นหลังของส่วน

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

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

  • ไล่ระดับหยุด:
    • 0%: #3e22ff
    • 100%: ชัดเจน
  • สี่เหลี่ยมไล่ระดับสีเหนือภาพพื้นหลัง : ใช่
มาสก์และรูปแบบพื้นหลังส่วนฮีโร่ Divi

5. สร้างรูปแบบพื้นหลังสำหรับส่วน

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

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

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

  • รูปแบบพื้นหลัง: กระจุก
มาสก์และรูปแบบพื้นหลังส่วนฮีโร่ Divi

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

6. สร้างมาสก์พื้นหลังสำหรับส่วน

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

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

  • หน้ากาก: รังผึ้ง
  • หน้ากากสี: #ffffff
  • ขนาด: ปก
มาสก์และรูปแบบพื้นหลังส่วนฮีโร่ Divi

7. ปรับตำแหน่งภาพพื้นหลัง

เนื่องจากเราใช้มาสก์พื้นหลัง ส่วนหนึ่งของภาพพื้นหลังของเราจึงถูกปิดบัง (หรือ "มาสก์")

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

ใต้แท็บ รูปภาพ ให้อัปเดตสิ่งต่อไปนี้:

  • ตำแหน่งภาพพื้นหลัง: ล่างขวา
  • ภาพพื้นหลังแนวนอนออฟเซ็ต: -4vw

8. ใช้โหมดการผสม

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

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

  • การผสมผสานภาพพื้นหลัง: ทวีคูณ
มาสก์และรูปแบบพื้นหลังส่วนฮีโร่ Divi

9. ปรับมาสก์พื้นหลังสำหรับมือถือ

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

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

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

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

รุ่นแท็บเล็ต

  • การเปลี่ยนรูปแบบหน้ากาก: พลิกแนวตั้ง พลิกแนวนอน หมุน
  • อัตราส่วนหน้ากาก: square
มาสก์และรูปแบบพื้นหลังส่วนฮีโร่ Divi

รุ่นโทรศัพท์

  • การเปลี่ยนรูปแบบหน้ากาก: พลิกแนวตั้ง พลิกแนวนอน หมุน
  • อัตราส่วนภาพของหน้ากาก: แนวตั้ง
มาสก์และรูปแบบพื้นหลังส่วนฮีโร่ Divi

ผลลัพธ์

ตรวจสอบการออกแบบที่เราได้สร้างไว้

คอมพิวเตอร์ตั้งโต๊ะ

ใช้มาสก์และรูปแบบสำหรับส่วนฮีโร่ของคุณใน Divi

รุ่นแท็บเล็ต

ใช้มาสก์และรูปแบบสำหรับส่วนฮีโร่ของคุณใน Divi

รุ่นโทรศัพท์

ใช้มาสก์และรูปแบบสำหรับส่วนฮีโร่ของคุณใน Divi

10. สร้างเวอร์ชันมืด

หากคุณต้องการการออกแบบนี้ในเวอร์ชันมืด ให้เปลี่ยนสีมาสก์พื้นหลังเป็นสีเข้ม (เช่น สีดำ)

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

จากนั้นเปลี่ยนสีของลวดลายเป็นสีดำ

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

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

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

นี่คือสิ่งที่รุ่นมืดดูเหมือน

ใช้มาสก์และรูปแบบสำหรับส่วนฮีโร่ของคุณใน Divi

ผลสุดท้าย

ดูสิ่งนี้ด้วย: Divi: วิธีปรับแต่งลิงก์ "อ่านเพิ่มเติม" ของ Blog

มาดูผลลัพธ์สุดท้ายของเราอีกครั้ง

ใช้มาสก์และรูปแบบสำหรับส่วนฮีโร่ของคุณใน Divi
ใช้มาสก์และรูปแบบสำหรับส่วนฮีโร่ของคุณใน Divi

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

สรุป

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

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

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

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

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

...