เปลี่ยนตัวละครขนาดใหญ่เป็นมาสก์พื้นหลังด้วย Divi (ดาวน์โหลดฟรี!)

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

ไปกันเถอะ!

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

ตัวอย่าง #1

ตัวอย่าง #2

ดาวน์โหลดส่วนฮีโร่ฟรี

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

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

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

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

ดาวน์โหลด

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

สร้างตัวอย่างใหม่ #1

สมัครสมาชิกช่อง Youtube ของเรา

เพิ่มมาตราใหม่

สีพื้นหลัง

มาเริ่มกันที่ตัวอย่างแรกกันเลย! เพิ่มส่วนปกติใหม่ให้กับหน้าใหม่หรือหน้าที่มีอยู่ และเพิ่มพื้นหลังให้กับส่วนนั้น:

• สีพื้นหลัง: #000000

ระยะห่าง

จากนั้นไปที่การตั้งค่าระยะห่างและลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมด

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ล้น

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

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

เพิ่มแถว #1

โครงสร้างคอลัมน์

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

คอลัมน์ 1 สีพื้นหลัง

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

• คอลัมน์ 1 สีพื้นหลัง: #848484

คอลัมน์ 1 ภาพพื้นหลัง

เพิ่มสีพื้นหลังด้วย ในการรวมสีพื้นหลังและรูปภาพ เราจะใช้โหมดผสมผสาน

• การผสมผสานภาพพื้นหลังของคอลัมน์: ทวีคูณ

ขนาด

ไปที่แท็บการออกแบบและอนุญาตให้แถวใช้ความกว้างทั้งหมดของหน้าจอโดยใช้การตั้งค่าการปรับขนาดต่อไปนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

เรายังกำจัดการเติมด้านบนและด้านล่างที่กำหนดเองทั้งหมดของแถว

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มตัวละครลงในกล่องเนื้อหา

ถึงเวลาเพิ่มโมดูลข้อความที่มีอักขระขนาดใหญ่เกินไป เพิ่มตัวอักษร 'o' ลงในกล่องเนื้อหา

สีพื้นหลัง

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

• สีพื้นหลัง: #000000

การตั้งค่าข้อความ

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

• แบบอักษรของข้อความ: Poppins
• ขนาดตัวอักษร: 100vw
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

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

• อัตรากำไรขั้นต้น: -6vw
• ช่องว่างภายในด้านบน: 15vw
• แผ่นรองด้านล่าง: 49vw

ตัวกรอง

ถึงเวลาสร้างปาฏิหาริย์! ไปที่การตั้งค่าตัวกรองของโมดูลและแก้ไขโหมดผสมผสานตามนั้น:

• โหมดผสมผสาน: ทวีคูณ

เพิ่มแถว #2

โครงสร้างคอลัมน์

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

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างทั้งหมดของหน้าจอ

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ลบช่องว่างภายในด้านบนและด้านล่างเริ่มต้นทั้งหมดด้วย

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มโมดูลข้อความ #1 ให้กับคอลัมน์

เพิ่มเนื้อหา H1

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

การตั้งค่าข้อความ H1

ไปที่แท็บการออกแบบและเปลี่ยนการตั้งค่าข้อความ H1

• แบบอักษรของหัวข้อ: Playfair Display
• น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
• การจัดตำแหน่งข้อความหัวเรื่อง: Center
• หัวเรื่องสีข้อความ: #ffffff
• ขนาดข้อความหัวเรื่อง: 6vw

ระยะห่าง

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

• ขอบบน: -47vw
• ระยะขอบซ้าย: 1vw
• ระยะขอบขวา: 1vw

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

โมดูลต่อไปที่เราต้องการคือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

สี

ไปที่แท็บออกแบบถัดไปแล้วเปลี่ยนสีตัวแบ่ง

• สี: #ffffff

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 13px
• ความกว้าง: 16%
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

และเพิ่มระยะขอบด้านบนเพื่อสร้างช่องว่างระหว่างโมดูลข้อความและโมดูลตัวแบ่ง

• ขอบบน: 16vw

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์

เพิ่มเนื้อหา

โมดูลต่อไปที่เราต้องการคือโมดูลข้อความที่มีเนื้อหาบางย่อหน้า

การตั้งค่าข้อความ

ไปที่การตั้งค่าข้อความและทำการเปลี่ยนแปลงต่อไปนี้:

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #ffffff
• ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.9em
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

เพิ่มค่าการเว้นวรรคแบบกำหนดเองด้วย

• อัตรากำไรขั้นต้น: 3vw
• ระยะขอบล่าง: 3vw (เดสก์ท็อป), 10vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: 27vw (เดสก์ท็อป), 10vw (แท็บเล็ต), 8vw (โทรศัพท์)
• ระยะขอบขวา: 27vw (เดสก์ท็อป), 10vw (แท็บเล็ต), 8vw (โทรศัพท์)

เพิ่มโมดูลปุ่มลงในคอลัมน์

เพิ่มสำเนา

ไปยังโมดูลถัดไปและโมดูลสุดท้าย ซึ่งเป็นโมดูลปุ่ม ป้อนสำเนาที่คุณเลือก

การจัดตำแหน่ง

ดำเนินการต่อโดยเปลี่ยนการจัดตำแหน่งปุ่มในแท็บการออกแบบ

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

การตั้งค่าปุ่ม

ไปที่การตั้งค่าปุ่มและจัดรูปแบบปุ่มตามที่คุณต้องการ

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• ความกว้างของขอบปุ่ม: 1px
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: เปิด Sans
• น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

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

• ขอบล่าง: 10vw
• ช่องว่างภายในด้านบน: 15px
• ช่องว่างภายใน: 15px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

สร้างตัวอย่างใหม่ #2

เพิ่มมาตราใหม่

สู่ตัวอย่างที่สอง! เพิ่มส่วนปกติใหม่ให้กับเพจที่คุณกำลังทำงานอยู่

ล้น

ซ่อนส่วนที่เกินของส่วนในแท็บขั้นสูง

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

เพิ่มแถว #1

โครงสร้างคอลัมน์

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

คอลัมน์ 1 สีพื้นหลัง

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

• คอลัมน์ 1 สีพื้นหลัง: #dddddd

คอลัมน์ 1 ภาพพื้นหลัง

เพิ่มภาพพื้นหลังด้วยและรวมสีพื้นหลังเข้ากับภาพโดยใช้โหมดผสมผสาน

• การผสมผสานภาพพื้นหลังของคอลัมน์: Screen

ขนาด

จากนั้นไปที่การตั้งค่าขนาดของแถวและอนุญาตให้ใช้ความกว้างทั้งหมดของหน้าจอ

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

ถอดแผ่นรองด้านบนและด้านล่างออกต่อไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มโมดูลข้อความลงในคอลัมน์

เพิ่มตัวละครลงในกล่องเนื้อหา

ได้เวลาเพิ่มโมดูลข้อความที่มีอักขระขนาดใหญ่เกินไปแล้ว! คัดลอกอักขระต่อไปนี้: '◊◊◊' และเพิ่มลงในกล่องเนื้อหา คุณสามารถใช้อักขระชนิดใดก็ได้ที่คุณต้องการโดยไปที่ผังอักขระ (Windows) หรือจานสีอักขระ (Mac) บนคอมพิวเตอร์ของคุณ

สีพื้นหลัง

เปลี่ยนสีพื้นหลังของโมดูลนี้เป็นสีขาว

• สีพื้นหลัง: #ffffff

การตั้งค่าข้อความ

จากนั้นไปที่แท็บออกแบบและเปลี่ยนการตั้งค่าข้อความ

• แบบอักษรของข้อความ: Poppins
• สีข้อความ: #0c0c0c
• ขนาดตัวอักษร: 80vw
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

แก้ไขค่าการเติมด้านบนและด้านล่างด้วย

• ช่องว่างภายในด้านบน: 27.8vw
• แผ่นรองด้านล่าง: 27.8vw

ตัวกรอง

และสร้างเอฟเฟกต์มาสก์พื้นหลังโดยเพิ่มโมดูลการผสมแบบกำหนดเองลงในโมดูล

• โหมดผสมผสาน: หน้าจอ

เพิ่มแถว #2

โครงสร้างคอลัมน์

เมื่ออักขระขนาดใหญ่ของคุณเข้าที่แล้ว คุณสามารถเพิ่มแถวใหม่ด้วยโมดูลที่เหลือได้

ขนาด

โดยไม่ต้องเพิ่มโมดูลใดๆ ให้เปิดการตั้งค่าแถวและอนุญาตให้แถวใช้ความกว้างทั้งหมดของหน้าจอ

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่กำหนดเองต่อไป

• ช่องว่างภายในด้านบน: 1vw
• ช่องว่างภายใน: 1vw
• ช่องว่างภายในด้านซ้าย: 3vw
• ช่องว่างภายในด้านขวา: 3vw

เพิ่มโมดูลข้อความ #1 ให้กับคอลัมน์

เพิ่มเนื้อหา H1

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

การตั้งค่าข้อความ H1

ไปที่แท็บการออกแบบและเปลี่ยนการตั้งค่าข้อความ H1

• แบบอักษรของหัวเรื่อง: Poppins
• น้ำหนักแบบอักษรของหัวเรื่อง: กึ่งหนา
• การจัดตำแหน่งข้อความหัวเรื่อง: Center
• หัวเรื่องข้อความสี: #000000
• ขนาดข้อความหัวเรื่อง: 5vw

ระยะห่าง

สร้างการทับซ้อนกันระหว่างโมดูลนี้และโมดูลข้อความที่มีอักขระขนาดใหญ่เกินไปโดยเพิ่มระยะขอบด้านบนที่เป็นค่าลบ

• ขอบบน: -38vw

เพิ่มโมดูลตัวแบ่งให้กับคอลัมน์

ทัศนวิสัย

โมดูลต่อไปที่เราต้องการคือโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

• แสดงตัวแบ่ง: ใช่

สี

จากนั้นไปที่แท็บออกแบบและเปลี่ยนสีตัวแบ่ง

• สี: #000000

ขนาด

แก้ไขการตั้งค่าการปรับขนาดด้วย

• น้ำหนักตัวแบ่ง: 13px
• ความกว้าง: 16px
• การจัดตำแหน่งโมดูล: ศูนย์

ระยะห่าง

พร้อมกับค่าการเติมในการตั้งค่าการเว้นวรรค

• อัตรากำไรขั้นต้น: 2vw
• ระยะขอบล่าง: 2vw

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์

เพิ่มเนื้อหา

โมดูลต่อไปที่เราต้องการคือโมดูลข้อความอื่น ป้อนเนื้อหาย่อหน้าที่คุณเลือก

การตั้งค่าข้อความ

จากนั้นไปที่การตั้งค่าข้อความและทำการเปลี่ยนแปลงบางอย่าง

• แบบอักษรข้อความ: เปิด Sans
• สีข้อความ: #000000
• ขนาดตัวอักษร: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 2.5vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 1.9em
• การวางแนวข้อความ: ศูนย์

ระยะห่าง

เพิ่มค่าระยะขอบที่กำหนดเองด้วย

• อัตรากำไรขั้นต้น: 3vw
• ระยะขอบล่าง: 3vw (เดสก์ท็อป), 10vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: 27vw (เดสก์ท็อป), 10vw (แท็บเล็ต), 8vw (โทรศัพท์)
• ระยะขอบขวา: 27vw (เดสก์ท็อป), 10vw (แท็บเล็ต), 8vw (โทรศัพท์)

เพิ่มโมดูลปุ่มลงในคอลัมน์

เพิ่มสำเนา

โมดูลถัดไปและโมดูลสุดท้ายที่เราต้องการคือโมดูลปุ่ม ป้อนสำเนาที่คุณเลือก

การจัดตำแหน่ง

จากนั้นไปที่แท็บออกแบบและแก้ไขการจัดตำแหน่งปุ่ม

• การจัดตำแหน่งปุ่ม: กึ่งกลาง

การตั้งค่าปุ่ม

จัดรูปแบบปุ่มเพื่อให้มีลักษณะตามที่คุณต้องการ

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 1vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 50px
• แบบอักษรของปุ่ม: เปิด Sans
• น้ำหนักแบบอักษร: Ultra Bold
• รูปแบบตัวอักษร: ตัวพิมพ์ใหญ่

ระยะห่าง

และทำการออกแบบให้สมบูรณ์โดยเพิ่มระยะขอบแบบกำหนดเองและค่าการเติมลงในปุ่ม

• ขอบล่าง: 10vw
• ช่องว่างภายในด้านบน: 15px
• ช่องว่างภายใน: 15px
• ช่องว่างภายในด้านซ้าย: 50px
• ช่องว่างภายในด้านขวา: 50px

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

ตัวอย่าง #1

ตัวอย่าง #2

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

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

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