วิธีสร้างเค้าโครงกริดสำหรับโมดูล Divi ด้วย CSS

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

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

ดูตัวอย่างผลสุดท้าย

ก่อนเริ่ม มาดูกันว่าคุณจะสามารถทำอะไรได้บ้างเมื่อสิ้นสุดบทช่วยสอนนี้

การสร้างเค้าโครงตาราง CSS ที่กำหนดเองสำหรับโมดูล Divi

ส่วนที่ 1: การเพิ่มโมดูลลงในคอลัมน์ Divi

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

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

การสร้างโมดูล

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

1. เพิ่มหัวเรื่อง H2 เหนือข้อความย่อหน้า
2. สีพื้นหลัง: #444444

นอกจากนี้ เราจะอัปเดตการตั้งค่าการออกแบบดังนี้:

1. แบบอักษรของข้อความ: Poppins
2. สีข้อความ: เบา
3. เลือกแท็บ H2 ภายใต้ Heading Text
4. ส่วนหัว 2 รูปแบบตัวอักษร: TT
5. เบาะ: 10% บน, 10% ล่าง, 10% ซ้าย 10% ขวา

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

สลับไปที่มุมมองเลเยอร์และสร้างโมดูลข้อความถัดไปดังนี้:

1. ทำซ้ำโมดูลข้อความ
2. เปิดการตั้งค่าข้อความสำหรับโมดูลที่ซ้ำกัน
3. อัปเดตสีพื้นหลัง
   • สีพื้นหลัง: #4c6085

คุณสามารถทำขั้นตอนนี้ซ้ำเพื่อสร้างโมดูลข้อความที่สามได้ดังนี้:

1. ทำซ้ำโมดูลข้อความก่อนหน้า
2. เปิดการตั้งค่าข้อความสำหรับโมดูลที่ซ้ำกัน
3. อัปเดตสีพื้นหลัง
   • สีพื้นหลัง: #39a0ed

เราจะทำขั้นตอนนี้ซ้ำอีกครั้งเพื่อสร้างโมดูลข้อความที่สี่ดังนี้:

1. ทำซ้ำโมดูลข้อความก่อนหน้า
2. เปิดการตั้งค่าข้อความสำหรับโมดูลที่ซ้ำกัน
3. อัปเดตสีพื้นหลัง
   • สีพื้นหลัง: #13c4a3

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

ส่วนที่ 2: มาสร้าง CSS Grid Layout สำหรับโมดูลกันเถอะ

เมื่อเพิ่มโมดูลทั้งหมดแล้ว มาสร้างกริดสำหรับโมดูลเหล่านั้นกัน

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

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

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

• ความกว้างของรางน้ำ: 1
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%

การเพิ่ม CSS Grid ให้กับคอลัมน์เพื่อสร้าง Grid Layout สำหรับโมดูล

นี่เป็นขั้นตอนสำคัญในบทช่วยสอนที่สร้างเลย์เอาต์สำหรับโมดูลโดยใช้คุณสมบัติ CSS Grid

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

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

display:grid;grid-template-columns: 25% 25% 25% 25%;grid-auto-rows: auto;

บรรทัดแรกของ CSS จะแสดงเนื้อหา (หรือโมดูล) ตาม โมดูลกริด CSS

display:grid

ในบรรทัดที่สองของ CSS เราจะกำหนดเทมเพลตคอลัมน์ของกริด ในกรณีนี้ ตารางของเราจะมีสี่คอลัมน์ที่มีความกว้าง 25%

ตารางเทมเพลตคอลัมน์: 25% 25% 25% 25%

บรรทัดที่สามกล่าวถึงแถวที่จะสร้างขึ้นโดยอัตโนมัติ ซึ่งหมายความว่าความสูงของแต่ละแถวจะถูกกำหนดโดยความสูงแนวตั้งของเนื้อหา (หรือโมดูล) ภายในแถว

กริดอัตโนมัติแถว: auto

ปรับเค้าโครงกริดบนมือถือ

ตอนนี้ เรายังต้องปรับเค้าโครงกริดบนอุปกรณ์มือถือตามต้องการ

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

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

มาเปิดตัวเลือกการตอบสนองและเลือกแท็บแท็บเล็ตภายใต้องค์ประกอบหลักแล้ววาง CSS ต่อไปนี้:

display:grid;grid-template-columns: 50% 50%;grid-auto-rows: auto;

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

display:grid;grid-template-columns: 100%;grid-auto-rows: auto;

ส่วนที่ 3: การเปลี่ยนแปลงโมดูลกริด

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

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

วิธีที่ Grid ตอบสนองต่อโมดูลที่มีเนื้อหาต่างกัน

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

การเปลี่ยนตำแหน่งของโมดูลบนกริด

รายการของกริด CSS สามารถวางตำแหน่งได้โดยใช้ระบบการกำหนดหมายเลขในตัวบนโมดูลกริด แต่ละบรรทัดในตารางแสดงถึงตัวเลข สำหรับคอลัมน์ หมายเลขบรรทัดเริ่มต้นที่ 1 และดำเนินการต่อในแนวนอน หมายเลขบรรทัดแต่ละบรรทัดอยู่ที่จุดเริ่มต้นและจุดสิ้นสุดของแต่ละคอลัมน์ ดังนั้น สำหรับโครงสร้างคอลัมน์ของเรา หมายเลขบรรทัดเริ่มจาก 1 ทางด้านซ้ายของคอลัมน์แรก และสิ้นสุดที่ 5 ทางด้านขวาของคอลัมน์ที่สี่ และเนื่องจากเรามีสามแถว หมายเลขบรรทัดสำหรับแถวจึงเริ่มต้นที่ 1 ที่ด้านบนสุดของแถวแรกและจนถึง 4 ที่ด้านล่างสุดของแถวที่สาม

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

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

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

grid-column: 2/4;grid-row: 2/3;

บรรทัดแรกของ CSS กำหนดตำแหน่งของโมดูลในแนวนอนโดยบอกให้โมดูลเริ่มต้นในคอลัมน์บรรทัดที่ 2 และสิ้นสุดที่บรรทัดของคอลัมน์ 4

ตารางคอลัมน์: 2/4

บรรทัดที่สองของ CSS กำหนดตำแหน่งของโมดูล (หรือรายการกริด) ในแนวตั้งโดยบอกให้โมดูลเริ่มต้นที่บรรทัดที่ 2 และสิ้นสุดที่บรรทัดที่ 3

ตารางแถว: 2/3

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

ดังนั้นให้เลือกแท็บแท็บเล็ตภายใต้ตัวเลือกการตอบสนองสำหรับองค์ประกอบหลักและวาง CSS ต่อไปนี้:

grid-column: auto;grid-row: auto;

ตอนนี้ตำแหน่งของโมดูลจะกลับไปที่โฟลว์เดิม (อัตโนมัติ) ของรายการกริด

ไปข้างหน้าและวางตำแหน่งโมดูลอีกสองสาม (หรือรายการกริด) โดยใช้วิธีนี้

ตอนนี้ เราจะวางตำแหน่งโมดูลข้อความที่สาม (ตอนนี้อยู่ในคอลัมน์ที่สองของแถวบนสุด) ที่ตำแหน่งชุดใหม่ภายในกริด ตำแหน่งใหม่นี้จะเริ่มต้นที่คอลัมน์บรรทัดที่ 1 และสิ้นสุดในคอลัมน์บรรทัดที่ 2 และเริ่มต้นที่แถวบรรทัดที่ 2 และสิ้นสุดที่แถวที่ 4

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

grid-column: 1/2;grid-row: 2/4;

ตอนนี้เราสามารถเปลี่ยนตำแหน่งสำหรับอุปกรณ์เคลื่อนที่โดยเพิ่ม CSS สำหรับแท็บเล็ตต่อไปนี้:

grid-column: auto;grid-row: auto;

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

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

grid-column: 4/5;grid-row: 2/4;

ตอนนี้วาง CSS ต่อไปนี้สำหรับการแสดงผลแท็บเล็ต

grid-column: auto;grid-row: auto;

การจัดแนวเนื้อหาโมดูล (หรือรายการกริด) ให้อยู่ตรงกลาง

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

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

display:flex;flex-direction:column;align-items:center;justify-content:center;

ตอนนี้เราสามารถกลับไปที่โมดูลอื่นๆ อีกสามโมดูล (โมดูล #1, #3 และ #7) ทีละรายการ และเพิ่มข้อมูลโค้ด CSS เดียวกันนอกเหนือจาก CSS ที่ใช้เพื่อให้โมดูลมีตำแหน่งที่กำหนดเองบนกริด ตรวจสอบให้แน่ใจว่าได้เพิ่มข้อมูลโค้ด CSS ภายใต้ CSS ที่มีอยู่สำหรับทั้งเดสก์ท็อปและแท็บเล็ต

ผลสุดท้าย

นี่คือสิ่งที่เราทำจนถึงตอนนี้ดูเหมือน

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

ตัวอย่างจริงโดยใช้โมดูลและการออกแบบที่แตกต่างกัน

หากคุณต้องการดูตัวอย่างจริงโดยใช้ระบบกริดนี้ คุณสามารถใช้โมดูลต่างๆ ได้ นี่คือสิ่งที่คุณสามารถสร้างโดยใช้เทคนิคนั้น มีอยู่ใน Fitness Gym Layout Pack

ในทั้งหมดของคุณตอนนี้

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

เรายินดีที่จะดูว่าคุณประสบความสำเร็จเพียงใดในส่วนความคิดเห็น