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 แบบไดนามิก
อันนี้แสดงวิธีสร้างเทมเพลตโพสต์บล็อกที่เน้นที่ประสบการณ์ของผู้ใช้ แสดงวิธีการรวมองค์ประกอบแบบไดนามิกเข้ากับการออกแบบ เทมเพลตที่สร้างในบทช่วยสอนนี้ไม่มีสิ่งรบกวน ทำให้ใช้งานง่ายและสะดวก
ดูบทช่วยสอน
4. จัดแต่งทรงผมโมดูลความคิดเห็นของ 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 ของคุณ
บทช่วยสอนนี้แสดงวิธีการหลายวิธีในการเพิ่มส่วนฮีโร่แบบเต็มหน้าจอให้กับเทมเพลตโพสต์บล็อกของคุณ เมธอดประกอบด้วยโมดูลชื่อโพสต์แบบเต็มหน้าจอ ชื่อเรื่องบนพื้นหลัง และเพิ่มข้อมูลเมตาภายใต้ส่วนฮีโร่ นอกจากนี้ยังแสดงวิธีการเพิ่มการไล่ระดับสีบนภาพฮีโร่
ดูบทช่วยสอน
18. รวมข้อมูลเมตาในเทมเพลตโพสต์บล็อกของคุณ
ข้อมูลนี้แสดงวิธีใช้เนื้อหาแบบไดนามิกเพื่อเพิ่มข้อมูลเมตาในเทมเพลตการโพสต์บล็อกของคุณ มีการกล่าวถึงว่าเนื้อหาแบบไดนามิกทำงานอย่างไรสำหรับข้อมูลมีท และเหตุใดคุณจึงควรใช้เนื้อหาแบบไดนามิกเพื่อแสดงข้อมูลเมตา รวมถึงตัวเลือกการแสดงข้อมูลเมตาต่างๆ
ดูบทช่วยสอน
19. รวมการนำทางโพสต์ในเทมเพลตโพสต์บล็อก Divi ของคุณ
บทช่วยสอนนี้ครอบคลุมโมดูลการนำทางโพสต์ ซึ่งครอบคลุมถึงเหตุผลที่คุณควรใช้การนำทางโพสต์และแสดงตำแหน่งที่ดีที่สุดในการเพิ่มลงในเทมเพลตบล็อกของคุณ โดยแสดงสามวิธีที่แตกต่างกันในการจัดรูปแบบโมดูลเพื่อสร้างลิงก์ข้อความ ปุ่ม และปุ่มสองด้าน
ดูบทช่วยสอน
วิธีค้นหาเทมเพลตการโพสต์บล็อกฟรีสำหรับ Divi
ธีมที่หรูหราได้สร้างเทมเพลตการโพสต์บล็อกฟรีจำนวนมากที่ตรงกับ Divi Layout Packs ฟรี เทมเพลตโพสต์บล็อก Divi ฟรีเหล่านี้ถูกโพสต์ในบล็อก ET เพียงค้นหา "เทมเพลตโพสต์บล็อกฟรี" "เทมเพลตโพสต์บล็อก Divi ฟรี" หรือคีย์เวิร์ดที่คล้ายกัน คุณจะพบกับเทมเพลตโพสต์บล็อกฟรีมากมายให้เลือก
จบความคิด
นั่นคือรูปลักษณ์ของเราที่ 15+ บทแนะนำเทมเพลตโพสต์บล็อก Divi ที่น่าทึ่งสำหรับ Divi บทช่วยสอนมากกว่า 15 รายการเหล่านี้เป็นวิธีที่ยอดเยี่ยมในการเรียนรู้วิธีต่างๆ มากมายในการออกแบบและปรับแต่งเทมเพลตโพสต์บล็อก Divi ของคุณ พวกเขายังให้แนวคิดในการสร้างของคุณเองโดยใช้ Divi Theme Builder หลายคนแสดงวิธีใช้ CSS
เราต้องการที่จะได้ยินจากคุณ คุณเคยใช้บทช่วยสอนเทมเพลตโพสต์บล็อก Divi ที่น่าทึ่งกว่า 15+ รายการหรือไม่? แจ้งให้เราทราบว่าสิ่งใดที่คุณชอบในความคิดเห็น