คุณต้องการแสดงหน้าบล็อก DIVI ของคุณเป็นตารางแบบหลายคอลัมน์หรือไม่
โมดูลบล็อกของ Divi สามารถแสดงโพสต์บล็อกในรูปแบบเต็มความกว้างหรือแบบกริด หากคุณเลือกเค้าโครงกริด จำนวนคอลัมน์สูงสุดที่คุณมีได้คือสามคอลัมน์
ในบทช่วยสอนนี้ ด้วยตัวอย่าง CSS เพียงไม่กี่รายการ บล็อกของคุณ จะกลายเป็นเค้าโครงตารางหลายคอลัมน์ที่สวยงาม นอกจากนี้ คอลัมน์จะราบรื่นและตอบสนองในทุกขนาดเบราว์เซอร์ ดังนั้นคุณจึงไม่ต้องกังวลกับการอัปเดตคำสั่งสื่อหรือการตั้งค่าแบบตอบสนองเหล่านั้น
คุณสามารถปรึกษาบทความของเราเพื่อทราบ วิธีสร้างหน้าบล็อกด้วยโมดูลบล็อก DIVI
การสำรวจ
ก่อนที่จะเข้าสู่บทช่วยสอนนี้ มาดูผลลัพธ์ที่เราต้องการบรรลุก่อน
ดาวน์โหลด DIVI ทันที !!!
การกำหนดค่าโมดูลบล็อกด้วยเค้าโครงแบบเต็มหน้าจอ
โมดูลบล็อกของ DIVI สามารถใช้เพื่อเพิ่มบล็อกได้ทุกที่บน your เว็บไซต์เว็บ. มันทำให้ง่ายต่อการสร้างหน้าบล็อกใน Divi สิ่งที่คุณต้องทำคือเพิ่มโมดูลบล็อกในหน้าโดยใช้ Divi Builder
สำหรับบทช่วยสอนนี้ เราจะใช้เค้าโครงบล็อกที่สร้างไว้ล่วงหน้าจากหนึ่งใน แพ็กเลย์เอาต์ฟรี ของ DIVI ซึ่งมีโมดูลบล็อกที่มีรูปแบบพื้นฐานอยู่แล้ว
ในการโหลดเค้าโครงบล็อกที่สร้างไว้ล่วงหน้า:
- สร้างหน้าใหม่จากแดชบอร์ด WordPress
- ตั้งชื่อที่เกี่ยวข้องแล้วคลิก 'ใช้ Divi Builder'
- คลิกที่ “เลือกเค้าโครง”
- พิมพ์ในแถบค้นหา 'นักออกแบบแฟชั่น' และเลือกเค้าโครง 'หน้าบล็อกของนักออกแบบแฟชั่น'
- ตรวจสอบให้แน่ใจว่าได้เลือกเค้าโครงบล็อกแล้วคลิก "เลือกเค้าโครง"
เมื่อโหลดเลย์เอาต์แล้ว ให้ค้นหาโมดูลบล็อกที่ใช้แสดงโพสต์ในบล็อกและเปิดการตั้งค่า
กำหนดจำนวนโพสต์
ในการตั้งค่าบล็อก ให้อัปเดตไฟล์ เนื้อหา เพื่อจำกัดจำนวนโพสต์ไว้ที่ 10 โพสต์ (นี่เป็นเหตุผลหลักด้านความสวยงาม เนื่องจากตารางของเราจะมีโพสต์ในบล็อกสองแถวจากห้าโพสต์ในที่สุด)
- จำนวนตำแหน่ง: 10
เลือกรูปแบบเต็มหน้าจอ
เนื่องจากเราจะจัดวางบล็อกของเราในคอลัมน์โดยใช้ CSS Grid เราจึงต้องตรวจสอบให้แน่ใจว่าเลย์เอาต์ของโมดูลบล็อกคือ 'เต็มหน้าจอ' (ไม่ใช่ 'กริด') เพื่อให้แน่ใจว่าโพสต์ในบล็อกจะเรียงซ้อนกันในแนวตั้งตามลำดับหน้าปกติ
หากต้องการเปลี่ยนเลย์เอาต์ของโมดูลบล็อก ให้เปิดการตั้งค่าโมดูลและภายใต้แท็บ สไตล์ ให้เปิดเมนูแบบเลื่อนลง เทมเพลตและเลือกเต็มหน้าจอ .
ตอนนี้โพสต์บล็อกแต่ละรายการจะขยายเต็มความกว้างของคอลัมน์ (หรือคอนเทนเนอร์หลัก)
มาเพิ่มเส้นขอบให้กับโพสต์บล็อก อัปเดตตัวเลือกเส้นขอบดังนี้:
- ความกว้างของเส้นขอบ: 1px
- สีขอบ: rgba (150,104,70,0.35)
การเพิ่มคลาส CSS แบบกำหนดเองให้กับโมดูลบล็อก
ในการกำหนดเป้าหมายโมดูลบล็อกนี้อย่างมีประสิทธิภาพ (ไม่ใช่โมดูลอื่น) ด้วย CSS ของเรา เราจำเป็นต้องกำหนดคลาส CSS ที่กำหนดเองให้กับโมดูลของเรา ภายใต้แท็บขั้นสูง เพิ่มคลาส CSS ต่อไปนี้:
- คลาส CSS: et-blog-css-grid
การสร้างเลย์เอาต์แบบหลายคอลัมน์ด้วย CSS Grid
เมื่อโมดูลบล็อกของเราได้รับการตั้งค่าด้วยรูปแบบเต็มหน้าจอแล้ว เราก็พร้อมที่จะเพิ่ม CSS ที่กำหนดเองแล้ว
เราจะแทรกโมดูลโค้ดใต้โมดูลบล็อกเพื่อเพิ่ม CSS ลงในเพจ
ในช่องป้อนโค้ด ให้เพิ่มแท็กรูปแบบที่จำเป็นเพื่อรวมโค้ด CSS ใดๆ ที่เพิ่มลงในเพจ
ภายในแท็กสไตล์ ให้วางข้อมูลโค้ด CSS ต่อไปนี้:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
บรรทัดแรกของ CSS นำเสนอไฟล์ เนื้อหา (หรือโมดูล) ในรูปแบบตาราง
display: grid;บรรทัดที่สองของ CSS กำหนดรูปแบบคอลัมน์กริด
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));แถวที่สามกำหนดระยะห่างระหว่างรายการกริด
gap : 20px ;ณ จุดนี้ ตารางตอบสนองแบบห้าคอลัมน์ก็พร้อมใช้งานแล้ว ที่จริงแล้ว หากคุณไม่ต้องการใช้การแบ่งหน้าหรือเส้นขอบสำหรับโพสต์บล็อกของคุณ คุณสามารถหยุดที่นี่ได้
นี่คือผลลัพธ์จนถึงตอนนี้
ปรับแต่งรายการกริด
จากนั้น เราสามารถเพิ่ม CSS สองสามบรรทัดที่กำหนดเป้าหมายองค์ประกอบกริด เพื่อให้จัดแนวที่ด้านบนสุดของแต่ละแถวและมีช่องว่างภายใน
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
ลบการแบ่งหน้ากริด
ในปัจจุบัน หากคุณมีการแบ่งหน้าบนโมดูลบล็อก จะถือว่าเป็นองค์ประกอบกริดสุดท้ายในกริด CSS ในการลบการแบ่งหน้าออกจากกริดอย่างสมบูรณ์ เราสามารถกำหนดตำแหน่งที่แน่นอนและวางไว้ใต้โมดูลบล็อกได้โดยตรง เมื่อต้องการทำสิ่งนี้ ให้เพิ่ม CSS ต่อไปนี้:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
มาดูผลกันเลยดีกว่า!
เคล็ดลับ: ปรับขนาดของรูปภาพเด่นทั้งหมด (หรือรูปขนาดย่อ)
ณ จุดนี้ คุณอาจสังเกตเห็นความไม่สอดคล้องกันของความสูงของรูปภาพที่แสดงในแต่ละบล็อกโพสต์ หากคุณต้องการให้ความสูงเท่ากัน คุณสามารถใช้ CSS เพิ่มเติมเพื่อทำเช่นนั้นได้
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
ด้วยระยะขอบภายในสูงสุด 56,25% เราควรได้อัตราส่วนภาพ 16:9 สำหรับรูปภาพทั้งหมดของเรา
อย่าลังเลที่จะปรับช่องว่างภายในที่เก็บรูปภาพเพื่อให้ได้อัตราส่วนกว้างยาวที่คุณต้องการสำหรับรูปภาพของคุณ
ผลสุดท้าย
และนี่คือตัวอย่างสุดท้ายของโมดูลบล็อกของเราที่มีคอลัมน์และตารางใหม่ของเรา และอย่างที่เราเห็น กริดตอบสนองได้อย่างเต็มที่
ดาวน์โหลด DIVI ทันที !!!
สรุป
เรียบร้อยแล้ว ! เราได้แสดงให้คุณเห็นในบทช่วยสอนนี้ถึงวิธีการจัดเรียงโพสต์บล็อกของคุณในคอลัมน์
เราสามารถปรับโครงสร้างโมดูล Divi Blog ทั้งหมดให้เป็นเลย์เอาต์แบบห้าคอลัมน์ได้ หวังว่านี่จะช่วยคุณประหยัดเวลาและมีตัวเลือกมากขึ้นในการสร้างหน้าบล็อกที่สวยงาม ปรึกษาได้นะคะ วิธีสร้างหน้าบล็อกด้วยโมดูลบล็อกของ Divi
ดูเพิ่มเติม ทรัพยากรของเราหากคุณต้องการองค์ประกอบเพิ่มเติมเพื่อดำเนินโครงการสร้างเว็บไซต์อินเทอร์เน็ตของคุณโดยปรึกษากับเราใน การสร้างบล็อก WordPress หรือที่อยู่บน Divi: ธีม WordPress ที่ดีที่สุดตลอดกาล.
แต่ในขณะเดียวกัน แบ่งปันบทความนี้ในเครือข่ายโซเชียลต่าง ๆ ของคุณ.
