การใช้การตั้งค่าตัวกรองคอลัมน์ใหม่ของ Divi เพื่อสร้างเอฟเฟกต์การผสมอันน่าทึ่ง

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดรูปแบบคอลัมน์เบลนด์โหมดฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

เพิ่มส่วนใหม่ด้วยแถว 3 คอลัมน์

เริ่มการออกแบบโดยเพิ่มส่วนใหม่ด้วยแถวสามคอลัมน์

ระยะห่างมาตรา

เปิดการตั้งค่าส่วนและปรับระยะห่าง

• ระยะขอบซ้ายและขวา: 3vw
• ช่องว่างภายในด้านบนและด้านล่าง: 84px

การตั้งค่าแถว

พื้นหลัง

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

• สีพื้นหลัง: เทากลาง #c4c4c4

จากนั้น อัปโหลดภาพพื้นหลังและผสมผสานสีพื้นหลังกับภาพโดยใช้โหมดผสมผสาน

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

ขนาด

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

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

ระยะห่าง

ลบการเติมแถวเริ่มต้นด้วย

• ช่องว่างด้านบนและด้านล่าง: 0px

กล่องเงา

ดำเนินการต่อโดยเพิ่มเงากล่องอย่างง่ายในแถว

• Box Shadow: ตัวเลือกแรก

ทัศนวิสัย

ปรับดัชนี Z ในแท็บการมองเห็น

• ดัชนี Z: 1

สไตล์คอลัมน์ 1

ป้อนการตั้งค่าของคอลัมน์แรก

ตัวกรอง

ใช้โหมดผสมผสานหน้าจอกับคอลัมน์ในแท็บตัวกรอง

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

โฮเวอร์แปลงมาตราส่วน

เข้าสู่กลุ่มตัวเลือกการแปลงและแก้ไขการตั้งค่ามาตราส่วนการแปลงแบบโฮเวอร์

• Transform Scale: 105% ทั้งแกน x และ y

ทัศนวิสัย

เข้าสู่แท็บการเปิดเผยของคอลัมน์และปรับการตั้งค่าโอเวอร์โฟลว์

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

การเปลี่ยนผ่าน

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

• ระยะเวลาการเปลี่ยนภาพ: 500 ms

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

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

พื้นหลัง

จัดรูปแบบพื้นหลังด้วยการไล่ระดับสี

• พื้นหลัง: ไล่โทนสี
• ไล่โทนสีหนึ่ง: #5498ff
• ไล่โทนสีที่สอง: #16fff3
• ทิศทางการไล่ระดับสี: 235 องศา
• ตำแหน่งเริ่มต้น: 37%

ระยะห่าง

เพิ่มค่าการเว้นวรรคที่กำหนดเองต่อไป

• ช่องว่างบนและล่าง: 6vw
• ช่องว่างภายในซ้ายและขวา: 3vw

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

ป้อนการตั้งค่าข้อความหัวเรื่องและจัดรูปแบบการตั้งค่าข้อความ H2 ตามนั้น:

• หัวข้อที่ 2 น้ำหนักแบบอักษร: Ultra Bold
• ส่วนหัว 2 รูปแบบตัวอักษร: TT
• หัวเรื่อง 2 สีข้อความ: สีดำ #oooooo
• หัวเรื่อง 2 ขนาดข้อความ:
  • เดสก์ท็อป: 5vw
  • แท็บเล็ต: 11vw
  • โทรศัพท์: 13vw
• ส่วนหัว 2 ความสูงของบรรทัด:
  • เดสก์ท็อป: 4.3vw
  • แท็บเล็ต: 9vw
  • โทรศัพท์: 10.5vw

ตัวกรอง

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

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

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

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

จัดรูปแบบโมดูลข้อความดังนี้:

พื้นหลัง

เพิ่มสีพื้นหลังสีขาว

• สีพื้นหลัง: ขาว #fffffff

ข้อความ

เข้าสู่แท็บการออกแบบและปรับข้อความตามนั้น:

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• การจัดตำแหน่งข้อความ: Justified
• สีข้อความ: เทาเข้ม #333333
• ขนาดข้อความ:
  • เดสก์ท็อป: 0.8vw
  • แท็บเล็ต: 2vw
  • โทรศัพท์: 2.5vw
• ระยะห่างของตัวอักษรข้อความ: -0.04vw
• ความสูงของบรรทัดข้อความ:
  • เดสก์ท็อป: 2.7vw
  • แท็บเล็ต: 5.5vw
  • โทรศัพท์: 6vw

ระยะห่าง

ปรับการตั้งค่าการเว้นวรรคด้วยเพื่อสร้างพื้นที่ว่างรอบๆ ข้อความ

• ขอบบนและล่าง: 0.5vw
• บุนวมด้านบนและด้านล่าง:
  • เดสก์ท็อป: 5vw
  • แท็บเล็ต + โทรศัพท์: 15vw
• ช่องว่างภายในด้านซ้าย: 5vw
• ช่องว่างภายในด้านขวา:
  • เดสก์ท็อป: 5vw
  • แท็บเล็ต + โทรศัพท์: 25vw

ตัวกรอง

สุดท้ายแต่ไม่ท้ายสุด ใช้โหมดผสมผสานหน้าจอในแท็บตัวกรอง

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

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

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

จัดรูปแบบโมดูลดังนี้:

เพิ่มลิงค์

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

พื้นหลัง

จัดรูปแบบการไล่ระดับสีพื้นหลังให้ตรงกับโมดูลข้อความแรก

• พื้นหลัง: ไล่โทนสี
• พื้นหลังไล่ระดับสีหนึ่ง: #5498ff
• การไล่ระดับสีพื้นหลังที่สอง: #16fff3
• ทิศทางการไล่ระดับสี: 235 องศา

ข้อความ

ป้อนแท็บการออกแบบและจัดรูปแบบข้อความดังนี้:

• แบบอักษรของข้อความ: มอนต์เซอร์รัต
• น้ำหนักแบบอักษรของข้อความ: หนัก
• รูปแบบตัวอักษรของข้อความ: ขีดเส้นใต้
• ข้อความขีดเส้นใต้สี: ขาว #ffffff
• สีข้อความ: ดำ #000000
• ขนาดข้อความ:
  • เดสก์ท็อป: 1.5vw
  • แท็บเล็ต: 3.3vw
  • โทรศัพท์: 4vw
• ความสูงของบรรทัดข้อความ: 1em

ระยะห่าง

ปรับการตั้งค่าการเว้นวรรคเพื่อให้ข้อความพอดีกับโมดูลมากขึ้น

• บุนวมด้านบนและด้านล่าง:
  • เดสก์ท็อป: 2vw
  • แท็บเล็ต: 6vw
  • โทรศัพท์: 9vw
• ช่องว่างภายในด้านซ้าย: 3vw

ทำซ้ำคอลัมน์ที่ 1 สองครั้ง

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

คอลัมน์ 2 / โมดูลข้อความ 1 พื้นหลัง

• พื้นหลังไล่ระดับสีหนึ่ง: #c870ff
• การไล่ระดับสีพื้นหลังที่สอง: #ff355a

คอลัมน์ 2 / โมดูลข้อความ 2 กล่องเงา

• กล่องเงา: ตัวเลือกที่หก
• ความแรงของกล่องเงาเบลอ: 20px
• ความแรงของการกระจายเงาของกล่อง: 17px
• กล่องสีเงา: rgba(225,33,255,0.06)

พื้นหลังของคอลัมน์ 2 / โมดูลข้อความ 3

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

• พื้นหลังไล่ระดับสีหนึ่ง: #c870ff
• การไล่ระดับสีพื้นหลังที่สอง: #ff355a

คอลัมน์ 3 / โมดูลข้อความ 1 พื้นหลัง

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

• พื้นหลังไล่ระดับสีหนึ่ง: #ff4800
• การไล่ระดับสีพื้นหลังที่สอง: #fc9a2a

พื้นหลังของคอลัมน์ 2 / โมดูลข้อความ 3

• พื้นหลังไล่ระดับสีหนึ่ง: #ff4800
• การไล่ระดับสีพื้นหลังที่สอง: #fc9a2a

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

มันเป็นแรป

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