วิธีสร้างพื้นหลังเบลอที่สวยงามด้วย Divi

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงพื้นหลังเบลอฟรี

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

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

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

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

ดาวน์โหลด

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

เข้าใกล้

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

มาเริ่มสร้างใหม่กันเถอะ

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

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

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

เพิ่มแถวใหม่

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

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

ขนาด

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

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

คอลัมน์ 2 ล้น

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

overflow: hidden;

คอลัมน์ 3 ล้น

ทำสิ่งเดียวกันสำหรับคอลัมน์ที่สาม

overflow: hidden;

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

เพิ่ม H2 Copy

ได้เวลาเริ่มเพิ่มโมดูล โดยเริ่มจากโมดูลข้อความในคอลัมน์แรก ป้อนเนื้อหา H2 ที่คุณเลือก

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

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

• หัวข้อที่ 2 แบบอักษร: Poppins
• หัวเรื่อง 2 สีข้อความ: #232323
• หัวเรื่อง 2 ขนาดข้อความ: 40px

ระยะห่าง

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

• ขอบบน: 9vw

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

ทัศนวิสัย

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

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

เส้น

ไปที่แท็บออกแบบและเปลี่ยนสีเส้น

• สีของเส้น: #000000

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

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

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

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

เปลี่ยนการตั้งค่าข้อความถัดไป

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: เบา
• ขนาดตัวอักษร: 17px
• ความสูงของบรรทัดข้อความ: 2.1em

เพิ่มโมดูลปุ่มไปที่คอลัมน์ 1

เพิ่มสำเนา

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

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

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

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 20px
• สีข้อความของปุ่ม: #000000
• สีพื้นหลังของปุ่ม: #f4f4f4
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: Poppins
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

ระยะห่าง

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

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

เพิ่มโมดูลรูปภาพ #1 ลงในคอลัมน์ 2

อัพโหลด 1:1 รูปภาพ

ต่อคอลัมน์ที่สอง! ที่นี่โมดูลแรกที่เราต้องการคือโมดูลรูปภาพ อัปโหลดรูปภาพที่มีอัตราส่วน 1:1 ซึ่งหมายความว่ารูปภาพของคุณต้องเป็นสี่เหลี่ยมจัตุรัสที่สมบูรณ์แบบ (ความกว้างควรเท่ากับความสูง)

ขนาด

ไปที่แท็บการออกแบบและเปิดใช้งานตัวเลือก 'บังคับเต็มความกว้าง'

• บังคับเต็มความกว้าง: ใช่

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

อัพโหลด 1:1 รูปภาพ

โมดูลที่สองที่เราต้องการในคอลัมน์ 2 คือโมดูลรูปภาพอื่น เราใช้รูปภาพที่มีอัตราส่วน 1:1 อีกครั้ง

ขนาด

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

• บังคับเต็มความกว้าง: ใช่
• ความสูง: 320px

ระยะห่าง

สร้างการทับซ้อนกันระหว่างโมดูลนี้กับโมดูลก่อนหน้าโดยเพิ่มระยะขอบบนสุดติดลบ

• อัตรากำไรขั้นต้น: -100px

ตัวกรอง

ต่อไป เราจะเปลี่ยนการตั้งค่าตัวกรอง นี่คือส่วนที่เราเปลี่ยนภาพให้เป็นพื้นหลังเบลอ

• ความอิ่มตัว: 200%
• ความสว่าง: 145%
• ความคมชัด: 117%
• เบลอ: 40px

แปลงมาตราส่วน

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

• ขวา: 180%
• ด้านล่าง: 180%

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

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

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

เพิ่มลิงค์

ไปที่การตั้งค่าลิงก์และเพิ่ม URL ลิงก์ของปุ่มเพื่อให้ปุ่มปรากฏในการออกแบบ

ลบสีพื้นหลัง

ลบสีพื้นหลังด้วย

• ใช้สีพื้นหลัง: ไม่

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

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

• ระดับหัวเรื่อง: H3
• แบบอักษรของชื่อเรื่อง: Poppins
• ขนาดข้อความชื่อเรื่อง: 40px
• ระยะห่างของตัวอักษรชื่อเรื่อง: -1px

การตั้งค่าข้อความเนื้อหา

แก้ไขการตั้งค่าข้อความเนื้อหาด้วย

• แบบอักษรของร่างกาย: Poppins
• น้ำหนักแบบอักษรของร่างกาย: เบา
• ความสูงของเส้นร่างกาย: 2.2em

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

พร้อมกับการตั้งค่าปุ่มต่างๆ

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 20px
• สีข้อความของปุ่ม: #ffffff
• ไล่ระดับสี 1: rgba(244,244,244,0.4)
• ไล่ระดับสี 2: rgba(255,255,255,0)
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: Poppins
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

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

ระยะห่าง

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

• ขอบบน: -250px
• ช่องว่างภายในด้านซ้าย: 2vw
• ช่องว่างภายในด้านขวา: 2vw

โคลนโมดูลทั้งหมดในคอลัมน์ 2 & วางซ้ำในคอลัมน์ 3

เมื่อคุณสร้างโมดูลทั้งหมดในคอลัมน์ที่สองเสร็จแล้ว คุณสามารถโคลนโมดูลและวางโมดูลที่ซ้ำกันในคอลัมน์ที่สามได้

เปลี่ยนโมดูลภาพที่ซ้ำกัน #1

เปลี่ยนภาพ

เปลี่ยนรูปภาพใน Image Module #1

เปลี่ยนโมดูลรูปภาพที่ซ้ำกัน #2

เปลี่ยนภาพ

ทำเช่นเดียวกันกับ Image Module ที่สองในคอลัมน์

เปลี่ยนการตั้งค่าตัวกรอง

และแก้ไขการตั้งค่าฟิลเตอร์ของ Image Module ที่สองได้เช่นกัน

• ความอิ่มตัว: 180%
• ความสว่าง: 102%
• ความคมชัด: 117%
• เบลอ: 35px

เปลี่ยนโมดูล CTA ที่ซ้ำกัน

เปลี่ยนสำเนา

ดำเนินการต่อโดยเปลี่ยนเนื้อหาของโมดูล CTA

เปลี่ยนพื้นหลังการไล่ระดับสีของปุ่ม

นอกจากการไล่สีปุ่มแรกแล้ว เสร็จแล้ว!

• ไล่ระดับสี 1: rgba(244,244,244,0.15)

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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