วิธีแสดงส่วนโพสต์ที่เกี่ยวข้องในบล็อกใน Divi

Rifat Feb 16, 2022

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

ตัวอย่างการออกแบบ

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

รับเทมเพลตโพสต์บล็อกที่เหมาะสม

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

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

สร้างเว็บไซต์ที่น่าทึ่ง

ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด

เริ่มเลย

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

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

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

คลิกไอคอนแก้ไขของเทมเพลตที่เพิ่มใหม่

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

ลบตัวเลื่อนเมื่อคุณย้าย

ตอนนี้เปิดการตั้งค่าส่วน’ และตั้งค่าสีพื้นหลังใหม่

  • สีพื้นหลัง: #000000

ตอนนี้เพิ่มโมดูลบล็อกในแถวนี้

การตั้งค่าโมดูลบล็อกที่เกี่ยวข้อง

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

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

  • ประเภทกระทู้: กระทู้
  • จำนวนโพสต์: 3
  • หมวดหมู่ที่รวม: หมวดหมู่ปัจจุบัน

เปลี่ยนการตั้งค่าใช้ Post Excerpts และติดตาม

  • ใช้ข้อความที่ตัดตอนมา: ใช่
  • ความยาวข้อความที่ตัดตอนมา: 150
  • แสดงรูปภาพเด่น: ใช่

ทำการเปลี่ยนแปลงบางอย่างภายใต้องค์ประกอบ

  • แสดงข้อความที่ตัดตอนมา: ใช่
  • แสดงเลขหน้า: ใช่

จัดแต่งทรงผมที่เกี่ยวข้องโมดูลบล็อก

ย้ายไปที่แท็บออกแบบ ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานการซ้อนทับรูปภาพเด่น

  • การวางซ้อนรูปภาพเด่น: เปิด
  • สีไอคอนซ้อนทับ: #ffffff
  • สีพื้นหลังซ้อนทับ: rgba(65,226,186,0.62)

ทำการเปลี่ยนแปลงบางอย่างกับฟอนต์ เป็นสีและน้ำหนัก

  • ข้อความชื่อเรื่อง: Roboto Mono
  • สีข้อความ: #323770
  • น้ำหนักแบบอักษร: Regular

นอกจากนี้ ให้เปลี่ยนขนาดและความสูงของแบบอักษรด้วย

  • ขนาดข้อความชื่อเรื่อง (เดสก์ท็อป): 15px
  • ขนาดตัวอักษร (โทรศัพท์): 14px
  • ความสูงของสาย: 1.7em

นอกจากนี้ ให้นำการเปลี่ยนแปลงบางอย่างมาสู่ฟอนต์เนื้อหา

  • แบบอักษรของข้อความ: PT Sans
  • น้ำหนักข้อความ: ปกติ
  • สีข้อความ: #62748a

เปลี่ยนขนาดและส่วนสูงสำหรับข้อความเนื้อหาด้วย

  • ขนาดข้อความ (เดสก์ท็อป): 14px
  • ขนาดตัวอักษร (โทรศัพท์): 12px
  • ความสูงของบรรทัดข้อความ: 2em

ควรเปลี่ยนข้อความการแบ่งหน้าด้วย

  • แบบอักษรเลขหน้า: Roboto Slab
  • น้ำหนักแบบอักษร: Regular
  • สี: #41e2ba

ไปที่ส่วนการเว้นวรรคและเพิ่มระยะขอบด้านบน

  • อัตรากำไรขั้นต้น: -7vw

ชื่อหมวด

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

ทำการเปลี่ยนแปลงต่อไปนี้สำหรับโมดูล

  • ข้อความ: หัวเรื่อง 2
  • เนื้อหา: กระทู้ที่เกี่ยวข้อง

บนแท็บ ออกแบบ ทำการปรับเปลี่ยน

  • แบบอักษรของหัวเรื่อง 2: Robo Slab
  • น้ำหนักแบบอักษร: ตัวหนา
  • ขนาดตัวอักษรบนเดสก์ท็อป: 54px
  • ขนาดตัวอักษรของโทรศัพท์: 26px

จากการตั้งค่าการเว้นวรรค ควรทำการเปลี่ยนแปลงต่อไปนี้

  • อัตรากำไรขั้นต้น: -12vw สำหรับเดสก์ท็อป -50vw สำหรับโทรศัพท์
  • ระยะขอบล่าง: 9vw

ผลลัพธ์สุดท้าย

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

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

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

Divi WordPress Theme