วิธีใช้โครงสร้างคอลัมน์ใหม่ของ Divi เพื่อสร้างการเปลี่ยนส่วนที่น่าทึ่ง

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

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

ไปกันเถอะ!

ดูตัวอย่าง

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

ใช้หน้า Landing Page ของ Layout Pack ของ Makeup Artist ของ Divi

เราจะใช้หน้า Landing Page ของ Divi's Makeup Artist Layout Pack หากคุณต้องการตรวจสอบชุดเค้าโครง ให้ไปที่โพสต์ในบล็อกต่อไปนี้ แม้ว่าเราจะสาธิตบทช่วยสอนนี้โดยใช้ชุดเค้าโครงเฉพาะ แต่คุณก็สามารถใช้เทคนิคนี้กับเค้าโครงอื่นๆ ได้อย่างง่ายดายเช่นกัน

การเปลี่ยนมาตรา #1

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

ค้นหา

เปิดหน้า Landing Page ของ Makeup Artist Layout Pack โดยใช้ Visual Builder ของ Divi จากนั้น เพิ่มส่วนปกติใหม่ด้านล่างส่วนฮีโร่:

ระยะห่าง

ลบระยะห่างเริ่มต้นทั้งหมดของส่วนของคุณถัดไป:

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

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

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

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

ขนาด

เพิ่มความกว้างของแถวด้วย:

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

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นถัดไป:

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

กรอง

หากต้องการให้แถวมีสีสันมากขึ้น ให้เพิ่มความอิ่มตัวในการตั้งค่าตัวกรอง:

• ความอิ่มตัว: 200%

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

ซ่อนตัวแบ่ง

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

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

ถัดไป เพิ่มพื้นหลังไล่ระดับให้กับโมดูลตัวแบ่ง:

• สี 1: rgba(255,255,255,0)
• สี 2: rgba(176,182,219,0.34)

ระยะห่าง

ในการสร้างสี่เหลี่ยม ให้เปลี่ยนค่าการเว้นวรรค:

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

โมดูลตัวแบ่งโคลน & วางในคอลัมน์ 2

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

เปลี่ยนพื้นหลังไล่ระดับ

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

• สี 1: rgba (228,237,234,0.58)
• สี 2: rgba (255,255,255,0)

เปลี่ยนระยะห่าง

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

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

Clone Divider Module #1 สองครั้งและวางในคอลัมน์ 3 & 5

โคลนโมดูลตัวแบ่งสีม่วงสองครั้ง และวางรายการที่ซ้ำกันในคอลัมน์ 3 และ 5

Clone Divider Module #2 และวางในคอลัมน์ 4

โคลนโมดูลตัวแบ่งสีเขียวด้วย และวางไว้ในคอลัมน์ 4

ซ่อนโมดูลตัวแบ่งในคอลัมน์ 3, 4 และ 5 บนแท็บเล็ตและโทรศัพท์

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

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

ซ่อนบนแท็บเล็ตและโทรศัพท์

ไปที่แท็บขั้นสูงและปิดใช้งานโมดูลบนโทรศัพท์และแท็บเล็ต

คัดลอกรูปแบบการมองเห็น

เราจะต้องซ่อนตัวแบ่งในคอลัมน์ 4 และ 5 ด้วย เพื่อเร่งกระบวนการ ให้คัดลอกการตั้งค่าการมองเห็นของตัวแบ่งในคอลัมน์ 3:

วางรูปแบบการมองเห็น

และวางลงในโมดูลตัวแบ่งในคอลัมน์ 4 และ 5

การเปลี่ยนมาตรา #2

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

ค้นหา

หากต้องการสร้างการเปลี่ยนส่วนที่สอง ให้เพิ่มส่วนใหม่ที่นี่:

ตัวแบ่งด้านบน

เปิดการตั้งค่าส่วนและเพิ่มตัวแบ่งด้านบนต่อไปนี้:

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: #ffffff
• ความสูงของตัวแบ่ง: 236px
• พลิกตัวแบ่ง: แนวตั้ง
• การจัดเรียงตัวแบ่ง: ด้านบนของเนื้อหาส่วน

ตัวแบ่งด้านล่าง

ในทำนองเดียวกัน เพิ่มตัวแบ่งด้านล่างด้วย:

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: #ffffff
• ความสูงของตัวแบ่ง: 236px
• การจัดเรียงตัวแบ่ง: ด้านบนของเนื้อหาส่วน

ระยะห่าง

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

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

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

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

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

ขนาด

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

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

ระยะห่าง

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

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

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

สีพื้นหลัง

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

• สีพื้นหลัง: rgba(176,182,219,0.34)

ตัวแบ่งสี

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

• ตัวแบ่งสี: #ffffff

สไตล์ตัวแบ่ง

จากนั้นไปที่การตั้งค่าสไตล์และใช้รูปแบบตัวแบ่งดังต่อไปนี้:

• รูปแบบตัวแบ่ง: Double

ตัวแบ่งน้ำหนัก

น้ำหนักของตัวแบ่งควรเป็นดังนี้:

• น้ำหนักตัวแบ่ง: 18px

ระยะห่าง

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

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

โมดูลตัวแบ่งโคลน & วางในคอลัมน์ 2

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

เปลี่ยนสีพื้นหลัง

เปลี่ยนสีพื้นหลังของรายการที่ซ้ำกันนี้:

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

Clone Divider Module #1 และวางในคอลัมน์ 3 & 5

ดำเนินการต่อโดยโคลนโมดูลตัวแบ่งสีม่วงสองครั้ง และวางรายการที่ซ้ำกันในคอลัมน์ 3 และ 5

Clone Divider Module #2 และวางในคอลัมน์ 4

โคลนโมดูลตัวแบ่งสีเขียวด้วย และวางสำเนาในคอลัมน์ 4

ซ่อนโมดูลตัวแบ่งในคอลัมน์ 3, 4 และ 5 บนแท็บเล็ตและโทรศัพท์

ซ่อนบนแท็บเล็ตและโทรศัพท์

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

คัดลอกรูปแบบการมองเห็น

คัดลอกลักษณะการมองเห็นเหล่านี้

วางรูปแบบการมองเห็น

และวางลงในโมดูลตัวแบ่งในคอลัมน์ 4 และ 5

การเปลี่ยนมาตรา #3

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

ค้นหา

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

ตัวแบ่งด้านบน

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

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: #ffffff
• ความสูงของตัวแบ่ง: 150px
• การจัดเรียงตัวแบ่ง: ด้านบนของเนื้อหาส่วน

ตัวแบ่งด้านล่าง

เพิ่มด้านล่างถัดไป:

• รูปแบบตัวแบ่ง: ค้นหาในรายการ
• ตัวแบ่งสี: #ffffff
• ความสูงของตัวแบ่ง: 150px
• พลิกตัวแบ่ง: แนวตั้ง
• การจัดเรียงตัวแบ่ง: ด้านบนของเนื้อหาส่วน

ระยะห่าง

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

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

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

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

แถวที่เราต้องการในส่วนนี้มีโครงสร้างคอลัมน์ดังต่อไปนี้:

ขนาด

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

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

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป:

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

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

ซ่อนตัวแบ่ง

ดำเนินการต่อโดยเพิ่มโมดูลตัวแบ่งในคอลัมน์แรก ปิดใช้งานตัวเลือก 'แสดงตัวแบ่ง'

สีพื้นหลัง

เพิ่มสีพื้นหลังให้กับตัวแบ่งแทน:

• สีพื้นหลัง: rgba(176,182,219,0.34)

ระยะห่าง

เพิ่มขนาดของโมดูลโดยใช้ช่องว่างภายในด้านบนและด้านล่าง:

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

โมดูลตัวแบ่งโคลน & วางในคอลัมน์ 2

เปลี่ยนสีพื้นหลัง

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

• สีพื้นหลัง: rgba(228,237,234,0.58)

Clone Divider Module #1 และวางในคอลัมน์ 3 & 5

โคลนโมดูลตัวแบ่งสีม่วงสองครั้งแล้ววางลงในคอลัมน์ 3 และ 5

Clone Divider Module #2 และวางในคอลัมน์ 4

โคลนโมดูลตัวแบ่งสีเขียวด้วย และวางสำเนาในคอลัมน์ 4

ซ่อนโมดูลตัวแบ่งในคอลัมน์ 3, 4 และ 5 บนแท็บเล็ตและโทรศัพท์

ซ่อนบนแท็บเล็ตและโทรศัพท์

ซ่อนโมดูลตัวแบ่งในคอลัมน์ 3 บนแท็บเล็ตและโทรศัพท์

คัดลอกรูปแบบการมองเห็น

คัดลอกลักษณะการมองเห็นเหล่านี้

วางรูปแบบการมองเห็น

และวางบนโมดูลตัวแบ่งในคอลัมน์ 4 และ 5 และทำเสร็จแล้ว!

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว เรามาดูตัวอย่างสุดท้ายที่เราสร้างขึ้นมาสามตัวอย่างกัน

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

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