วิธีออกแบบเทมเพลตบล็อกโพสต์ด้วยตัวสร้างธีมของ Divi (ดาวน์โหลดฟรี)

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

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

เริ่มกันเลย!

แอบมอง

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

คุณอาจสังเกตเห็นความคล้ายคลึงกันของการออกแบบนี้จาก Digital Marketing Layout Pack ของเรา เทมเพลตโพสต์นี้สร้างขึ้นเพื่อให้เข้ากับเลย์เอาต์ เพื่อให้คุณสามารถใช้ร่วมกับ Digital Marketing Layout Pack

สนุก!

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

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงเทมเพลตไปยังเว็บไซต์ของคุณ คุณจะต้องไปที่ Divi Theme Builder และใช้ตัวเลือกการพกพาเพื่อนำเข้าไฟล์ .json ไปยังตัวสร้างธีม

เทมเพลตบล็อกโพสต์คืออะไรและทำไมคุณถึงต้องการ

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

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

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

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

การสร้างบล็อกของเทมเพลตโพสต์บล็อก

เทมเพลตบล็อกโพสต์อาจแตกต่างกันไปขึ้นอยู่กับความต้องการของบล็อก แต่โดยทั่วไป เทมเพลตโพสต์บล็อกจะประกอบด้วยโครงสร้างต่อไปนี้:

• หัวเรื่อง – พื้นที่ด้านบนของโพสต์ที่มักจะมีชื่อโพสต์ รูปภาพเด่น และข้อมูลเมตาของโพสต์ (หมวดหมู่ แท็ก ผู้เขียน วันที่โพสต์ ฯลฯ)
• โพสต์เนื้อหา - เนื้อหาหลักของบทความ
• โพสต์ที่เกี่ยวข้อง – ลิงก์ไปยังบทความอื่นๆ ที่ผู้อ่านอาจสนใจ
• ความคิดเห็น – ส่วนสำหรับให้ผู้ใช้เพิ่มและตอบกลับความคิดเห็นเกี่ยวกับโพสต์
• คำกระตุ้นการตัดสินใจ – โดยปกติแล้วจะเป็นแบบฟอร์มการเลือกใช้อีเมล ไอคอนการแบ่งปันทางสังคม หรือข้อเสนอส่งเสริมการขายบางประเภท

โมดูล Divi และเนื้อหาแบบไดนามิก

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

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

• องค์ประกอบเนื้อหาแบบไดนามิกสำหรับเทมเพลตโพสต์มีให้ในโมดูล Divi ทั้งหมด
  • Post/Archive Title
  • โพสต์ข้อความที่ตัดตอนมา
  • วันที่ปัจจุบัน
  • แท็กไลน์ของเว็บไซต์
  • ผู้เขียน Bio
  • ผู้เขียนโพสต์
  • โพสต์ลิงค์
  • โพสต์หมวดหมู่
  • โพสต์ความคิดเห็นนับ
  • โพสต์วันที่เผยแพร่
  • ฟิลด์ที่กำหนดเอง

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

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

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi (หรือปลั๊กอิน Divi Builder หากไม่ได้ใช้ธีม Divi)
2. ตรวจสอบให้แน่ใจว่าคุณได้สร้างบล็อกโพสต์อย่างน้อยสองสามรายการเพื่อดูผลลัพธ์ของเทมเพลตโพสต์บล็อกที่เราจะสร้าง อย่าลืมใส่เนื้อหาในแต่ละโพสต์ให้มากที่สุด (เช่น รูปภาพเด่น หมวดหมู่ ฯลฯ) เพื่อให้คุณมีตัวอย่างที่ดีของโพสต์จริง

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

วิธีสร้างเทมเพลตบล็อกโพสต์ใน Divi Theme Builder

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

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

การสร้างเทมเพลตใหม่

จากแดชบอร์ด WordPress ให้ไปที่ Divi > Theme Builder จากนั้นคลิกช่องว่าง "เพิ่มเทมเพลตใหม่"

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

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

การสร้างเค้าโครงพื้นที่ร่างกายแบบกำหนดเอง

ถัดไป คลิกพื้นที่ "เพิ่มเนื้อหาที่กำหนดเอง" ของเทมเพลตเพื่อสร้างพื้นที่เนื้อหาใหม่สำหรับเทมเพลตของโพสต์ จากนั้นเลือก "สร้างเนื้อหาที่กำหนดเอง"

เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น" เพื่อเริ่มกระบวนการสร้าง

การสร้างเค้าโครงเนื้อหาแบบกำหนดเองสำหรับเทมเพลตโพสต์

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

ในการเริ่มต้น ให้เพิ่มแถวคอลัมน์หนึ่งแถวในส่วนปกติที่เป็นค่าเริ่มต้น

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

• พื้นหลังไล่ระดับสีซ้าย: #8624e1
• ไล่สีพื้นหลังด้านขวา: #3607a6
• ทิศทางการไล่ระดับสี: 130deg
• ตำแหน่งเริ่มต้น: 25%
• ภาพพื้นหลัง: แทรกรูปภาพ
• ใช้เอฟเฟกต์พารัลแลกซ์: ใช่
• เบาะ: บน 7vw ล่าง 7vw

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

ภายในแถวหนึ่งคอลัมน์ เพิ่มโมดูลข้อความ

จากนั้นคลิกไอคอนเนื้อหาแบบไดนามิกเมื่อวางเมาส์เหนือพื้นที่เนื้อหา

เลือกองค์ประกอบชื่อโพสต์/เก็บถาวรจากรายการ

จากนั้น คลิกไอคอนรูปเฟืองบนองค์ประกอบ Post/Archive Title และอัปเดตพื้นที่ป้อนข้อมูลก่อนและหลังด้วยแท็ก h1 ดังนี้:

ก่อน:

<h1>

หลังจาก:

</h1>

ตอนนี้ออกแบบชื่อเรื่องด้วยการตั้งค่าการออกแบบต่อไปนี้:

• แบบอักษรของข้อความ: Roboto
• ขนาดข้อความ: 16px
• ความสูงของบรรทัดข้อความ: 1.8em
• การจัดตำแหน่งข้อความ: center
• แบบอักษรของหัวข้อ: Roboto
• น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
• ขนาดข้อความหัวเรื่อง: 60px (เดสก์ท็อป), 40px (แท็บเล็ต), 32px (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 1.2em

การเพิ่มรูปภาพเด่นโดยใช้โมดูลรูปภาพเป็นเนื้อหาแบบไดนามิก

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

จากนั้นเพิ่มโมดูลรูปภาพในคอลัมน์ด้านซ้าย

จากนั้นเพิ่มองค์ประกอบเนื้อหาไดนามิกของรูปภาพเด่นสำหรับรูปภาพ

การออกแบบโมดูลรูปภาพ

ข้ามไปที่แท็บออกแบบและปรับแต่งรูปภาพดังนี้:

• การจัดตำแหน่งภาพ: center
• มาร์จิ้น: -9vw (เดสก์ท็อป), 0vw (แท็บเล็ต)
• มุมโค้งมน: 8px
• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 16px
• ความชัดเจนของเงากล่อง: 96px
• ความแรงของการกระจายเงาของกล่อง: -24px

เพิ่มผู้โพสต์และผู้แต่ง Bio ลงในโมดูล Blurb เป็นเนื้อหาแบบไดนามิก

ต่อไป เราจะเพิ่ม Post Author และ Post Author Bio โดยใช้โมดูลบล็อก ดังนั้น ไปข้างหน้าและเพิ่มโมดูลบล็อกในคอลัมน์ด้านขวา

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

ถัดไป เปิดการตั้งค่า Post Author และอัปเดตข้อมูลก่อนป้อนข้อมูลดังนี้:

• ก่อน: เขียนโดย

สำหรับเนื้อหาเนื้อหาของโมดูลการนำเสนอ ให้คลิกไอคอนเนื้อหาแบบไดนามิก และเลือกองค์ประกอบเนื้อหาแบบไดนามิก "Author Bio" จากรายการ

สำหรับรูปภาพของโมดูลการนำเสนอ ให้เพิ่ม "รูปโปรไฟล์ผู้โพสต์" เป็นเนื้อหาแบบไดนามิก

ผู้โพสต์การออกแบบและโมดูล Bio Blurb

ตอนนี้ปรับการออกแบบภาพให้เหมาะสมที่สุดดังนี้:

• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• มุมโค้งมนของรูปภาพ: 50%
• แบบอักษรของชื่อเรื่อง: Roboto
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ความสูงของบรรทัดหัวเรื่อง: 1.3em
• แบบอักษรของร่างกาย: Lato
• ความสูงของเส้นร่างกาย: 1.4em
• ความกว้างของรูปภาพ: 50px

เพิ่มหมวดหมู่โพสต์ไปยังโมดูล Blurb เป็นเนื้อหาไดนามิก

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

จากนั้นอัปเดตการนำเสนอด้วยไอคอนดังนี้:

• ใช้ไอคอน: ใช่
• ไอคอน: ดูภาพหน้าจอ

โพสต์การออกแบบ หมวดหมู่ Blurb Module

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

• สีไอคอน: #dddddd
• ตำแหน่งรูปภาพ/ไอคอน: ซ้าย
• ใช้ขนาดตัวอักษรของไอคอน: ใช่
• ขนาดตัวอักษรของไอคอน: 20px
• แบบอักษรของชื่อเรื่อง: Roboto
• น้ำหนักแบบอักษรของชื่อเรื่อง: ปานกลาง
• สีข้อความชื่อเรื่อง: #f92c8b
• ขนาดข้อความชื่อเรื่อง: 16px
• ความสูงของบรรทัดหัวเรื่อง: 20px
• ช่องว่างภายใน: เหลือ 16px

เพิ่มการนับความคิดเห็นในโมดูล Blurb เป็นเนื้อหาแบบไดนามิก

หากต้องการเพิ่มจำนวนความคิดเห็นของโพสต์สำหรับเทมเพลตโพสต์บล็อก ให้ทำซ้ำโมดูลประกาศที่เพิ่งสร้างขึ้น

จากนั้นอัปเดตเนื้อหาชื่อเรื่องด้วยองค์ประกอบเนื้อหาไดนามิกการนับความคิดเห็น

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

หลัง: ความคิดเห็น

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

• ใช้ไอคอน: ใช่
• ไอคอน: ดูภาพหน้าจอ

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

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

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

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

• ใช้ไอคอน: ใช่
• ไอคอน: ดูภาพหน้าจอ

เพิ่มโมดูลเนื้อหาโพสต์ด้วยการตั้งค่าการออกแบบสำหรับเนื้อหา

ด้วยชื่อโพสต์ รูปภาพเด่น ผู้เขียนโพสต์ และข้อมูลเมตา เราก็พร้อมสำหรับเนื้อหาโพสต์หลัก

เพิ่มแถวใหม่ด้วยเค้าโครงแบบหนึ่งคอลัมน์

จากนั้นเพิ่มโมดูลเนื้อหาโพสต์ในแถว

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

เปิดการตั้งค่าโมดูลเนื้อหาโพสต์และอัปเดตการตั้งค่ารูปภาพต่อไปนี้:

• มุมโค้งมนของรูปภาพ: 8px
• Image Box Shadow: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 16px
• ความชัดเจนของเงากล่อง: 96px
• ความแรงของการกระจายเงาของกล่อง: -24px

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

จากนั้นอัปเดตตัวเลือกต่อไปนี้ภายใต้แต่ละแท็บ

อัปเดตการตั้งค่าข้อความส่วนหัวสำหรับแต่ละระดับหัวเรื่องต่อไป – h1, h2, h3, h4, h5, h6

• แบบอักษรของหัวข้อ: Roboto
• น้ำหนักตัวอักษรของหัวเรื่อง: ตัวหนา
• ขนาดข้อความหัวเรื่อง (h1): 56px (เดสก์ท็อป), 42px (แท็บเล็ต), 28px (โทรศัพท์)
• ขนาดข้อความหัวเรื่อง (h2): 45px (เดสก์ท็อป), 35px (แท็บเล็ต), 24px (โทรศัพท์)
• ขนาดข้อความหัวเรื่อง (h3): 40px (เดสก์ท็อป), 30px (แท็บเล็ต), 20px (โทรศัพท์)
• ขนาดข้อความหัวเรื่อง (h4): 32px (เดสก์ท็อป), 24px (แท็บเล็ต), 18px (โทรศัพท์)
• ขนาดข้อความหัวเรื่อง (h5): 28px (เดสก์ท็อป), 20px (แท็บเล็ต), 16px (โทรศัพท์)
• ขนาดข้อความหัวเรื่อง (h6): 24px (เดสก์ท็อป), 18px (แท็บเล็ต), 14px (โทรศัพท์)

เพิ่มโมดูลการนำทางโพสต์

ภายใต้โมดูลโพสต์เนื้อหา ให้เพิ่มแถวหนึ่งคอลัมน์ใหม่ด้วยโมดูลการนำทางโพสต์

อัปเดตข้อความลิงก์ก่อนหน้าและถัดไปดังนี้:

• ลิงค์ก่อนหน้า: ก่อนหน้า: %title
• ลิงก์ถัดไป: ถัดไป: %title

จากนั้นอัปเดตการออกแบบการนำทางโพสต์ดังนี้:

• แบบอักษรของลิงก์: Roboto
• ลิงค์น้ำหนักแบบอักษร: ตัวหนา
• ลิงค์สีข้อความ: #f92c8b

เพิ่มส่วนบทความที่เกี่ยวข้อง

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

เพิ่มชื่อโพสต์ที่เกี่ยวข้องโดยใช้โมดูลข้อความ

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

อัปเดตเนื้อหาข้อความด้วยหัวข้อ H2 ต่อไปนี้:

<h2>You May Also Like...</h2>

จากนั้นอัปเดตการออกแบบข้อความส่วนหัวดังนี้:

• หัวข้อ 2 แบบอักษร: Roboto
• หัวเรื่อง 2 ขนาดข้อความ: 48px (เดสก์ท็อป), 38px (แท็บเล็ต), 28px (โทรศัพท์)

เมื่อหัวข้อของเราพร้อมแล้ว เราก็พร้อมที่จะเพิ่มโพสต์ที่เกี่ยวข้อง

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

ภายใต้โมดูลข้อความที่มีชื่อ ให้เพิ่มโมดูลบล็อกใหม่

จากนั้นอัปเดตเนื้อหาโมดูลบล็อกดังนี้:

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

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

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

• เค้าโครง: Grid
• แบบอักษรของชื่อเรื่อง: Roboto
• ขนาดข้อความชื่อเรื่อง: 14px
• ความสูงของบรรทัดหัวเรื่อง: 1.3em
• แบบอักษรของร่างกาย: Lato
• แบบอักษร Meta: Lato
• สีข้อความเมตา: #f92c8b
• ขนาดข้อความ Meta: 13px
• เค้าโครงตาราง มุมโค้งมน: 20px

อัปเดตการออกแบบด้วยกล่องเงาต่อไปดังนี้:

• ความกว้างเส้นขอบของเค้าโครงตาราง: 0px
• กล่องเงา: ดูภาพหน้าจอ
• ตำแหน่งแนวตั้งเงาของกล่อง: 16px
• ความชัดเจนของเงากล่อง: 96px
• ความแรงของการกระจายเงาของกล่อง: -24px

เพิ่มความคิดเห็นโมดูล

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

การออกแบบความคิดเห็นโมดูล

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

• สีพื้นหลัง: #f2f5f9
• ฟิลด์สีพื้นหลัง: #ffffff
• ฟิลด์โฟกัสสีพื้นหลัง: #ffffff
• ฟิลด์โฟกัสสีข้อความ: #222222
• ระยะขอบ: 3px ด้านล่าง
• ช่องว่างภายใน: บน 18px, 18px ด้านล่าง
• ฟอนต์ฟิลด์: Lato
• ขนาดข้อความของฟิลด์: 16px
• ความสูงของบรรทัดฟิลด์: 1.4em

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

• มุมโค้งมนของรูปภาพ: 60px
• แบบอักษรของชื่อเรื่อง: Roboto
• ขนาดข้อความชื่อเรื่อง: 26px (เดสก์ท็อป), 20px (แท็บเล็ต), 15px (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 1.3em
• แบบอักษร Meta: Lato
• แบบอักษรความคิดเห็น: Lato
• สีข้อความแสดงความคิดเห็น: #222222
• Padding: 5% บน, 5% ด้านล่าง, 5% ซ้าย, 5% ขวา

สุดท้าย กำหนดรูปแบบปุ่มสำหรับความคิดเห็นดังนี้:

• ขนาดข้อความของปุ่ม: 14px
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 4px
• ระยะห่างระหว่างตัวอักษรของปุ่ม: 5px (เดสก์ท็อป), 5.5px (โฮเวอร์)
• แบบอักษรของปุ่ม: Roboto
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่ (TT)
• ปุ่ม Padding: 16px บน, 16px ด้านล่าง

เพิ่มตัวแบ่งส่วนไปที่ส่วนหัว

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

• สไตล์ตัวแบ่งด้านล่าง: ดูภาพหน้าจอ
• ตัวแบ่งสี: #ffffff
• ความสูงของตัวแบ่ง: 10vw
• ตัวคั่นพลิก: แนวนอน

อย่าลืมบันทึกการตั้งค่าของคุณสำหรับเลย์เอาต์และสำหรับ Theme Builder เพื่อให้การเปลี่ยนแปลงของคุณได้รับการบันทึก

แค่นั้นแหละ! มาดูผลสุดท้ายกัน

ผลสุดท้าย

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

นี่คือตัวอย่างโพสต์เมื่อดูจากเครื่องมือแก้ไขโพสต์ที่ส่วนหลัง

และนี่คือโพสต์ที่ส่วนหน้าซึ่งมีเทมเพลตโพสต์บล็อกของเรา

และนี่คือหน้าจอแท็บเล็ตและโทรศัพท์:

การใช้ Divi Builder เพื่อสร้างบล็อกโพสต์ด้วยเทมเพลตบล็อกโพสต์ในสถานที่

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

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

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

คุณได้สร้างเทมเพลตโพสต์บล็อกโดยใช้ Divi Theme Builder หรือไม่? แจ้งให้เราทราบสิ่งที่คุณคิด.

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

ไชโย!