5 มาสก์พื้นหลังและการวางซ้อนรูปแบบที่คุณสามารถนำไปใช้กับภาพพื้นหลังของคุณ

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

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

เราจะใช้รูปภาพฟรีจาก Online Course Layout Pack ในตัวอย่างนี้ หากต้องการใช้รูปภาพเดียวกัน ให้เลื่อนไปจนสุดทางด้านล่างของโพสต์นี้เพื่อดาวน์โหลดรูปภาพแบบเต็ม

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

สิ่งที่เรากำลังสร้าง

ต่อไปนี้คือภาพรวมคร่าวๆ ของฮีโร่ทั้งห้าที่เราจะสร้างในโพสต์นี้ในวันนี้

การออกแบบมีความละเอียดอ่อน เรียบง่าย แต่ทรงพลัง

ดาวน์โหลดเค้าโครงฟรี

หากคุณต้องการดาวน์โหลดการออกแบบเลย์เอาต์ที่ออกแบบไว้ล่วงหน้าจากบทช่วยสอนนี้ ก่อนอื่นคุณต้องดาวน์โหลดโดยใช้ปุ่มด้านล่าง ในการเข้าถึงการดาวน์โหลด คุณจะต้องสมัครรับรายชื่ออีเมล Divi Daily ของเราโดยใช้แบบฟอร์มด้านล่าง ในฐานะสมาชิกใหม่ คุณจะได้รับ Divi goodness และ Divi Layout pack ฟรีทุกวันจันทร์! หากคุณอยู่ในรายชื่อแล้ว เพียงป้อนที่อยู่อีเมลของคุณด้านล่างแล้วคลิกดาวน์โหลด คุณจะไม่ถูก "สมัครใหม่" หรือรับอีเมลเพิ่มเติม

ดาวน์โหลดไฟล์

ดาวน์โหลดฟรี

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

ดาวน์โหลด

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

วิธีดาวน์โหลดและใช้เลย์เอาต์

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ทำดังต่อไปนี้:

1. ไปที่ห้องสมุด Divi
2. คลิกปุ่มนำเข้าที่ด้านบนของหน้า
3. ในป๊อปอัปการพกพา ให้เลือกแท็บการนำเข้า
4. เลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ (อย่าลืมแตกไฟล์ก่อนแล้วจึงใช้ไฟล์ JSON)
5. จากนั้นคลิกปุ่มนำเข้า

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

เอาล่ะ ไปที่บทแนะนำกันเลย!

สิ่งที่คุณต้องการเพื่อเริ่มต้น

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

1. ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ เผยแพร่ และคลิกปุ่ม "ใช้ตัวสร้าง Divi" เพื่อแก้ไขหน้าในส่วนหน้าโดยใช้ Visual Builder
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

ตอนนี้เรามีผ้าใบเปล่าเพื่อเริ่มออกแบบ!

วิธีสร้างมาสก์พื้นหลังและการวางซ้อนรูปแบบ 5 รายการเพื่อนำไปใช้กับภาพพื้นหลัง

ขั้นแรก มาสร้างส่วนฮีโร่กัน

ตัวอย่างการออกแบบทั้งหมดของเราใช้โครงสร้างส่วน แถว และคอลัมน์เดียวกัน ดังนั้นมาตั้งค่ากันตอนนี้

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

เพิ่มแถวในหน้าของคุณแล้วคลิกไอคอนสีเขียว “+” เพื่อแสดงโครงสร้างคอลัมน์และเลือกคอลัมน์แรก คอลัมน์เต็มหนึ่งคอลัมน์

2. เพิ่มการเว้นวรรคส่วน

เมื่อเราตั้งค่าแถวและคอลัมน์แล้ว ก็ถึงเวลาเพิ่มระยะห่างในส่วน

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

• เดสก์ท็อป: บนสุด 400px และด้านล่าง 400px
• แท็บเล็ต: ด้านบน 200px และด้านล่าง 200px; 25px ซ้ายและขวา
• โทรศัพท์: ด้านบน 50px และด้านล่าง 50px; 25px ซ้ายและขวา

วิธีออกแบบส่วนฮีโร่ #1

มาออกแบบส่วนฮีโร่แรกกัน

1. เพิ่มข้อความหัวเรื่อง

คลิกที่ไอคอนสีเทา “+” เพื่อเปิดไลบรารีโมดูล เลื่อนไปที่ข้อความและคลิกเพื่อโหลด

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

• ตระกูลแบบอักษร: Work Sans
• สีแบบอักษร: ขาว #ffffff
• ขนาดตัวอักษร:
  • เดสก์ท็อป: 3rem
  • แท็บเล็ต: 2.2rem
  • โทรศัพท์: 1.4rem

2. เพิ่มโมดูลปุ่ม

เพิ่มปุ่มและกำหนดการตั้งค่าเหล่านี้:

• ภายใต้ประเภทแท็บข้อความ: เรียนรู้เพิ่มเติม
• ภายใต้แท็บ Alignment เลือก: Center
• คลิก ใช้สไตล์แบบกำหนดเอง แล้วกำหนดค่า:
  • ขนาดข้อความของปุ่ม:
    • เดสก์ท็อป: 20px
    • แท็บเล็ต: 16px
    • โทรศัพท์: 14px
  • สีข้อความของปุ่ม: สีขาว #ffffff
  • สีพื้นหลังของปุ่ม: ดำ #1d1d1d
  • ความกว้างของขอบปุ่ม: 0
  • รัศมีเส้นขอบของปุ่ม: 0
  • ระยะห่างระหว่างตัวอักษรของปุ่ม: 3pt
  • แบบอักษรของปุ่ม: Work Sans
  • รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

3. เพิ่มภาพพื้นหลัง

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

1. ไปที่ปุ่มสลับพื้นหลัง แล้วคลิกแท็บที่ 3 แท็บรูปภาพ จากนั้นคลิก "เพิ่มภาพพื้นหลัง"
2. นี่จะเป็นการเปิดไลบรารีสื่อของคุณ ซึ่งคุณสามารถเลือกรูปภาพหรืออัปโหลดรูปภาพใหม่ได้
3. เมื่อเลือกรูปภาพของคุณแล้ว ให้คลิกปุ่ม "อัปโหลดรูปภาพ" ที่มุมล่างขวา

4. เพิ่มรูปแบบพื้นหลัง

ตอนนี้เราได้ตั้งค่าภาพพื้นหลังแล้ว มาเพิ่มรูปแบบกัน

• ในแท็บ พื้นหลัง ให้ไปที่แท็บที่ 5 แท็บรูปแบบ แล้วคลิก "เพิ่มรูปแบบพื้นหลัง"
• เลือก Tufted จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
  • รูปแบบสี – rgba(255,255,255,0.31)
  • การแปลงรูปแบบ: none
  • ขนาดรูปแบบ: ขนาดจริง
  • รูปแบบการทำซ้ำแหล่งกำเนิด: บนซ้าย
  • รูปแบบการทำซ้ำ: ทำซ้ำ
  • โหมดผสมผสาน: ปกติ

5. เพิ่มมาสก์พื้นหลัง

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

• ในแท็บ พื้นหลัง ให้ไปที่แท็บที่ 6 แท็บมาสก์ แล้วคลิก "เพิ่มมาสก์พื้นหลัง"
• เลือก Bean จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
  • หน้ากากสี: rgba(0,0,0,0.36)
  • Mask Aspect Ration: สี่เหลี่ยมผืนผ้าแนวนอน
  • ขนาดมาส์ก: ยืดให้เต็ม

โว้ว! ตอนนี้คุณมีส่วนฮีโร่ที่ออกแบบอย่างสวยงามแล้ว

วิธีออกแบบส่วนฮีโร่ #2

ตอนนี้ มาออกแบบส่วนฮีโร่ที่สองกัน

1. เพิ่มภาพพื้นหลังและตั้งค่า Blend Mode เป็น Overlay

เลือกภาพพื้นหลังของคุณ ตั้งค่าโหมดผสมผสานเป็นโอเวอร์เลย์ และเพิ่มสีโอเวอร์เลย์ของ rgba(10,10,10,0.64)

2. เพิ่มรูปแบบพื้นหลัง

ตอนนี้เราได้ตั้งค่าภาพพื้นหลังแล้ว มาเพิ่มรูปแบบพื้นหลังกัน

• ในแท็บ พื้นหลัง ให้ไปที่แท็บที่ 5 แท็บรูปแบบ แล้วคลิก "เพิ่มรูปแบบพื้นหลัง"
• เลือก Tufted จากดรอปดาวน์และกำหนดการตั้งค่าเหล่านี้:
  • รูปแบบสี – rgba(255,255,255,0.09)
  • การแปลงรูปแบบ: none
  • ขนาดลาย: ปก
  • รูปแบบการทำซ้ำแหล่งกำเนิด: บนซ้าย
  • รูปแบบการทำซ้ำ: ทำซ้ำ
  • โหมดผสมผสาน: ปกติ

3. เพิ่มมาสก์พื้นหลัง

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

• ในแท็บ พื้นหลัง ให้ไปที่แท็บที่ 6 แท็บมาสก์ แล้วคลิก "เพิ่มมาสก์พื้นหลัง"
• เลือก Caret จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
  • หน้ากากสี: rgba(0,0,0,0.36)
  • การแปลงหน้ากาก: ไม่มี
  • Mask Aspect Ration: สี่เหลี่ยมผืนผ้าแนวนอน
  • ขนาดมาส์ก: ยืดให้เต็ม
  • โหมดผสมผสานหน้ากาก: ปกติ

วิธีออกแบบส่วนฮีโร่ #3

ตอนนี้ มาออกแบบส่วนฮีโร่ที่สามกันเถอะ

1. เพิ่มภาพพื้นหลังและตั้งค่า Blend Mode เป็น Overlay

เลือกภาพพื้นหลังของคุณ ตั้งค่าโหมดผสมผสานเป็นโอเวอร์เลย์ และเพิ่มสีโอเวอร์เลย์ของ rgba(10,10,10,0.39)

2. เพิ่มรูปแบบพื้นหลัง

ตอนนี้เราได้ตั้งค่าภาพพื้นหลังแล้ว มาเพิ่มรูปแบบพื้นหลังกัน

• ในแท็บ พื้นหลัง ให้ไปที่แท็บที่ 5 แท็บรูปแบบ แล้วคลิก "เพิ่มรูปแบบพื้นหลัง"
• เลือก Diagonal Stripes 2 จากดรอปดาวน์และกำหนดการตั้งค่าเหล่านี้:
  • รูปแบบสี – rgba(0,0,0,0.06)
  • การแปลงรูปแบบ: none
  • ขนาดรูปแบบ: ขนาดจริง
  • รูปแบบการทำซ้ำแหล่งกำเนิด: บนซ้าย
  • รูปแบบการทำซ้ำ: ทำซ้ำ
  • โหมดผสมผสาน: ปกติ

3. เพิ่มมาสก์พื้นหลัง

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

• ในแท็บ พื้นหลัง ให้ไปที่แท็บที่ 6 แท็บมาสก์ แล้วคลิก "เพิ่มมาสก์พื้นหลัง"
• เลือก Triangles จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
  • หน้ากากสี: rgba(10,10,10,0.61)
  • การแปลงรูปแบบ: none
  • Mask Aspect Ration: สี่เหลี่ยมผืนผ้าแนวนอน
  • ขนาดมาส์ก: ยืดให้เต็ม
  • โหมดผสมผสานหน้ากาก: ปกติ

วิธีออกแบบส่วนฮีโร่ #4

ตอนนี้ มาออกแบบส่วนฮีโร่ที่สี่กันเถอะ

1. เพิ่มภาพพื้นหลัง

เลือกภาพพื้นหลังของคุณ

2. เพิ่มรูปแบบพื้นหลัง

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

• ในแท็บ พื้นหลัง ให้ไปที่แท็บที่ 5 แท็บรูปแบบ แล้วคลิก "เพิ่มรูปแบบพื้นหลัง"
• เลือก รอยยิ้ม จากรายการดรอปดาวน์และกำหนดการตั้งค่าเหล่านี้:
  • รูปแบบสี – rgba(0,0,0,0.2)
  • การแปลงรูปแบบ: none
  • ขนาดลาย: ปก
  • รูปแบบการทำซ้ำแหล่งกำเนิด: บนซ้าย
  • รูปแบบการทำซ้ำ: ทำซ้ำ
  • โหมดผสมผสาน: ปกติ

3. เพิ่มมาสก์พื้นหลัง

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

• ในแท็บ พื้นหลัง ให้ไปที่แท็บที่ 6 แท็บมาสก์ แล้วคลิก "เพิ่มมาสก์พื้นหลัง"
• เลือก Corner Lake จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
  • หน้ากากสี: rgba(10,10,10,0.61)
  • การแปลงหน้ากาก: แนวนอน
  • Mask Aspect Ration: สี่เหลี่ยมผืนผ้าแนวนอน
  • ขนาดหน้ากาก: ปก
  • ตำแหน่งหน้ากาก: กลางซ้าย
  • โหมดผสมผสานหน้ากาก: ปกติ

3. กำหนดการตั้งค่าแถว

ก่อนที่เราจะไป ส่วนฮีโร่นี้มีรูปแบบแถวที่ไม่ซ้ำใคร มาตั้งค่ากันเถอะ

• ขนาด:
  • ความกว้าง: 80%
  • ความกว้างสูงสุด: 800px
• การจัดแนวแถว:
  • เดสก์ท็อป: Default
  • แท็บเล็ต: ศูนย์
  • โทรศัพท์: ศูนย์
• ระยะห่าง:
  • ซ้าย: 20vw

วิธีออกแบบส่วนฮีโร่ #5

ตอนนี้ มาออกแบบส่วนฮีโร่ที่ห้ากันเถอะ

1. เพิ่มภาพพื้นหลัง

เลือกภาพพื้นหลังของคุณ

2. เพิ่มรูปแบบพื้นหลัง

ตอนนี้เราได้ตั้งค่าภาพพื้นหลังแล้ว มาลองใช้รูปแบบพื้นหลังกัน

• ในแท็บ พื้นหลัง ให้ไปที่แท็บที่ 5 แท็บรูปแบบ แล้วคลิก "เพิ่มรูปแบบพื้นหลัง"
• เลือก Crosses จากดรอปดาวน์และกำหนดการตั้งค่าเหล่านี้:
  • รูปแบบสี – #ffffff
  • การแปลงรูปแบบ: none
  • ขนาดรูปแบบ: ขนาดที่กำหนดเอง
  • ความกว้างของรูปแบบ: 10px
  • ความสูงของรูปแบบ: 10px
  • รูปแบบการทำซ้ำแหล่งกำเนิด: บนซ้าย
  • รูปแบบการทำซ้ำ: ทำซ้ำ
  • โหมดผสมผสาน: ปกติ

3. เพิ่มมาสก์พื้นหลัง

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

• ในแท็บ พื้นหลัง ให้ไปที่แท็บที่ 6 แท็บมาสก์ แล้วคลิก "เพิ่มมาสก์พื้นหลัง"
• เลือก Diagonal Pills จากเมนูแบบเลื่อนลงและกำหนดการตั้งค่าเหล่านี้:
  • หน้ากากสี: rgba(10,10,10,0.61)
  • การแปลงหน้ากาก: แนวนอน
  • Mask Aspect Ration: สี่เหลี่ยมผืนผ้าแนวนอน
  • ขนาดหน้ากาก: ปก
  • ตำแหน่งหน้ากาก: กลางซ้าย
  • โหมดผสมผสานหน้ากาก: ปกติ

3. กำหนดการตั้งค่าแถว

ก่อนที่เราจะไป ส่วนฮีโร่นี้มีรูปแบบแถวที่ไม่ซ้ำใคร มาตั้งค่ากันเถอะ

• ขนาด:
  • ความกว้าง: 80%
  • ความกว้างสูงสุด: 800px
• การจัดแนวแถว:
  • เดสก์ท็อป: Default
  • แท็บเล็ต: ศูนย์
  • โทรศัพท์: ศูนย์
• ระยะห่าง:
  • ขวา: 18vw

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

หากคุณต้องการการออกแบบเพิ่มเติมเช่นนี้ ให้ลองดูการออกแบบพื้นหลังและแพทเทิร์นทั้ง 12 แบบสำหรับการดาวน์โหลดฟรี

ความคิดสุดท้าย

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