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

ไปกันเถอะ!

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

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

และเริ่มสร้างเนื้อหาของเทมเพลตใหม่

2. เริ่มสร้าง Blog Post Body

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

สีพื้นหลัง

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

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

ระยะห่าง

เพิ่มช่องว่างภายในด้านบนและด้านล่างที่กำหนดเองต่อไป

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

ชายแดน

และตั้งค่าส่วนให้สมบูรณ์ด้วยการเพิ่มเส้นขอบ

• ความกว้างของเส้นขอบ: 100px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)
• สีเส้นขอบ: #ffffff

เพิ่มแถว #1

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

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

ระยะห่าง

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

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

เพิ่มโมดูลรูปภาพลงในคอลัมน์

อัพโหลดภาพ

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

ระยะห่าง

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

• ขอบบน: -150px
• ระยะขอบซ้าย: -12vw (เดสก์ท็อป), 0px (แท็บเล็ตและโทรศัพท์)

เพิ่มแถว #2

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

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

เพิ่มโมดูลข้อความลงในคอลัมน์ 1

เนื้อหาแบบไดนามิก

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

• เนื้อหา: โพสต์วันที่เผยแพร่

• รูปแบบวันที่: 08/06/1999 ม./วัน/Y

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

เปลี่ยนการตั้งค่าข้อความตามลำดับ:

• แบบอักษรข้อความ: Elite พิเศษ
• น้ำหนักแบบอักษรของข้อความ: ตัวหนา
• สีข้อความ: #000000
• ขนาดตัวอักษร: 1.4rem

โคลนโมดูลข้อความสามครั้ง

เมื่อคุณตั้งค่าโมดูลข้อความเสร็จแล้ว คุณสามารถโคลนโมดูลทั้งหมดได้สามครั้ง

เปลี่ยนเนื้อหาแบบไดนามิก

แก้ไขเนื้อหาแบบไดนามิกของโมดูลที่ซ้ำกันดังนี้:

• ซ้ำ #1: หมวดหมู่โพสต์
• ซ้ำ #2: ผู้โพสต์
• ซ้ำ #3: โพสต์ความคิดเห็น Count
  • หลัง: ความคิดเห็น
  • ลิงก์ไปยังพื้นที่แสดงความคิดเห็น: ใช่

วางโมดูลข้อความสองโมดูลในคอลัมน์ 2

ดำเนินการต่อโดยวางโมดูลข้อความสองตัวสุดท้ายในคอลัมน์ที่สองของแถว

เปลี่ยนสีข้อความลิงก์ของหมวดหมู่และจำนวนความคิดเห็น

แก้ไขสีข้อความลิงก์ตามความจำเป็นเช่นกัน

• ลิงค์สีข้อความ: #000000

เปลี่ยนการวางแนวข้อความของโมดูลในคอลัมน์ 2

และกรอกโมดูลข้อความในคอลัมน์ 2 โดยแก้ไขการจัดแนวข้อความตามขนาดหน้าจอต่างๆ

• การจัดตำแหน่งข้อความ: ขวา (เดสก์ท็อป), ซ้าย (แท็บเล็ตและโทรศัพท์)

เพิ่มแถว #3

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

ต่อแถวหน้า! ใช้โครงสร้างคอลัมน์ต่อไปนี้:

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

เนื้อหาแบบไดนามิก

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

• เนื้อหา: ชื่อโพสต์/ที่เก็บถาวร

• ก่อน:

• หลังจาก:

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

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

• แบบอักษรของหัวเรื่อง: Special Elite
• หัวเรื่องข้อความสี: #000000
• ขนาดข้อความของหัวเรื่อง: 3.5rem (เดสก์ท็อป), 2.5rem (แท็บเล็ต), 2rem (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 1.5em

ระยะห่าง

เพิ่มระยะขอบบนและล่างแบบกำหนดเองด้วย

• ขอบบน: 150px
• ขอบล่าง: 150px

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

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

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

• แบบอักษรข้อความ: Elite พิเศษ
• ขนาดตัวอักษร: 1.2rem
• ความสูงของบรรทัดข้อความ: 2.5em

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

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

• แบบอักษรของหัวเรื่อง: Special Elite
• หัวเรื่องข้อความสี: #000000
• หัวเรื่อง 2 ขนาดตัวอักษร: 2rem (H2), 1.9rem (H3), 1.8rem (H4), 1.7rem (H5), 1.6rem (H6)

CSS ID

และกำหนด CSS ID ให้กับโมดูล

• CSS ID: โพสต์เนื้อหาโมดูล

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

เพิ่มโค้ด CSS ของหัวเรื่อง

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

<style>
#post-content-module h2, h3, h4, h5, h6 {
margin-top: 70px;
margin-bottom: 70px;
}
</style>

เพิ่มส่วน #2

สีพื้นหลัง

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

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

ชายแดน

เพิ่มเส้นขอบด้วย

• ความกว้างของเส้นขอบ: 100px (เดสก์ท็อป), 20px (แท็บเล็ตและโทรศัพท์)
• ความกว้างขอบด้านบน: 0px
• สีเส้นขอบ: #ffffff

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

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

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

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

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

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

• ฟิลด์สีพื้นหลัง: rgba(0,0,0,0)
• ฟิลด์ข้อความสี: #000000
• ฟิลด์ ช่องว่างภายใน: 50px
• ฟอนต์ฟิลด์: Special Elite
• ขนาดข้อความของฟิลด์: 1.2rem

• ฟิลด์ ความกว้างเส้นขอบด้านล่าง: 1px
• ฟิลด์ขอบด้านล่างสี: #000000

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

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

• ระดับหัวเรื่องการนับความคิดเห็น: H2
• ฟอนต์การนับความคิดเห็น: Special Elite
• ความคิดเห็นจำนวนสีข้อความ: #000000
• ขนาดข้อความจำนวนความคิดเห็น: 2rem

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

ทำการเปลี่ยนแปลงการตั้งค่าข้อความชื่อแบบฟอร์มด้วย

• แบบฟอร์ม หัวเรื่อง ระดับหัวเรื่อง: H3
• แบบอักษรของชื่อแบบฟอร์ม: Special Elite
• สีข้อความชื่อแบบฟอร์ม: #000000
• ขนาดข้อความชื่อแบบฟอร์ม: 1.5rem

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

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

• แบบอักษร Meta: Elite พิเศษ
• สีข้อความเมตา: #000000
• ขนาดข้อความ Meta: 1.5rem

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

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

• แบบอักษรความคิดเห็น: Special Elite
• ขนาดข้อความแสดงความคิดเห็น: 1.2rem
• ความสูงของบรรทัดความคิดเห็น: 2.5em

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

ต่อด้วยการใส่สไตล์ของปุ่มดังนี้:

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

• แบบอักษรของปุ่ม: Elite พิเศษ

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

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

margin-top: 100px;

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

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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