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

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

ไปกันเถอะ

ดูตัวอย่าง

ก่อนที่เราจะดำดิ่งสู่บทช่วยสอน มาดูผลลัพธ์คร่าวๆ ของหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

1. ไปที่ตัวสร้างธีม Divi และเพิ่มเทมเพลตโพสต์ใหม่

ไปที่ตัวสร้างธีม Divi และเพิ่มเทมเพลตใหม่

เริ่มต้นด้วยการไปที่ตัวสร้างธีม Divi เมื่อมี ให้เพิ่มเทมเพลตใหม่

ใช้เทมเพลตกับโพสต์ทั้งหมด

ใช้เทมเพลตใหม่กับโพสต์ทั้งหมดของคุณ

• ใช้เมื่อ: โพสต์ทั้งหมด

เริ่มสร้างเทมเพลต Body

และเริ่มสร้างเนื้อความของแม่แบบ

2. สร้างตัวเทมเพลตการโพสต์บล็อก

การตั้งค่ามาตรา

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

เพิ่มแถวใหม่

โครงสร้างคอลัมน์

ดำเนินการต่อโดยเพิ่มแถวใหม่โดยใช้โครงสร้างคอลัมน์ต่อไปนี้:

ขนาด

โดยไม่ต้องเพิ่มโมดูลใด ๆ ให้เปิดการตั้งค่าแถวและแก้ไขการตั้งค่าการปรับขนาดดังนี้:

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้าง: 100%
• ความกว้างสูงสุด: 100%
• ความสูงขั้นต่ำ: 100vh (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)
• ความสูงสูงสุด: 100vh (เดสก์ท็อป), ไม่มี (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

ลบช่องว่างด้านบนและด้านล่างเริ่มต้นทั้งหมดถัดไป

• ช่องว่างภายในด้านบน: 0px
• ช่องว่างภายในด้านล่าง: 0px

ล้น

และตั้งค่าโอเวอร์โฟลว์ของแถวเป็นซ่อน

• แนวนอนล้น: ซ่อน
• ล้นแนวตั้ง: ซ่อน

คอลัมน์ 1 การตั้งค่า

พื้นหลังไล่โทนสี

จากนั้นเปิดการตั้งค่าคอลัมน์ 1 และเพิ่มพื้นหลังแบบไล่ระดับสี

• สี 1: rgba(255,255,255,0)
• สี 2: #000000
• ประเภทการไล่ระดับสี: เชิงเส้น
• วางการไล่ระดับสีเหนือภาพพื้นหลัง: ใช่

ภาพพื้นหลัง

เรากำลังใช้รูปภาพเด่นแบบไดนามิกเป็นภาพพื้นหลังสำหรับคอลัมน์ถัดไป

• ภาพพื้นหลัง: ภาพเด่น

การตั้งค่าคอลัมน์ 2

ระยะห่าง

จากนั้น เราจะเปิดการตั้งค่าคอลัมน์ 2 และเพิ่มค่าช่องว่างภายในที่กำหนดเองลงในการตั้งค่าการเว้นวรรค

• ช่องว่างภายในด้านบน: 8%
• แผ่นรองด้านล่าง: 8%
• ช่องว่างภายในด้านซ้าย: 8%
• ช่องว่างภายในด้านขวา: 8%

ล้น

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

• ล้นแนวตั้ง: เลื่อน (เดสก์ท็อป) มองเห็นได้ (แท็บเล็ตและโทรศัพท์)

เพิ่มโมดูลชื่อโพสต์ในคอลัมน์ 1

องค์ประกอบ

ถึงเวลาเพิ่มโมดูล เริ่มต้นด้วยโมดูลชื่อโพสต์ในคอลัมน์ 1 ปิดใช้งานตัวเลือกรูปภาพเด่นในการตั้งค่าองค์ประกอบ

• แสดงรูปภาพเด่น: ไม่

การตั้งค่าข้อความชื่อเรื่อง

ไปที่แท็บการออกแบบและเปลี่ยนการตั้งค่าข้อความ H1 ตามลำดับ:

• ระดับหัวเรื่อง: H1
• แบบอักษรของชื่อเรื่อง: Work Sans
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• สีข้อความของชื่อเรื่อง: #ffffff
• ขนาดข้อความชื่อเรื่อง: 60px (เดสก์ท็อป), 45px (แท็บเล็ต), 35px (โทรศัพท์)
• ระยะห่างของตัวอักษรชื่อเรื่อง: -1px
• ความสูงของบรรทัดชื่อเรื่อง: 1.2em

การตั้งค่าข้อความเมตา

แก้ไขการตั้งค่าข้อความเมตาต่อไป

• แบบอักษร Meta: Work Sans
• รูปแบบตัวอักษร Meta: ตัวพิมพ์ใหญ่
• Meta Text Color: #eaeaea
• Meta Letter ระยะห่าง: 2px

ขนาด

จากนั้น เปลี่ยนความกว้างตามขนาดหน้าจอต่างๆ

• ความกว้าง: 81% (เดสก์ท็อป), 100% (แท็บเล็ตและโทรศัพท์)

ระยะห่าง

เพิ่มค่าช่องว่างภายในที่ตอบสนองต่อไป

• ช่องว่างภายในด้านบน: 8% (แท็บเล็ตและโทรศัพท์เท่านั้น)
• ช่องว่างภายในด้านล่าง: 8% (แท็บเล็ตและโทรศัพท์เท่านั้น)
• ช่องว่างภายในด้านซ้าย: 7% (แท็บเล็ต), 8% (โทรศัพท์)
• ช่องว่างภายในด้านขวา: 7% (แท็บเล็ต), 8% (โทรศัพท์)

ตำแหน่ง

และทำการตั้งค่าโมดูลให้สมบูรณ์โดยเปลี่ยนการตั้งค่าตำแหน่งดังนี้:

• ตำแหน่ง: แอบโซลูท (เดสก์ท็อป), ค่าเริ่มต้น (แท็บเล็ตและโทรศัพท์)
• ที่ตั้ง: Bottom Center
• ออฟเซ็ตแนวตั้ง: 10%

เพิ่มโมดูลเนื้อหาโพสต์ลงในคอลัมน์ 2

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

การตั้งค่าข้อความหัวเรื่อง

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

• แบบอักษรของหัวเรื่อง: Work Sans
• น้ำหนักแบบอักษรของหัวเรื่อง: กึ่งหนา
• ขนาดข้อความหัวเรื่อง:
  • H2: 40px
  • H3: 30px
  • H4: 25px
  • H5: 16px
  • H6: 14px
• ระยะห่างของตัวอักษรหัวเรื่อง: -1px (H2, H3 & H4)

CSS Class

และเพิ่มคลาส CSS ในขั้นตอนต่อไปของบทช่วยสอนนี้ เราจะใช้คลาส CSS นี้เพื่อสร้างช่องว่างระหว่างหัวเรื่องและย่อหน้า

• CSS Class: บล็อกโพสต์เนื้อหา

เพิ่มโมดูลโค้ดลงในคอลัมน์ 2

เพิ่มโค้ด CSS สำหรับช่องว่างระหว่างย่อหน้าและหัวเรื่อง

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

<style>
.blog-post-content h1,
.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4,
.blog-post-content h5,
.blog-post-content h6
{
margin-top: 20px;
margin-bottom: 20px;
}
</style>

เพิ่มโมดูลความคิดเห็นในคอลัมน์ 2

การตั้งค่าฟิลด์

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

• ฟิลด์สีพื้นหลัง: #ffffff
• ฟิลด์ข้อความสี: #000000
• ช่องเติมด้านบน: 30px
• ฟิลด์ ช่องว่างภายใน: 30px
• ฟิลด์ ช่องว่างภายใน: 30px
• ช่องเติมด้านขวา: 30px
• ฟอนต์ฟิลด์: Work Sans

• รูปแบบตัวอักษรของฟิลด์: ตัวพิมพ์ใหญ่
• ขนาดข้อความของฟิลด์: 15px
• ฟิลด์ ระยะห่างตัวอักษร: 3px
• ฟิลด์ มุมโค้งมน: 10px (ทุกมุม)

• Fields Box Shadow Blur ความแรง: 30px
• ช่องสีเงาของช่อง: rgba(0,0,0,0.06)

การตั้งค่าข้อความการนับความคิดเห็น

จากนั้น เปลี่ยนการตั้งค่าข้อความการนับความคิดเห็น

• ฟอนต์การนับความคิดเห็น: Work Sans
• ความคิดเห็น จำนวนแบบอักษร น้ำหนัก: ตัวหนา

การตั้งค่าข้อความชื่อแบบฟอร์ม

แก้ไขการตั้งค่าข้อความชื่อแบบฟอร์มด้วย

• แบบฟอร์ม หัวเรื่อง ระดับหัวเรื่อง: H3
• แบบอักษรชื่อแบบฟอร์ม: Work Sans
• น้ำหนักแบบอักษรของชื่อแบบฟอร์ม: กึ่งหนา

การตั้งค่าข้อความเมตา

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

• แบบอักษร Meta: Work Sans
• น้ำหนักแบบอักษร Meta: กึ่งหนา
• สีข้อความเมตา: #000000

การตั้งค่าปุ่ม

จากนั้นเราจะจัดรูปแบบปุ่มตามลำดับ:

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 16px
• สีข้อความของปุ่ม: #ffffff
• สีพื้นหลังของปุ่ม: #000000
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 100px

• ระยะห่างระหว่างตัวอักษรของปุ่ม: 2px
• แบบอักษรของปุ่ม: Work Sans
• รูปแบบตัวอักษรของปุ่ม: ตัวพิมพ์ใหญ่

• ปุ่มเสริมด้านบน: 2%
• ช่องว่างภายในปุ่ม: 2%
• บุนวมด้านซ้าย: 5%
• ปุ่มขยายด้านขวา: 5%

ระยะห่าง

เราจะเพิ่มระยะขอบด้านบนด้วย

• มาร์จิ้นสูงสุด: 15%

เนื้อหาความคิดเห็น CSS

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

margin-top: 50px

3. บันทึกการเปลี่ยนแปลงตัวสร้างธีมและดูผลลัพธ์

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

ดูตัวอย่าง

เมื่อเราได้ทำตามขั้นตอนทั้งหมดแล้ว มาดูผลลัพธ์ในขั้นสุดท้ายในหน้าจอขนาดต่างๆ

เดสก์ทอป

มือถือ

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

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

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