การใช้โมดูลตัวแบ่งเพื่อสร้างรูปร่างพื้นหลังด้วยตัวเลือกการแปลงของ Divi

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

สร้างหน้าใหม่โดยใช้หน้า Landing Page ของ Paralegal Layout Pack

สร้างหน้าใหม่และอัปโหลดหน้า Landing Page ของ Paralegal Layout Pack

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

ส่วนล้น

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

overflow: hidden;

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

ทัศนวิสัย

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

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

สีพื้นหลัง

เราจะใช้สีจากชุดสีของชุดเค้าโครงเป็นสีพื้นหลังสำหรับตัวแบ่ง

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

สี

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

• สี: #f3f1f2

สไตล์

ไปที่การตั้งค่าสไตล์และปรับเปลี่ยนสไตล์ตัวแบ่ง

• รูปแบบตัวแบ่ง: จุด

ขนาด

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

• น้ำหนักตัวแบ่ง: 4px
• ส่วนสูง: 0px

ระยะห่าง

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

• ขอบบน: -30vw (เดสก์ท็อป), -100vw (แท็บเล็ตและโทรศัพท์)
• ระยะขอบซ้าย: -100vw (เดสก์ท็อป), -138vw (แท็บเล็ต), -300vw (โทรศัพท์)
• ช่องว่างภายในด้านบน: 0px
• ช่วงล่าง: 1.3vw (เดสก์ท็อป), 2.2vw (แท็บเล็ต), 3vw (โทรศัพท์)

แปลง

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

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

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

แปลงร่างหมุน

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

• ซ้าย: 348deg

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

ส่วนล้น

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

overflow: hidden;

เพิ่มแถวใหม่ไปที่ส่วนท้ายของส่วน

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

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

ระยะห่าง

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

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

เพิ่มโมดูลตัวแบ่ง

ทัศนวิสัย

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

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

สีพื้นหลัง

เราใช้สีใดสีหนึ่งในชุดสีของชุดเค้าโครงเป็นสีพื้นหลังอีกครั้ง

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

สี

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

• สี: #f3f1f2

ขนาด

เรากำลังเล่นกับการตั้งค่าการปรับขนาดเช่นกัน

• น้ำหนักตัวแบ่ง: 10px
• ส่วนสูง: 0px

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 2vw
• ช่วงล่าง: 2.5vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 3.9vw (โทรศัพท์)

แปลง

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

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

• ด้านล่าง: 153%
• ขวา: 153% (เดสก์ท็อป), 250% (แท็บเล็ต), 500% (โทรศัพท์)

แปลงแปล

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

• ด้านล่าง: 25vw (เดสก์ท็อป), 27vw (แท็บเล็ตและโทรศัพท์)
• ขวา: 0px (เดสก์ท็อป), -32vw (แท็บเล็ตและโทรศัพท์)

แปลงร่างหมุน

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

• ซ้าย: 270deg

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

ส่วนล้น

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

overflow: hidden;

เพิ่มแถวใหม่ที่จุดเริ่มต้นของมาตรา

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

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

ขนาด

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

• ทำให้แถวนี้เต็มความกว้าง: ใช่
• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

เพิ่มโมดูลตัวแบ่ง

ทัศนวิสัย

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

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

สีพื้นหลัง

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

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

สี

ปรับเปลี่ยนสีของตัวแบ่งด้วย

• สี: #f3f1f2

สไตล์

และเปลี่ยนรูปแบบตัวแบ่งในการตั้งค่าสไตล์

• รูปแบบตัวแบ่ง: จุด

ขนาด

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

• น้ำหนักตัวแบ่ง: 4px
• ส่วนสูง: 0px

ระยะห่าง

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

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

กล่องเงา

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

• ความแรงของกล่องเงาเบลอ: 80px
• เงาสี: rgba(0,0,0,0.3)

แปลง

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

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

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

แปลงแปล

จากนั้น เราจะไปที่การตั้งค่าการแปลการแปลงและเปลี่ยนตำแหน่งของโมดูลตัวแบ่ง การวางแถวที่ด้านบนของส่วนช่วยให้เรารักษาดัชนี z ที่ต่ำกว่าแถวที่อยู่ด้านล่าง ซึ่งจะสร้างการทับซ้อนกันที่สวยงามนี้!

• ด้านล่าง: 4vw
• ขวา: 16vw (เดสก์ท็อป), 26vw (แท็บเล็ต), 35vw (โทรศัพท์)

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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