วิธีเปลี่ยนจำนวนคอลัมน์ในโมดูลบล็อก Divi

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

แอบมอง

ต่อไปนี้คือภาพรวมคร่าวๆ เกี่ยวกับการออกแบบที่เราจะสร้างในบทช่วยสอนนี้

และนี่คือ codepen ที่แสดงให้เห็นถึง CSS Grid Layout ที่เราจะเพิ่มลงในโมดูลบล็อก

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

สมัครสมาชิกช่อง Youtube ของเรา

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

คลิกปุ่มนำเข้า

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

ไปที่บทช่วยสอนกันเถอะ

วิธีการเปลี่ยนจำนวนคอลัมน์ในโมดูลบล็อก Divi โดยใช้ CSS Grid

ทำไมต้อง CSS Grid?

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

ตอนนี้ ให้เราหันมาสนใจโมดูลบล็อกกัน

การตั้งค่าโมดูลบล็อกด้วยเค้าโครงแบบเต็มความกว้าง

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

สำหรับบทช่วยสอนนี้ เราจะใช้เทมเพลตหน้าบล็อกที่สร้างไว้ล่วงหน้าจากชุดเลย์เอาต์ฟรีของเราที่มีโมดูลบล็อกพร้อมสไตล์พื้นฐานอยู่แล้ว ในการโหลดเค้าโครงหน้าบล็อกที่สร้างไว้ล่วงหน้าไปยังหน้าของคุณ ให้เปิดเมนูการตั้งค่าที่ด้านล่างและเปิดป๊อปอัป "เพิ่มจากไลบรารี" จากนั้นค้นหาและค้นหาเลย์เอาต์ของ Fashion Design Blog Page และโหลดลงในเพจ

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

ตั้งจำนวนโพสต์

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

• จำนวนโพสต์: 10

เลือกเค้าโครงเต็มความกว้าง

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

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

ตอนนี้โพสต์บล็อกแต่ละรายการควรมีความกว้างเต็มคอลัมน์ (หรือคอนเทนเนอร์หลัก)

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

• ความกว้างของเส้นขอบ: 1px
• เส้นขอบสี: rgba(150,104,70,0.35)

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

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

• CSS คลาส: et-blog-css-grid

การสร้างเค้าโครงหลายคอลัมน์ด้วย CSS Grid

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

เพิ่มโมดูลโค้ดใหม่ภายใต้โมดูลบล็อก

ในช่องป้อนโค้ด ให้เพิ่มแท็ก รูปแบบ ที่จำเป็นเพื่อห่อโค้ด CSS ใดๆ ที่เพิ่มลงในเพจ

ภายในแท็ก สไตล์ ให้วางส่วนย่อยของ CSS ต่อไปนี้:

.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

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

แสดง:กริด;

บรรทัดที่สองของ CSS กำหนดเทมเพลตคอลัมน์ของกริด

grid-template-columns: ทำซ้ำ (เติมอัตโนมัติ, minmax(200px, 1fr));

บรรทัดที่สามกำหนดช่องว่างระหว่างรายการกริด (เช่น ความกว้างของรางน้ำ)

ช่องว่าง: 20px;

คอลัมน์กริด CSS ทำงานอย่างไร

ในกรณีนี้ กริดจะเพิ่มคอลัมน์ซ้ำๆ ตามความจำเป็นเพื่อเติมพื้นที่ว่างที่เหลือของคอนเทนเนอร์กริด แต่ละคอลัมน์จะมีความกว้างขั้นต่ำ 200px และความกว้างสูงสุด 1fr (ซึ่งเหมือนกับอัตโนมัติทุกประการ) ซึ่งหมายความว่าเมื่อคอนเทนเนอร์หลัก (แถว/คอลัมน์ Divi) อยู่ที่ความกว้างสูงสุด 1080px ตารางจะมี 5 คอลัมน์ แต่ละคอลัมน์จะมีความกว้าง 200px (ความกว้างขั้นต่ำ) ซึ่งเท่ากับ 1000px เพิ่มช่องว่าง 4 กริด 20px แล้วคุณจะได้ทั้งหมด 1080px เมื่อวิวพอร์ตบีบกริดที่ต่ำกว่า 1080px ความมหัศจรรย์ของ CSS Grid จะเข้ามาแทนที่และเติมพื้นที่ว่างด้วยโพสต์บล็อกจนกว่าจะมีความกว้าง 200px แถวใหม่จะถูกสร้างขึ้นโดยอัตโนมัติเมื่อจำเป็นตามค่าเริ่มต้น

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

นี่คือ codepen ที่แสดงให้เห็นถึงฟังก์ชัน CSS Grid Layout ที่เราเพิ่มไว้ที่นี่

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

นี่คือผลลัพธ์จนถึงตอนนี้

จัดรูปแบบการ์ดโพสต์บล็อก (หรือรายการกริด)

ต่อไป เราสามารถเพิ่ม 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;
}

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

ด้วยช่องว่างภายในด้านบน 56.25% เราควรได้อัตราส่วนภาพ 16:9 สำหรับรูปภาพทั้งหมดของเรา

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

ผลสุดท้าย

นี่คือภาพรวม CSS ทั้งหมดที่เราเพิ่มลงในโมดูลโค้ดพร้อมความคิดเห็นบางส่วน

/* create css grid column template */
.et-blog-css-grid > div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
/* style css grid item or blog post */
.et-blog-css-grid .et_pb_post {
  align-self: start;
  padding: 15px;
}

/* remove pagination from blog module grid with absolute position */
.et-blog-css-grid > div > div {
  width: 100%;
  position: absolute;
  bottom: 0;
  transform: translate(0%, 150%);
}

/* Resize Featured Image Thumbnails */
.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;
}

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

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!