การใช้โครงร่างคอลัมน์เพื่อเน้นตารางการออกแบบ Divi ของคุณ

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเค้าโครงโครงร่างคอลัมน์ฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

ล้น

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

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

เพิ่มแถว #1

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

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

ขนาด

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

• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• การจัดแนวแถว: ขวา

ระยะห่าง

ต่อไป เราจะดันแถวไปทางด้านขวาของหน้าบนเดสก์ท็อปโดยใช้การตั้งค่าการปรับขนาดแบบกำหนดเอง

• ขอบบน: 200px
• ช่องว่างภายในด้านซ้าย: 47% (เดสก์ท็อป), 6% (แท็บเล็ต), 10% (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 6% (แท็บเล็ต), 10% (โทรศัพท์)

ชายแดน

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

• ความกว้างขอบบนและล่าง: 4px
• สีขอบบนและล่าง: #bdffed

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

ระยะห่าง

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

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

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

ระยะห่าง

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

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

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

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

ถึงเวลาเพิ่มโมดูล เริ่มต้นด้วยโมดูลข้อความที่มีเนื้อหา H2 ในคอลัมน์ 1

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

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

• แบบอักษรของหัวเรื่อง 2: Source Code Pro
• ส่วนหัว 2 น้ำหนักแบบอักษร: ตัวหนา
• หัวเรื่อง 2 สีข้อความ: rgba(35,38,211,0.46)
• ขนาดข้อความของหัวเรื่อง 2: 4vw (เดสก์ท็อป), 60px (แท็บเล็ต), 50px (โทรศัพท์)
• หัวเรื่อง 2 ระยะห่างตัวอักษร: 5px

• หัวเรื่อง 2 ข้อความเงา ความยาวแนวนอน: 0.05em
• หัวเรื่อง 2 Text Shadow ความยาวแนวตั้ง: 0.07em
• หัวเรื่อง 2 สีเงาข้อความ: #bdffed

การเคลื่อนไหวในแนวตั้ง

เราจะเพิ่มการเคลื่อนไหวในแนวตั้งด้วย

• เปิดใช้งานการเคลื่อนไหวในแนวตั้ง: ใช่
• ออฟเซ็ตเริ่มต้น: 2
• ออฟเซ็ตกลาง: 0
• ออฟเซ็ตสิ้นสุด: -2
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: กลางองค์ประกอบ

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

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

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

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

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

• แบบอักษรข้อความ: Source Code Pro
• สีข้อความ: rgba(35,38,211,0.76)
• ขนาดตัวอักษร: 15px
• ความสูงของบรรทัดข้อความ: 2em

การเคลื่อนไหวในแนวตั้ง

เราจะใช้การเคลื่อนไหวในแนวตั้งสำหรับโมดูลนี้ด้วย

• เปิดใช้งานการเคลื่อนไหวในแนวตั้ง: ใช่
• ออฟเซ็ตเริ่มต้น: 2
• ออฟเซ็ตกลาง: 0
• ออฟเซ็ตสิ้นสุด: -2
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: กลางองค์ประกอบ

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

เพิ่มสำเนา

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

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

ไปที่แท็บการออกแบบของโมดูลและจัดรูปแบบปุ่มดังนี้:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• สีข้อความของปุ่ม: #2326d3
• รัศมีเส้นขอบของปุ่ม: 0px

• แบบอักษรของปุ่ม: Source Code Pro
• แสดงไอคอนปุ่ม: ใช่
• ตำแหน่งไอคอนปุ่ม: ซ้าย
• แสดงเฉพาะไอคอนเมื่อวางเมาส์เหนือปุ่ม: ไม่

ระยะห่าง

จากนั้น เพิ่มค่าการเติมที่กำหนดเอง

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

การเคลื่อนไหวในแนวตั้ง

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

• เปิดใช้งานการเคลื่อนไหวในแนวตั้ง: ใช่
• ออฟเซ็ตเริ่มต้น: 2
• ออฟเซ็ตกลาง: 0
• ออฟเซ็ตสิ้นสุด: -2
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: กลางองค์ประกอบ

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

อัพโหลดภาพอัตราส่วน 1:1

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

ขนาด

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

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

ชายแดน

เราจะเปลี่ยนรูปภาพให้เป็นวงกลมโดยการเพิ่มมุมโค้งมนต่อไป

• ทุกมุม: 50vw

กล่องเงา

จากนั้นเราจะเพิ่มเงาของกล่อง

• ตำแหน่งแนวนอนของกล่องเงา: 30px
• ตำแหน่งแนวตั้งเงาของกล่อง: 30px
• เงาสี: rgba(38,255,197,0.3)

การเคลื่อนไหวในแนวตั้ง

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

• เปิดใช้งานการเคลื่อนไหวในแนวตั้ง: ใช่
• ออฟเซ็ตเริ่มต้น: -2
• ออฟเซ็ตกลาง: 0
• ออฟเซ็ตสิ้นสุด: 2
• ทริกเกอร์เอฟเฟกต์การเคลื่อนไหว: กลางองค์ประกอบ

โคลนทั้งแถวสองครั้ง

เมื่อคุณทำแถวแรกเสร็จแล้ว คุณสามารถโคลนได้สองครั้ง

เปลี่ยนเนื้อหาและรูปภาพทั้งหมด

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

เพิ่มขอบล่างที่แถวสุดท้าย

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

• ขอบล่าง: 200px

อุทิศแถวใหม่ (ที่ด้านบนของส่วน) ให้กับเค้าร่างคอลัมน์

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

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

ขนาด

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

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

ระยะห่าง

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

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

ตำแหน่ง

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

• ตำแหน่ง: Absolute
• ที่ตั้ง: ท็อปเซ็นเตอร์

ความกว้าง CSS องค์ประกอบหลักของคอลัมน์ทั้งหมด

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

width: 20% !important;

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

ระยะห่าง

จากนั้นเปิดการตั้งค่าคอลัมน์ 1 และแก้ไขค่าการเติมในขนาดหน้าจอต่างๆ

• Padding ยอดนิยม: 150vh (เดสก์ท็อป), 250vh (แท็บเล็ตและโทรศัพท์)
• ช่องว่างภายในด้านล่าง: 150vh (เดสก์ท็อป), 250vh (แท็บเล็ตและโทรศัพท์)

ชายแดน

เพิ่มเส้นขอบด้านซ้ายด้วย

• ความกว้างของเส้นขอบด้านซ้าย: 5px
• สีขอบซ้าย: #bdffed
• รูปแบบเส้นขอบด้านซ้าย: ประ

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

สีพื้นหลัง

ต่อไป เราจะเปิดการตั้งค่าคอลัมน์ 2 และเพิ่มสีพื้นหลัง

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

ชายแดน

เราจะใช้เส้นขอบด้านขวาด้วย

• ความกว้างของเส้นขอบขวา: 4px
• สีขอบขวา: #bdffed
• สไตล์เส้นขอบขวา: ทึบ

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

ชายแดน

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

• ความกว้างของเส้นขอบขวา: 4px
• สีขอบขวา: rgba(35,38,211,0.12)
• รูปแบบเส้นขอบขวา: ประ

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

ชายแดน

จากนั้น เราจะเปิดการตั้งค่าคอลัมน์ 4 และเปลี่ยนการตั้งค่าเส้นขอบตามลำดับ:

• ความกว้างของเส้นขอบขวา: 4px
• สีขอบขวา: #bdffed
• สไตล์เส้นขอบขวา: ทึบ

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

ชายแดน

เราจะทำการตั้งค่าคอลัมน์ให้สมบูรณ์โดยเพิ่มเส้นขอบด้านขวาให้กับคอลัมน์ 5 ด้วย

• ความกว้างของเส้นขอบขวา: 4px
• สีขอบขวา: rgba(35,38,211,0.12)
• รูปแบบเส้นขอบขวา: ประ

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

ทัศนวิสัย

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

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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