15+ บทแนะนำโมดูลบล็อกที่น่าทึ่งสำหรับ Divi

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

1. วิธีสร้างหน้าบล็อก

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

ดูบทช่วยสอน

2. 8 การรวมการแสดงองค์ประกอบโพสต์

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

ดูบทช่วยสอน

3. การเปรียบเทียบเค้าโครงบล็อกกริดของ Divi และแบบเต็มความกว้าง

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

ดูบทช่วยสอน

4. วิธีจัดสไตล์การ์ดกริดบล็อก Divi ของคุณ

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

ดูบทช่วยสอน

5. เปลี่ยนโมดูลบล็อกของคุณให้เป็น Carousel ที่ลากได้/รูด

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

ดูบทช่วยสอน

6. วิธีสร้างส่วนรายชื่องานแบบไดนามิก

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

ดูบทช่วยสอน

7. วิธีเพิ่มบทความที่เกี่ยวข้อง

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

ดูบทช่วยสอน

8. มอบรูปลักษณ์ใหม่ให้กับโมดูล Divi Blog

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

ดูบทช่วยสอน

9. วิธีสลับข้อความที่ตัดตอนมาของบล็อกโพสต์บน Hover

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

ดูบทช่วยสอน

10. วิธีจำกัดความยาวของข้อความที่ตัดตอนมา

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

ดูบทช่วยสอน

11. วิธีใช้ Post Offset เพื่อสร้างหน้าบล็อกที่หลากหลาย

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

ดูบทช่วยสอน

12. วิธีใช้โมดูลบล็อกภายในหมวดหมู่หรือหน้าเอกสารเก่า

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

ดูบทช่วยสอน

13. วิธีแสดงโพสต์บล็อกตามหมวดหมู่

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

ดูบทช่วยสอน

14. วิธีปรับแต่งปุ่ม “อ่านเพิ่มเติม”

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

ดูบทช่วยสอน

15. วิธีเปลี่ยนจำนวนคอลัมน์

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

ดูบทช่วยสอน

16. วิธีออกแบบการ์ดลอยน้ำ

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

ดูบทช่วยสอน

17. วิธีการเพิ่มเลขหน้า

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

ดูบทช่วยสอน

18. ทำความเข้าใจกับตัวเลือก “โพสต์สำหรับหน้าปัจจุบัน”

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

ดูบทช่วยสอน

จบความคิดเกี่ยวกับ 15+ บทแนะนำโมดูลบล็อกที่น่าทึ่งสำหรับ Divi

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

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