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

เผยแพร่แล้ว: 2022-01-23

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

1. การออกแบบเทมเพลตโพสต์บล็อก

ออกแบบเทมเพลตโพสต์บล็อก

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

ดูบทช่วยสอน

2. การเพิ่ม CTA ของ Sticky Sidebar ให้กับเทมเพลตบล็อกโพสต์

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

ดูบทช่วยสอน

3. การสร้างเทมเพลตโพสต์บล็อกที่เป็นมิตรกับ UX แบบไดนามิก

สร้างเทมเพลตโพสต์บล็อกที่เป็นมิตรกับ UX แบบไดนามิก

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

ดูบทช่วยสอน

4. จัดแต่งทรงผมโมดูลความคิดเห็นของ Divi ภายในเทมเพลตโพสต์บล็อก

โมดูลความคิดเห็นของ Style Divi ภายในเทมเพลตโพสต์บล็อก

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

ดูบทช่วยสอน

5. การออกแบบกล่องผู้แต่งแบบไดนามิกสำหรับเทมเพลตโพสต์บล็อกของคุณ

ออกแบบกล่องผู้แต่งแบบไดนามิกสำหรับเทมเพลตโพสต์บล็อกของคุณ

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

ดูบทช่วยสอน

6. การสร้างเทมเพลตการโพสต์บล็อกแถบด้านข้างสองด้าน

ดาวน์โหลดเทมเพลตการโพสต์บล็อกแถบด้านข้างสองด้านฟรี

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

ดูบทช่วยสอน

7. การสร้างแถบข้อมูลโพสต์แบบไดนามิกสำหรับเทมเพลตโพสต์บล็อกของคุณ

สร้างแถบข้อมูลโพสต์แบบไดนามิกสำหรับเทมเพลตโพสต์บล็อกของคุณ

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

ดูบทช่วยสอน

8. รวมแถบด้านข้างแบบเต็มความสูงในเทมเพลตโพสต์บล็อกของคุณ

รวมแถบด้านข้างแบบเต็มความสูงในเทมเพลตโพสต์บล็อกของคุณ

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

ดูบทช่วยสอน

9. การสร้างเทมเพลตโพสต์บล็อกแบบแบ่งหน้าจอ

แยกหน้าจอเทมเพลตโพสต์บล็อกของคุณ

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

ดูบทช่วยสอน

10. การสร้างแถบด้านข้างแบบติดหนึบสำหรับเทมเพลตโพสต์บล็อกของคุณ

สร้างแถบด้านข้างแบบติดหนึบสำหรับเทมเพลตโพสต์บล็อกของคุณ

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

ดูบทช่วยสอน

11. การสร้างความคิดเห็นสลับสำหรับเทมเพลตโพสต์บล็อกของคุณ

สร้างความคิดเห็นสลับสำหรับเทมเพลตโพสต์บล็อกของคุณ

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

ดูบทช่วยสอน

12. รวมรูปภาพเด่นแบบเต็มความกว้างในเทมเพลตโพสต์บล็อกของคุณ

รวมรูปภาพเด่นแบบเต็มความกว้างในเทมเพลตโพสต์บล็อกของคุณ

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

ดูบทช่วยสอน

13. การใช้เทมเพลตการโพสต์บล็อกที่แตกต่างกันสำหรับหมวดหมู่ต่างๆ

ใช้เทมเพลตการโพสต์บล็อกที่แตกต่างกันสำหรับหมวดหมู่ต่างๆ

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

ดูบทช่วยสอน

14. การกำหนดเทมเพลตการโพสต์บล็อกที่แตกต่างกันให้กับโพสต์เฉพาะ

กำหนดเทมเพลตการโพสต์บล็อกที่แตกต่างกันให้กับโพสต์เฉพาะ

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

ดูบทช่วยสอน

15. การเพิ่มโพสต์ที่เกี่ยวข้องไปยังเทมเพลตโพสต์บล็อกของคุณ

เพิ่มโพสต์ที่เกี่ยวข้องไปยังเทมเพลตโพสต์บล็อกของคุณ

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

ดูบทช่วยสอน

16. การใช้โมดูลเนื้อหาโพสต์ในตัวสร้างธีม

ใช้โมดูลเนื้อหาโพสต์ในตัวสร้างธีม

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

ดูบทช่วยสอน

17. การเพิ่มฮีโร่แบบเต็มหน้าจอให้กับเทมเพลตโพสต์บล็อก Divi ของคุณ

วิธีเพิ่มฮีโร่แบบเต็มหน้าจอให้กับเทมเพลตโพสต์บล็อก Divi ของคุณ

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

ดูบทช่วยสอน

18. รวมข้อมูลเมตาในเทมเพลตโพสต์บล็อกของคุณ

วิธีรวมข้อมูลเมตาในเทมเพลตโพสต์บล็อกของคุณ

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

ดูบทช่วยสอน

19. รวมการนำทางโพสต์ในเทมเพลตโพสต์บล็อก Divi ของคุณ

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

ดูบทช่วยสอน

วิธีค้นหาเทมเพลตการโพสต์บล็อกฟรีสำหรับ Divi

วิธีค้นหาเทมเพลตการโพสต์บล็อกฟรีสำหรับ Divi

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

จบความคิด

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

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