วิธีสร้างหัวข้อ Split Blend Mode ด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

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

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

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

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

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

ดาวน์โหลด

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

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

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

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

ระยะห่าง

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

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

กล่องเงา

ย้ายไปยังตัวเลือกเงาของกล่องและเพิ่มเงาของกล่องที่ละเอียดอ่อน

• ความชัดเจนของเงากล่อง: 70px
• เงาสี: rgba(0,0,0,0.07)

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

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

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

พื้นหลังไล่โทนสี

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

• สี 1: #00cbff
• สี 2: #bf35ff
• ทิศทางการไล่ระดับสี: 96deg

ภาพพื้นหลัง

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

• ขนาดภาพพื้นหลัง: ปก
• ตำแหน่งภาพพื้นหลัง: Center
• เล่นซ้ำภาพพื้นหลัง: ไม่เล่นซ้ำ
• การผสมผสานภาพพื้นหลัง: หน้าจอ

ขนาด

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

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

ระยะห่าง

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

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

แสดง

เพื่อให้แน่ใจว่าทั้งสองคอลัมน์ปรากฏติดกันบนหน้าจอขนาดเล็ก เราจะเพิ่มโค้ด CSS หนึ่งบรรทัดลงในองค์ประกอบหลักของแถว

display: flex;

การตั้งค่าคอลัมน์ 2

สีพื้นหลัง

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

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

ตัวกรอง

ไปที่แท็บออกแบบและเพิ่มโหมดผสมผสานให้กับทั้งคอลัมน์

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

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

ทัศนวิสัย

ได้เวลาเริ่มเพิ่มโมดูลแล้ว! โมดูลเดียวที่เราต้องการในคอลัมน์แรกคือโมดูลตัวแบ่ง โมดูลนี้จะช่วยให้เราสร้างช่องว่างในคอลัมน์แรกโดยไม่ต้องให้โมดูลปรากฏขึ้น ตรวจสอบให้แน่ใจว่าตัวเลือก 'แสดงตัวแบ่ง' ของตัวแบ่งนั้นถูกปิดใช้งาน

• แสดงตัวแบ่ง: ไม่

ระยะห่าง

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

• ขอบล่าง: 50vw

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

เพิ่มหัวข้อ H1

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

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

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

• แบบอักษรของหัวเรื่อง: Poppins
• น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
• หัวเรื่องสีข้อความ: #FFFFFF
• ขนาดข้อความหัวเรื่อง: 12vw
• การเว้นวรรคหัวเรื่อง: -0.2vw

ระยะห่าง

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

• ขอบบน: 18vw
• ระยะขอบล่าง: 2vw
• ระยะขอบซ้าย: -27.3vw

ตัวกรอง

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

• โหมดผสมผสาน: ความแตกต่าง

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

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

สู่โมดูลที่สอง! เพิ่มเนื้อหาบางส่วนที่คุณเลือก

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

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

• แบบอักษรของข้อความ: Poppins
• การจัดตำแหน่งข้อความ: Justify
• สีข้อความ: #000000
• ขนาดตัวอักษร: 0.8vw (เดสก์ท็อป), 1.5vw (แท็บเล็ต), 2.3vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.5em (เดสก์ท็อปและแท็บเล็ต), 2.2em (โทรศัพท์)

ระยะห่าง

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

• ระยะขอบล่าง: 1vw
• ระยะขอบซ้าย: 5vw
• ระยะขอบขวา: 14vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 5vw (โทรศัพท์)

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

ทัศนวิสัย

ไปยังโมดูลถัดไป ซึ่งเป็นโมดูลตัวแบ่ง ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

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

เส้น

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

• สีเส้น: #FFFFFF
• สไตล์เส้น: Solid
• ตำแหน่งสาย: Top

ขนาด

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

• ตัวแบ่งน้ำหนัก: 0.7vw
• ความกว้าง: 9%
• ส่วนสูง: 0px

ระยะห่าง

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

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

ตัวกรอง

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

• โหมดผสมผสาน: ความแตกต่าง

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

เพิ่มสำเนา

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

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

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

• การจัดตำแหน่งปุ่ม: ซ้าย

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

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

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

ระยะห่าง

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

• ขอบล่าง: 10vw (เดสก์ท็อป), 15vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: 5vw
• ช่องว่างภายในด้านบน: 1vw
• ช่องว่างภายใน: 1vw
• ช่องว่างภายในด้านซ้าย: 3vw
• ช่องว่างภายในด้านขวา: 3vw

ดูตัวอย่าง

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

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

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

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