5 เคล็ดลับสำหรับการจัดระเบียบเนื้อหาหน้าบล็อกใน Divi

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

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

1. วิธีสร้างเค้าโครงสองคอลัมน์
2. วิธีใช้โพสต์ติดหนึบ
3. วิธีใช้การชดเชยโพสต์
4. วิธีใช้โมดูลบล็อกหลายโมดูลเพื่อสร้างเค้าโครงแบบกำหนดเองสำหรับโพสต์ในบล็อก
5. วิธีแสดงกระทู้ล่าสุดตามหมวดหมู่

แอบมอง

ต่อไปนี้คือวิธีการบางอย่างที่เราจะจัดระเบียบเนื้อหาของหน้าบล็อกใน Divi

การใช้เค้าโครงสองคอลัมน์

ส่วนโพสต์เด่นเหนือฟีดบล็อกหลัก

แถบเลื่อนโพสต์แบบเต็มความกว้างเหนือฟีดบล็อกหลัก

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

นำเสนอกระทู้ล่าสุดตามหมวดหมู่

สิ่งที่คุณต้องการเพื่อเริ่มต้น

หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi

สำหรับบทช่วยสอนนี้ ฉันจะใช้เทมเพลตหน้าหมวดหมู่ Second Theme Builder Pack หากคุณต้องการใช้เพื่อติดตาม ให้ดาวน์โหลดแพ็คและนำเข้าไฟล์ divi-theme-builder-pack-2-category-page-template.json ไปยังตัวสร้างธีมโดยใช้ตัวเลือกการพกพา

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

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

ตอนนี้คุณสามารถใช้ตัวแก้ไขเค้าโครงเพื่อแก้ไขเค้าโครงได้

5 เคล็ดลับสำหรับการจัดระเบียบเทมเพลตหน้าบล็อกใน Divi

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

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

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

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

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

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

width: 100% !important;

ซึ่งจะทำให้คอลัมน์ขยายเต็มความกว้างของแถว

ตอนนี้สิ่งที่เราต้องทำคือซ่อนคอลัมน์ทางด้านขวา เปิดการตั้งค่าสำหรับคอลัมน์ 2 (คอลัมน์ว่าง) และปิดการมองเห็นคอลัมน์บนอุปกรณ์ทั้งหมด

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

#2 ใช้โพสต์ติดหนึบ

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

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

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

เมื่อคุณไปที่หน้าบล็อก คุณจะเห็นว่าโพสต์ที่ติดหนึบกระโดดไปที่ด้านหน้าของฟีดโพสต์บล็อก

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

ก่อนที่คุณจะไปยังเคล็ดลับถัดไป ฉันแนะนำให้คุณกำจัดโพสต์ที่ติดหนึบ

#3 ใช้ Post Offsets เพื่อจัดระเบียบเนื้อหาของหน้าบล็อกออกเป็นส่วนๆ

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

นำเสนอโพสต์ล่าสุดด้วยโมดูลบล็อกแยกต่างหากโดยใช้ Post Offset

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

เพิ่มส่วนปกติใหม่ให้กับเค้าโครง

จากนั้นเพิ่มแถวหนึ่งคอลัมน์

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

อัปเดตการตั้งค่าบล็อกดังนี้:

• จำนวนโพสต์: 3
• แสดงปุ่มอ่านเพิ่มเติม: ไม่
• แสดงหมวดหมู่: NO
• แสดงจำนวนความคิดเห็น: NO
• แสดงข้อความที่ตัดตอนมา: NO
• แสดงการแบ่งหน้า: NO

เราจะมีสามโพสต์ล่าสุดที่แสดงในส่วนบนของหน้า

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

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

• โพสต์จำนวนออฟเซ็ต: 3

ตอนนี้ฟีดบล็อกจะเริ่มต้นด้วยโพสต์ #4

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

นี่คือตัวอย่างของสิ่งที่จะมีลักษณะ

การเพิ่มแถบเลื่อนโพสต์แบบเต็มความกว้างเหนือฟีดบล็อกหลัก

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

นี่คือวิธีการทำ

ขั้นแรก เพิ่มส่วนเต็มความกว้างให้กับเค้าโครง

จากนั้นเพิ่มโมดูลตัวเลื่อนโพสต์แบบเต็มความกว้างในส่วน

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

• โพสต์สำหรับหน้าปัจจุบัน: ใช่
• จำนวนโพสต์: 3

จากนั้นอัปเดตการออกแบบของแถบเลื่อนโพสต์ให้ตรงกับเค้าโครงดังนี้:

• แบบอักษรของชื่อเรื่อง: Lato
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ขนาดข้อความชื่อเรื่อง: 40px
• ขนาดข้อความเนื้อหา: 16px
• ขนาดข้อความของปุ่ม: 14px
• สีข้อความของปุ่ม: #ff0071
• สีพื้นหลังของปุ่ม: #ffffff
• ความกว้างของขอบปุ่ม: 0px
• แบบอักษรของปุ่ม: Lato
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: TT

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

จากนั้นตรวจสอบผลลัพธ์

ดูดีจนถึงตอนนี้

ตอนนี้ มาดูแนวคิดในการใช้โมดูลบล็อกที่แยกจากกันไปอีกขั้นด้วยเคล็ดลับถัดไปนี้

#4 การเพิ่มโมดูลบล็อกหลายโมดูลแต่ละรายการด้วยโพสต์เดียว

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

นี่คือวิธีการทำ

ขั้นแรก เพิ่มแถวคอลัมน์ครึ่งครึ่งใหม่เหนือแถวที่มีโมดูลบล็อกหลัก

คัดลอกโมดูลบล็อกเดิมด้านล่างแล้ววางลงในคอลัมน์ด้านซ้ายของแถวใหม่ จากนั้นอัปเดตสิ่งต่อไปนี้:

• จำนวนโพสต์: 1
• โพสต์จำนวนออฟเซ็ต: 0
• แสดงการแบ่งหน้า: NO

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

จากนั้นอัปเดตสิ่งต่อไปนี้:

• โพสต์จำนวนออฟเซ็ต: 1
• แสดงรูปภาพเด่น: NO
• แสดงจำนวนความคิดเห็น: NO
• แสดงข้อความที่ตัดตอนมา: NO

ตรวจสอบให้แน่ใจว่าได้ตั้งค่าโพสต์ออฟเซ็ตเป็น 1 เพื่อข้ามอันแรกในคอลัมน์ด้านซ้าย

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

ทำซ้ำโมดูลบล็อกในคอลัมน์ด้านขวา

แล้วเปลี่ยนเลขออฟเซ็ตโพสต์เป็น 2

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

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

นี่คือผลลัพธ์

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

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

#5 แสดงโพสต์ล่าสุดตามหมวดหมู่บนหน้าบล็อก

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

นี่คือวิธีการทำ

ขั้นแรก เพิ่มแถวหนึ่งคอลัมน์ใหม่ใต้แถวที่มีโมดูลบล็อกหลัก

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

• โพสต์สำหรับหน้าปัจจุบัน: NO
• ประเภทกระทู้: กระทู้
• จำนวนโพสต์: 3
• หมวดหมู่ที่รวม: ธุรกิจ (หรือของคุณเอง)

ซึ่งจะแสดงสามโพสต์ล่าสุดจากหมวดธุรกิจ

จากนั้นเพิ่มโมดูลข้อความเหนือโมดูลบล็อกด้วยชื่อหมวดหมู่ที่เกี่ยวข้อง

และเช่นเดียวกับที่คุณมีส่วนหมวดหมู่เด่นในหน้าบล็อกของคุณ ซึ่งเป็นวิธีที่ยอดเยี่ยมในการจัดระเบียบเนื้อหาของหน้าบล็อก!

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

ส่วนหมวดหมู่เด่นเหล่านี้พอดีที่ด้านล่างของเทมเพลตหน้าบล็อก

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

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

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

ไชโย!