คุณต้องการใช้หน้ากากและรูปแบบพื้นหลังของ Divi หรือไม่?
กับครั้งสุดท้าย รุ่นของคุณสมบัติมาสก์พื้นหลังและรูปแบบพื้นหลัง ของ Divi คุณสามารถสร้างส่วนฮีโร่ที่ไม่ซ้ำใครสำหรับคุณ เว็บไซต์เว็บ. ส่วนฮีโร่เป็นส่วนแรกของ เว็บไซต์เว็บ และนั่นคือสิ่งแรกที่คุณ ผู้เข้าชม ดูก่อนที่จะเลื่อนของคุณ เว็บไซต์เว็บดังนั้นการโดดเด่นสะดุดตาจึงเป็นสิ่งสำคัญ!
บทความนี้จะแสดงวิธีสร้างมาสก์พื้นหลังที่ไม่ซ้ำกันห้าแบบและรูปแบบซ้อนทับที่คุณสามารถนำไปใช้กับภาพพื้นหลังเพื่อสร้างส่วนฮีโร่ที่น่าทึ่งอย่างแท้จริง
บทช่วยสอนนี้จะครอบคลุมขั้นตอนสำคัญที่จำเป็นในการสร้างส่วน Hero แต่ละส่วน และมอบเครื่องมือที่คุณต้องการในการสร้างส่วน Hero ที่โดดเด่นสำหรับเว็บไซต์ของคุณภายในไม่กี่นาที
เริ่มกันเลย!
การสำรวจ
ต่อไปนี้คือภาพรวมคร่าวๆ ของห้าส่วนฮีโร่ที่เราจะสร้างในบทความนี้ในวันนี้
ดาวน์โหลด DIVI ทันที !!!
การออกแบบมีความละเอียดอ่อน เรียบง่าย แต่มีประสิทธิภาพ
สร้างหน้าใหม่ด้วย Divi Builder
ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:
จากแดชบอร์ด WordPress ให้ไปที่ หน้า> เพิ่มใหม่ เพื่อสร้างเพจใหม่
ตั้งชื่อเรื่องที่เหมาะกับคุณแล้วคลิก ใช้ Divi Builder
จากนั้นคลิกที่ เริ่มสร้าง (สร้างจากรอยขีดข่วน)
หลังจากนั้นคุณจะมีผืนผ้าใบว่างเปล่าเพื่อเริ่มออกแบบใน Divi
ตัวอย่างการมาสก์พื้นหลังและรูปแบบการซ้อนทับ XNUMX ตัวอย่างเพื่อใช้กับภาพพื้นหลัง
ขั้นแรก มาสร้างส่วนฮีโร่กันก่อน
การออกแบบตัวอย่างทั้งหมดของเราใช้โครงสร้างส่วน แถว และคอลัมน์เดียวกัน ดังนั้นมาตั้งค่ากันตอนนี้
1. สร้างโครงสร้างเค้าโครง
เพิ่มแถวในหน้าของคุณ จากนั้นคลิกไอคอน "+" สีเขียวเพื่อแสดงโครงสร้างคอลัมน์และเลือกคอลัมน์แรก ซึ่งเป็นคอลัมน์เต็มความกว้าง
2. เพิ่มการเว้นวรรคส่วน
ตอนนี้เราได้กำหนดแถวและคอลัมน์ของเราแล้ว ก็ถึงเวลาเพิ่มระยะห่างในส่วน
บนแท็บการเว้นวรรค ให้อัปเดตสิ่งต่อไปนี้:
- เดสก์ท็อป: 400 พิกเซล (บนและล่าง)
- แท็บเล็ต: 200 พิกเซล (บนและล่าง); 25px (ซ้ายและขวา)
- โทรศัพท์: 50 พิกเซล (บนและล่าง); 25px (ซ้ายและขวา)
การออกแบบส่วนฮีโร่ #1
มาออกแบบส่วนฮีโร่แรกกัน
ดาวน์โหลด DIVI ทันที !!!
1. เพิ่มข้อความส่วนหัว
คลิกที่ไอคอนสีเทา “+” เพื่อเปิดไลบรารีโมดูล เลื่อนไปที่ข้อความและคลิกเพื่อโหลด
ป้อนข้อความชื่อ จากนั้นใต้แท็บ หัวเรื่องข้อความกำหนดการตั้งค่าเหล่านี้:
- แบบอักษรของหัวเรื่อง: Work Sans
- สีข้อความ: ขาว #ffffff
- ขนาดข้อความหัวเรื่อง:
- เดสก์ท็อป: 3 em
- แท็บเล็ต: 2,2 em
- โทรศัพท์: 1.4em
2. เพิ่มโมดูลปุ่ม
เพิ่มปุ่มและกำหนดการตั้งค่าเหล่านี้:
- ภายใต้แท็บ contens: ค้นหาเพิ่มเติม
- ภายใต้แท็บ การวางแนว, เลือก: ศูนย์
- คลิกที่ ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม จากนั้นกำหนดค่า:
- ขนาดข้อความของปุ่ม:
- เดสก์ท็อป: 20px
- แท็บเล็ต: 16px
- โทรศัพท์: 14px
- สีข้อความของปุ่ม: #ffffff
- พื้นหลัง: #1d1d1d
- ความกว้างของขอบปุ่ม: 0
- รัศมีชายแดน: 0
- ระยะห่างตัวอักษร: 3 คะแนน
- แบบอักษรของปุ่ม: Work Sans
- รูปแบบตัวอักษร: TT
- ขนาดข้อความของปุ่ม:
3. เพิ่มภาพพื้นหลัง
ตอนนี้ของเรา เนื้อหา ได้รับการกำหนดค่าแล้ว ก็ถึงเวลาเริ่มออกแบบพื้นหลังของส่วนนั้น
- ไปที่ปุ่มสลับพื้นหลังและคลิกที่แท็บที่ 3 แท็บรูปภาพ จากนั้นคลิกที่ "เพิ่มภาพพื้นหลัง"
- นี่จะเป็นการเปิดไลบรารีสื่อของคุณ ซึ่งคุณสามารถเลือกรูปภาพหรืออัปโหลดรูปภาพใหม่ได้
- เมื่อคุณเลือกรูปภาพแล้ว ให้คลิกปุ่ม "อัปโหลดรูปภาพ" ที่มุมล่างขวา
4. เพิ่มรูปแบบพื้นหลัง
เมื่อเราตั้งค่าภาพพื้นหลังแล้ว มาเพิ่มรูปแบบกัน
- ในแท็บ พื้นหลัง, นำทางไปยังแท็บที่ 5, แท็บ รูปแบบพื้นหลังจากนั้นคลิก “เพิ่มรูปแบบพื้นหลัง”
- เลือก กระจุก จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
- รูปแบบสี – rgba(255,255,255,0.31)
- การแปลงรูปแบบ: none
- ขนาด : ขนาดจริง
- รูปแบบการทำซ้ำแหล่งกำเนิด: บนล่าง
- รูปแบบการทำซ้ำ: ทำซ้ำ
- โหมดผสมผสาน: ปกติ
5. เพิ่มมาสก์พื้นหลัง
ตอนนี้เราได้ตั้งค่าภาพพื้นหลังและรูปแบบแล้ว มาเพิ่มมาสก์พื้นหลังกัน
- ในแท็บ พื้นหลัง, นำทางไปยังแท็บที่ 6, แท็บ หน้ากากพื้นหลังจากนั้นคลิก “เพิ่มมาสก์พื้นหลัง”
- เลือก ถั่ว จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
- หน้ากากสี: rgba(0,0,0,0.36)
- Mask Aspect Ratio: สี่เหลี่ยมผืนผ้าแนวนอน
- ขนาด: ยืดเพื่อเติมเต็ม
ดังนั้น ! ตอนนี้คุณมีส่วนฮีโร่ที่ออกแบบอย่างสวยงามแล้ว
การออกแบบหมวดฮีโร่ #2
ตอนนี้ มาออกแบบส่วนฮีโร่ที่สองกัน
1. เพิ่มภาพพื้นหลังและตั้งค่าโหมดการผสมเป็น Overlay
เลือกภาพพื้นหลังของคุณ ตั้งค่าโหมดการผสมเป็นโอเวอร์เลย์ และเพิ่มสีโอเวอร์เลย์ของ rgba (10,10,10,0.64)
2. เพิ่มรูปแบบพื้นหลัง
เมื่อเราตั้งค่าภาพพื้นหลังแล้ว มาเพิ่มรูปแบบพื้นหลังกัน
- ในแท็บ พื้นหลัง ไปที่แท็บที่ 5 แท็บ รูปแบบพื้นหลังจากนั้นคลิก “เพิ่มรูปแบบพื้นหลัง”
- เลือก กระจุก จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
- รูปแบบสี – rgba(255,255,255,0.09)
- การแปลงรูปแบบ: none
- ขนาด: ปก
- รูปแบบการทำซ้ำแหล่งกำเนิด: บนซ้าย
- รูปแบบการทำซ้ำ: ทำซ้ำ
- โหมดผสมผสาน: ปกติ
3. เพิ่มมาสก์พื้นหลัง
ตอนนี้เราได้ตั้งค่าภาพพื้นหลังและรูปแบบแล้ว มาเพิ่มมาสก์พื้นหลังกัน
- ในแท็บ พื้นหลัง, นำทางไปยังแท็บที่ 6, แท็บ หน้ากากพื้นหลังจากนั้นคลิก “เพิ่มมาสก์พื้นหลัง”
- เลือก เครื่องหมายตก จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
- หน้ากากสี: rgba(0,0,0,0.36)
- การแปลงหน้ากาก: ไม่มี
- อัตราส่วนภาพ: สี่เหลี่ยมผืนผ้าแนวนอน
- ขนาดมาส์ก: ยืดให้เต็ม
- โหมดผสมผสานหน้ากาก: ปกติ
การออกแบบหมวดฮีโร่ #3
ตอนนี้ มาออกแบบส่วนฮีโร่ที่สามกันเถอะ
1. เพิ่มภาพพื้นหลังและตั้งค่าโหมดการผสมเป็น Overlay
เลือกภาพพื้นหลังของคุณ ตั้งค่าโหมดการผสมเป็นโอเวอร์เลย์ และเพิ่มสีโอเวอร์เลย์ของ rgba (10,10,10,0.39)
2. เพิ่มรูปแบบพื้นหลัง
เมื่อเราตั้งค่าภาพพื้นหลังแล้ว มาเพิ่มรูปแบบพื้นหลังกัน
- ในแท็บ พื้นหลัง, นำทางไปยังแท็บที่ 5, แท็บ รูปแบบพื้นหลังจากนั้นคลิก “เพิ่มรูปแบบพื้นหลัง”
- เลือก เส้นทแยงมุม 2 จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
- รูปแบบสี – rgba(0,0,0,0.06)
- การแปลงรูปแบบ: none
- ขนาด : ขนาดจริง
- รูปแบบการทำซ้ำแหล่งกำเนิด: บนซ้าย
- รูปแบบการทำซ้ำ: ทำซ้ำ
- โหมดผสมผสาน: ปกติ
3. เพิ่มมาสก์พื้นหลัง
ตอนนี้เราได้เพิ่มภาพพื้นหลังและรูปแบบแล้ว มาเพิ่มมาสก์พื้นหลังกัน
- ในแท็บ พื้นหลัง, นำทางไปยังแท็บที่ 6, แท็บ หน้ากากพื้นหลังจากนั้นคลิก “เพิ่มมาสก์พื้นหลัง”
- เลือก สามเหลี่ยม จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
- หน้ากากสี: rgba (10, 10, 10, 0,61)
- การแปลงหน้ากาก: none
- อัตราส่วนภาพ: สี่เหลี่ยมผืนผ้าแนวนอน
- ขนาดมาส์ก: ยืดให้เต็ม
- โหมดผสมผสานหน้ากาก: ปกติ
การออกแบบหมวดฮีโร่ #4
ตอนนี้ มาออกแบบส่วนที่สี่ของฮีโร่กัน
1. เพิ่มภาพพื้นหลัง
เลือกภาพพื้นหลังของคุณ
2. เพิ่มรูปแบบพื้นหลัง
เมื่อเราเพิ่มภาพพื้นหลังแล้ว มาเพิ่มรูปแบบพื้นหลังกัน
- ในแท็บ พื้นหลัง, นำทางไปยังแท็บที่ 5, แท็บ รูปแบบพื้นหลังจากนั้นคลิก “เพิ่มรูปแบบพื้นหลัง”
- เลือก รอยยิ้ม จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
- รูปแบบสี – rgba(0,0,0,0.2)
- การแปลงรูปแบบ: none
- ขนาด: ปก
- ต้นกำเนิดซ้ำ: บนซ้าย
- รูปแบบการทำซ้ำ: ทำซ้ำ
- โหมดผสมผสานรูปแบบ: Normal
3. เพิ่มมาสก์พื้นหลัง
ตอนนี้เราได้ใช้ภาพพื้นหลังและรูปแบบแล้ว มาเพิ่มมาสก์พื้นหลังกัน
- ในแท็บ พื้นหลัง, นำทางไปยังแท็บที่ 6, แท็บ หน้ากากพื้นหลังจากนั้นคลิก “เพิ่มมาสก์พื้นหลัง”
- เลือก คอร์เนอร์เลค จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
- หน้ากากสี: rgba (10, 10, 10, 0,61)
- การแปลงหน้ากาก: แนวนอน
- อัตราส่วนภาพ: สี่เหลี่ยมผืนผ้าแนวนอน
- ขนาด: ปก
- ตำแหน่งหน้ากาก: กลางซ้าย
- โหมดมาส์กเบลนเดอร์: ปกติ
3. กำหนดค่าพารามิเตอร์เส้น
ก่อนที่เราจะไป ส่วนฮีโร่นี้มีสไตล์เส้นที่เป็นเอกลักษณ์ มาตั้งค่านี้กัน
- ขนาด:
- ความกว้าง: 80%
- ความกว้างสูงสุด: 800px
- การจัดแนวแถว:
- เดสก์ท็อป: Default
- แท็บเล็ต: ศูนย์
- โทรศัพท์: ศูนย์
- ระยะขอบ:
- ซ้าย: 20vw
การออกแบบมาตราฮีโร่ #5
ตอนนี้ มาออกแบบส่วนฮีโร่ที่ห้ากันเถอะ
ดาวน์โหลด DIVI ทันที !!!
1. เพิ่มภาพพื้นหลัง
เลือกภาพพื้นหลังของคุณ
2. เพิ่มรูปแบบ
เมื่อเราตั้งค่าภาพพื้นหลังแล้ว มาลองใช้รูปแบบพื้นหลังกัน
- ในแท็บ พื้นหลัง, นำทางไปยังแท็บที่ 5, แท็บ รูปแบบพื้นหลังจากนั้นคลิก “เพิ่มรูปแบบพื้นหลัง”
- เลือก ข้าม จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
- รูปแบบสี – #ffffff
- การแปลงรูปแบบ: none
- ขนาด: กำหนดขนาดเอง
- ความกว้างของรูปแบบ: 10px
- ความสูงของรูปแบบ: 10px
- กำเนิดซ้ำ: บนล่าง
- รูปแบบการทำซ้ำ: ทำซ้ำ
- โหมดผสมผสานรูปแบบ: Normal
3. เพิ่มมาสก์พื้นหลัง
ตอนนี้เราได้ใช้ภาพพื้นหลังและรูปแบบแล้ว มาเพิ่มมาสก์พื้นหลังกัน
- ในแท็บ พื้นหลัง, นำทางไปยังแท็บที่ 6, แท็บ หน้ากากพื้นหลังจากนั้นคลิก “เพิ่มมาสก์พื้นหลัง”
- เลือก ยาแนวทแยง จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
- หน้ากากสี: rgba (10, 10, 10, 0,61)
- การแปลงหน้ากาก: แนวนอน
- อัตราส่วนภาพ: สี่เหลี่ยมผืนผ้าแนวนอน
- ขนาด: ปก
- ตำแหน่งหน้ากาก: กลางซ้าย
- โหมดผสมผสานหน้ากาก: ปกติ
3. กำหนดค่าพารามิเตอร์เส้น
ก่อนที่เราจะไป ส่วนฮีโร่นี้ยังมีสไตล์ไลน์ที่เป็นเอกลักษณ์อีกด้วย มาตั้งค่านี้กัน
- ขนาด:
- ความกว้าง: 80%
- ความกว้างสูงสุด: 800px
- การจัดแนวแถว:
- เดสก์ท็อป: Default
- แท็บเล็ต: ศูนย์
- โทรศัพท์: ศูนย์
- ระยะห่าง:
- มาร์จิ้น (ขวา): 18vw
ดูสิ่งนี้ด้วย: Divi: วิธีเพิ่มมาสก์และรูปแบบพื้นหลังให้กับส่วนหัว
สรุป
การออกแบบส่วนฮีโร่ที่ไม่ซ้ำใครและสะดุดตาสำหรับเว็บไซต์ของคุณเป็นเรื่องง่ายด้วยตัวเลือกใหม่ พื้นหลังและรูปแบบหน้ากาก โดย Divi. แต่ละคุณสมบัติมีตัวเลือกมากมายที่ช่วยให้คุณสร้างพื้นหลังที่สร้างสรรค์อย่างแท้จริง
นอกจากนี้ คุณสามารถเพิ่มรูปแบบพื้นหลังและมาสก์ให้กับรายการ Divi Builder ได้! ตัวเลือกการออกแบบไม่มีที่สิ้นสุด
หวังว่าเทคนิคนี้จะช่วยเพิ่มทักษะการออกแบบที่มีประโยชน์สำหรับโครงการในอนาคต
เราหวังว่าบทช่วยสอนนี้จะสร้างแรงบันดาลใจให้คุณสำหรับโครงการ Divi ครั้งต่อไปของคุณ หากคุณมีข้อกังวลหรือข้อเสนอแนะ หาเราใน ส่วนความเห็น เพื่อหารือเกี่ยวกับมัน
ปรึกษาได้นะคะ ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณ
อย่าลังเลที่จะปรึกษาคำแนะนำของเราเกี่ยวกับ การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
...
