คุณต้องการใช้มาสก์และรูปแบบสำหรับส่วนฮีโร่ของคุณใน Divi ?
มาสก์และรูปแบบพื้นหลังใหม่ของ Divi เป็นหนึ่งในคุณสมบัติการออกแบบใหม่ที่ยอดเยี่ยมที่สุดของเรา มาสก์และรูปแบบแต่ละรายการสามารถรวมเข้ากับองค์ประกอบพื้นหลังอื่นๆ (เช่น สี รูปภาพ และการไล่ระดับสี) เพื่อให้ได้ชุดค่าผสมที่ไม่เหมือนใครนับไม่ถ้วนด้วยการคลิกเพียงไม่กี่ครั้ง
วันนี้เราจะมาแนะนำวิธีการใช้ Divi และมาสก์และรูปแบบพื้นหลังใหม่เพื่อออกแบบส่วนฮีโร่
ในบทช่วยสอนนี้ เราจะพูดถึงขั้นตอนสำคัญที่จำเป็นในการสร้างมาสก์และรูปแบบพื้นหลัง
เรายังจะแสดงวิธีจัดตำแหน่งภาพพื้นหลังให้เหมาะกับการออกแบบมาสก์ สิ่งนี้จะทำให้คุณ เครื่องมือ คุณต้องสร้างส่วนฮีโร่ที่สมบูรณ์แบบสำหรับเว็บไซต์ของคุณในไม่กี่นาที
การสำรวจ
ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้
อ่าน: Divi: วิธีสร้างตารางรูปภาพที่ตอบสนองด้วยลิงก์และเอฟเฟกต์โฮเวอร์
ตัวอย่างส่วนของ Hero ที่มีหน้ากากสีขาวและลวดลาย
นี่คือเวอร์ชันมืดของส่วนฮีโร่เดียวกันกับหน้ากากสีดำและรูปแบบ
ด้วยการออกแบบนี้ คุณสามารถเปลี่ยนมาสก์และตำแหน่งมาสก์ได้อย่างง่ายดายด้วยการคลิกเพียงไม่กี่ครั้ง!
สร้างหน้าใหม่ด้วย Divi Builder
จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่
ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi ผู้ก่อสร้าง
จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)
หลังจากนั้นคุณจะได้ผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi.
วิธีใช้มาสก์และรูปแบบพื้นหลังของ Divi ในส่วนฮีโร่ของคุณ
1. สร้างโครงสร้างเค้าโครง
สำหรับส่วนฮีโร่นี้ เราจะใช้โครงสร้างเลย์เอาต์แบบคลาสสิกที่มีชื่อและคำกระตุ้นการตัดสินใจทางด้านซ้าย และรูปภาพ (หรือการออกแบบภาพ) ทางด้านขวา
สำหรับตัวอย่างนี้ การออกแบบภาพของเราจะถูกสร้างขึ้นโดยใช้ตัวเลือกพื้นหลังของ Divi แต่ก่อนที่เราจะไปถึงประเด็นสำคัญ เราต้องสร้างแถวสองคอลัมน์เพื่อประหยัดพื้นที่ทางด้านขวาของหน้าเพื่อแสดงมาสก์พื้นหลังของส่วนและการออกแบบรูปแบบ
2. เพิ่มชื่อและคำกระตุ้นการตัดสินใจ
ในคอลัมน์ด้านซ้าย (คอลัมน์ 1) เพิ่มโมดูลข้อความสำหรับชื่อหลักของคุณ โมดูลข้อความสำหรับข้อความคำบรรยาย และโมดูลปุ่มสำหรับปุ่มของคุณ
3. เพิ่มระยะห่างแนวตั้งให้กับส่วน
เพื่อให้การออกแบบพื้นหลังดูสูงและสวยงาม เราจำเป็นต้องเพิ่มความสูงในแนวตั้งให้กับส่วน วิธีง่ายๆ ในการทำเช่นนี้คือการเพิ่มช่องว่างภายในที่ด้านบนและด้านล่างของส่วน โปรดทราบว่าเราจำเป็นต้องปรับ padding บนหน้าจอแท็บเล็ตและโทรศัพท์เพื่อให้มีที่ว่างสำหรับการออกแบบพื้นหลังของเราเมื่อคอลัมน์เรียงซ้อนกันในแนวตั้ง
เปิดการตั้งค่าส่วน ภายใต้แท็บการออกแบบ ให้อัปเดตการเติมดังนี้:
- การขยายความ:
- เดสก์ท็อป: บน 20vw ล่าง 20vw
- แท็บเล็ต: บน 8vw ล่าง 48vw
- โทรศัพท์: บน 8vw ล่าง 70vw
4. เพิ่มภาพพื้นหลังและการไล่ระดับสี
ต่อไป เราสามารถเพิ่มภาพพื้นหลังและการไล่ระดับสีในส่วน โปรดทราบว่าจุดโฟกัสหลักของภาพพื้นหลังจะถูกเปิดเผยที่ด้านขวาของส่วน ดังนั้นให้ใช้ภาพที่มีสิ่งที่คุณอยากเห็นทางด้านขวา
สำหรับตัวอย่างนี้ เรากำลังใช้รูปภาพที่มีเส้นขอบฟ้าของเมือง ด้านขวาของภาพมีอาคารที่ใกล้กว่าและดูดีกว่า ดังนั้นจึงใช้ได้ผลดีจริงๆ
ภายใต้แท็บ ภาพพื้นหลังอัปโหลดรูปภาพในพื้นหลังของส่วน
ใน Divi คุณสามารถเพิ่มการไล่ระดับสีบนภาพพื้นหลังได้อย่างง่ายดาย ภายใต้แท็บ พื้นหลังไล่โทนสีเพิ่มการไล่ระดับสีต่อไปนี้ไปที่พื้นหลังของส่วน:
- ไล่ระดับหยุด:
- 0%: #3e22ff
- 100%: ชัดเจน
- สี่เหลี่ยมไล่ระดับสีเหนือภาพพื้นหลัง : ใช่
5. สร้างรูปแบบพื้นหลังสำหรับส่วน
ตอนนี้เรามีภาพพื้นหลังและการไล่ระดับสีพร้อมแล้ว เราก็สามารถเพิ่มรูปแบบพื้นหลังเพื่อทำให้การออกแบบสมบูรณ์ได้
ในตัวอย่างนี้ เราจะใช้รูปแบบที่ละเอียดอ่อนซึ่งเพิ่มพื้นผิวเล็กน้อยเพื่อให้ดูมีเอกลักษณ์มากขึ้น
ภายใต้แท็บ รูปแบบพื้นหลัง, ปรับปรุงสิ่งต่อไปนี้:
- รูปแบบพื้นหลัง: กระจุก
เล่ห์เหลี่ยม : ด้วยรูปแบบพื้นหลัง การรักษาให้ละเอียดเป็นวิธีที่ดีที่สุด ลองใช้ขนาดที่กำหนดเองสำหรับการออกแบบที่มีขนาดเล็กลง จากนั้นลดความทึบของสี
6. สร้างมาสก์พื้นหลังสำหรับส่วน
ด้วยรูปแบบพื้นหลังของเรา ในที่สุดเราก็พร้อมที่จะทดสอบมาสก์พื้นหลังใหม่ล่าสุดสำหรับการออกแบบของเรา มีตัวเลือกและรูปแบบให้เลือกมากมาย สำหรับตัวอย่างนี้ เราจะใช้หน้ากากรังผึ้ง
ภายใต้แท็บ หน้ากากพื้นหลัง, ปรับปรุงสิ่งต่อไปนี้:
- หน้ากาก: รังผึ้ง
- หน้ากากสี: #ffffff
- ขนาด: ปก
7. ปรับตำแหน่งภาพพื้นหลัง
เนื่องจากเราใช้มาสก์พื้นหลัง ส่วนหนึ่งของภาพพื้นหลังของเราจึงถูกปิดบัง (หรือ "มาสก์")
ในตัวอย่างนี้ เราจะทำให้แน่ใจว่าด้านล่างขวาของภาพมองเห็นได้ชัดเจนที่สุด และเราจะย้ายไปทางขวาเล็กน้อยเพื่อแสดงสิ่งปลูกสร้างเพิ่มเติม
ใต้แท็บ รูปภาพ ให้อัปเดตสิ่งต่อไปนี้:
- ตำแหน่งภาพพื้นหลัง: ล่างขวา
- ภาพพื้นหลังแนวนอนออฟเซ็ต: -4vw
8. ใช้โหมดการผสม
วิธีหนึ่งในการสร้างสรรค์ด้วยองค์ประกอบพื้นหลังเหล่านี้คือการเพิ่มโหมดการผสม คุณสามารถเพิ่มโหมดการผสมลงในตัวเลือกพื้นหลังใดก็ได้ และสามารถใช้เพื่อผสมเลเยอร์พื้นหลังหลายชั้น (รูปภาพ การไล่ระดับสี มาสก์ ฯลฯ) ด้วยวิธีที่สร้างสรรค์
สำหรับตัวอย่างนี้ เราจะผสมผสานภาพพื้นหลังกับสีไล่ระดับ ในการดำเนินการนี้ ให้คลิกที่แท็บ ภาพพื้นหลัง และเพิ่มโหมดการผสมเพื่อผสมผสานการไล่ระดับสีกับภาพพื้นหลังดังนี้:
- การผสมผสานภาพพื้นหลัง: ทวีคูณ
9. ปรับมาสก์พื้นหลังสำหรับมือถือ
สิ่งสำคัญคือต้องแน่ใจว่าการออกแบบมาสก์พื้นหลังนั้นดูดีบนอุปกรณ์มือถือด้วย โชคดีที่ตัวเลือกในตัวทำให้กระบวนการนี้ง่ายขึ้น
จำไว้ว่าเราได้เพิ่มช่องว่างภายในเพิ่มเติมบนแท็บเล็ตและโทรศัพท์เพื่อให้มีที่ว่างสำหรับการออกแบบพื้นหลังของเรา
ตอนนี้ สิ่งที่เราต้องทำคือใช้ตัวเลือกการแปลงพื้นหลังและอัตราส่วนกว้างยาวเพื่อปรับมาสก์สำหรับมือถือ
ภายใต้แท็บ หน้ากากพื้นหลังเปิดใช้งานตัวเลือกการตอบสนองและอัปเดตสิ่งต่อไปนี้:
รุ่นแท็บเล็ต
- การเปลี่ยนรูปแบบหน้ากาก: พลิกแนวตั้ง พลิกแนวนอน หมุน
- อัตราส่วนหน้ากาก: square
รุ่นโทรศัพท์
- การเปลี่ยนรูปแบบหน้ากาก: พลิกแนวตั้ง พลิกแนวนอน หมุน
- อัตราส่วนภาพของหน้ากาก: แนวตั้ง
ผลลัพธ์
ตรวจสอบการออกแบบที่เราได้สร้างไว้
คอมพิวเตอร์ตั้งโต๊ะ
รุ่นแท็บเล็ต
รุ่นโทรศัพท์
10. สร้างเวอร์ชันมืด
หากคุณต้องการการออกแบบนี้ในเวอร์ชันมืด ให้เปลี่ยนสีมาสก์พื้นหลังเป็นสีเข้ม (เช่น สีดำ)
จากนั้นเปลี่ยนสีของลวดลายเป็นสีดำ
จากนั้นเปลี่ยนชื่อและคำบรรยายเป็นสีขาว และคุณอาจต้องการอัปเดตสีของปุ่มด้วย
นี่คือสิ่งที่รุ่นมืดดูเหมือน
ผลสุดท้าย
ดูสิ่งนี้ด้วย: Divi: วิธีปรับแต่งลิงก์ "อ่านเพิ่มเติม" ของ Blog
มาดูผลลัพธ์สุดท้ายของเราอีกครั้ง
ดาวน์โหลด DIVI ทันที!!!
สรุป
ออกแบบส่วนฮีโร่สำหรับคุณ เว็บไซต์เว็บ สนุกมากกับ มาสก์และรูปแบบพื้นหลัง โดย Divi. ตัวเลือกพื้นหลังนั้นเปลี่ยนได้ง่ายเพื่อให้ได้ดีไซน์ที่สมบูรณ์แบบ และมีตัวเลือกอื่นๆ มากมายที่คุณสามารถใช้ได้ (เช่น โหมดการผสม) เพื่อสร้างพื้นหลังที่ไม่เหมือนใคร
นอกจากนี้ คุณสามารถเพิ่มมาสก์และรูปแบบให้กับองค์ประกอบ Divi ใด ๆ ไม่ใช่แค่ส่วน ขอให้สนุกกับการทดลอง!
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการ Divi ครั้งต่อไปของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...