วิธีสร้างเทมเพลตโพสต์บล็อกที่เป็นมิตรกับ UX แบบไดนามิกด้วย Divi

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

ดาวน์โหลดเทมเพลตโพสต์บล็อก UX-Friendly อย่างง่ายฟรี

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

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

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

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

ดาวน์โหลด

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

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

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

ไปที่ตัวสร้างธีม Divi

เริ่มต้นด้วยการไปที่ตัวสร้างธีม Divi

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

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

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

2. เริ่มสร้างบล็อกโพสต์เนื้อหา

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

เพิ่มแถว #1 ไปยังส่วนที่มีอยู่

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1

คอลัมน์ 1 & 2 เส้นขอบ

เพิ่มเส้นขอบด้านขวาให้กับคอลัมน์แรกและคอลัมน์ที่สองถัดไป

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

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

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

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

• โมดูลข้อความในคอลัมน์ 1: หมวดหมู่ของโพสต์

• โมดูลข้อความในคอลัมน์ 2: วันที่โพสต์

• โมดูลข้อความในคอลัมน์ 3: โพสต์ความคิดเห็น Count
• หลัง: ความคิดเห็น

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

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

• แบบอักษรของข้อความ: Lato
• ขนาดตัวอักษร: 1.1rem
• ระยะห่างของตัวอักษรข้อความ: 1px
• ความสูงของบรรทัดข้อความ: 2em

เพิ่มแถว #2

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

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

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

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

เพิ่มโมดูลข้อความและเลือกเนื้อหาแบบไดนามิกของชื่อโพสต์

• เนื้อหาแบบไดนามิก: ชื่อโพสต์

• ก่อน: <H1>
• หลัง: </H1>

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

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

• แบบอักษรของหัวข้อ: Playfair Display
• การจัดตำแหน่งข้อความหัวเรื่อง: Center
• ขนาดข้อความของหัวเรื่อง: 6.2rem (เดสก์ท็อป), 3.2rem (แท็บเล็ต), 2.3rem (โทรศัพท์)

ระยะห่าง

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

• ขอบบน: 50px
• ขอบล่าง: 100px

เพิ่มโมดูลข้อความ #2 ไปยังคอลัมน์

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

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

• เนื้อหาแบบไดนามิก: โพสต์ข้อความที่ตัดตอนมา

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

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

• แบบอักษรของข้อความ: Lato
• ขนาดตัวอักษร: 1.1rem
• ระยะห่างของตัวอักษรข้อความ: 1px
• ความสูงของบรรทัดข้อความ: 2em
• การจัดตำแหน่งข้อความ: กึ่งกลาง

เพิ่มแถว #3

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

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

แสดง

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

display: flex;

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

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

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

• เนื้อหาแบบไดนามิก: รูปภาพโปรไฟล์ผู้แต่ง

การจัดตำแหน่ง

ไปที่แท็บการออกแบบของโมดูลและเปลี่ยนการจัดตำแหน่งรูปภาพ

• การจัดตำแหน่งภาพ: ขวา

ขนาด

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

• ความกว้าง: 50px

ระยะห่าง

เพิ่มระยะขอบด้านขวาบนแท็บเล็ตและโทรศัพท์

• ระยะขอบขวา: 20px (แท็บเล็ตและโทรศัพท์)

ชายแดน

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

• ทุกมุม: 100px

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

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

ในคอลัมน์ที่สอง เราจำเป็นต้องมี Text Module เลือกเนื้อหาไดนามิกของผู้เขียนโพสต์

• เนื้อหาแบบไดนามิก: ผู้โพสต์

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

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

• แบบอักษรของข้อความ: Lato
• ขนาดตัวอักษร: 1.1rem
• ระยะห่างของตัวอักษรข้อความ: 1px

ระยะห่าง

เพิ่มค่าระยะขอบที่กำหนดเองบางส่วนต่อไป

• ขอบบน: 15px
• ระยะขอบซ้าย: 20px (แท็บเล็ตและโทรศัพท์)

เพิ่มแถว #4

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

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

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

เว้นช่องเนื้อหาว่างไว้

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

ภาพพื้นหลังแบบไดนามิก

เพิ่มเนื้อหาไดนามิกรูปภาพเด่นลงในภาพพื้นหลังของโมดูลถัดไป

• เนื้อหาแบบไดนามิก: รูปภาพเด่น

ขนาด

ดำเนินการต่อโดยแก้ไขการตั้งค่าขนาดของโมดูลตามขนาดหน้าจอต่างๆ

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

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 400px (เดสก์ท็อป), 250px (แท็บเล็ต), 150px (โทรศัพท์)
• ช่องว่างภายในด้านล่าง: 400px (เดสก์ท็อป), 250px (แท็บเล็ต), 150px (โทรศัพท์)

ชายแดน

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

• ทุกมุม: 500px

เพิ่มมาตราใหม่

ไปยังส่วนปกติถัดไป

เพิ่มแถว #1

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

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

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

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

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

• แบบอักษรของข้อความ: Lato
• ขนาดตัวอักษร: 1.1rem
• ระยะห่างของตัวอักษรข้อความ: 1px
• ความสูงของบรรทัดข้อความ: 2.3em

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

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

• แบบอักษรของหัวข้อ: Playfair Display
• ขนาดข้อความ H2: 3.5rem (เดสก์ท็อป), 2rem (แท็บเล็ตและโทรศัพท์)
• ขนาดข้อความ H3: 2.5rem (เดสก์ท็อป), 1.5rem (แท็บเล็ตและโทรศัพท์)
• ขนาดข้อความ H4: 2.3rem (เดสก์ท็อป), 1.3rem (แท็บเล็ตและโทรศัพท์)
• ขนาดข้อความ H5 & H6: 2rem (เดสก์ท็อป), 1rem (แท็บเล็ตและโทรศัพท์)

เพิ่มแถว #2

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

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

ระยะห่าง

เพิ่มระยะขอบบนที่กำหนดเองบางส่วนลงในแถว

• ขอบบน: 100px

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

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

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

• ฟิลด์สีพื้นหลัง: #ffffff
• ฟอนต์ฟิลด์: Lato
• ขนาดข้อความของฟิลด์: 1.1rem

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

การตั้งค่ารูปภาพ

เปลี่ยนการตั้งค่าภาพด้วย

• ทุกมุม: 100px

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

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

• ระดับหัวเรื่อง: H2
• แบบอักษรของชื่อเรื่อง: Playfair Display
• ขนาดตัวอักษรของชื่อเรื่อง: 3rem (เดสก์ท็อป), 2rem (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 1.4em

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

จัดรูปแบบข้อความเมตาด้วย

• แบบอักษร Meta: Playfair Display
• ขนาดข้อความ Meta: 1.4rem

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

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

• แบบอักษรความคิดเห็น: Lato
• ขนาดข้อความแสดงความคิดเห็น: 1.1rem
• ระยะห่างจดหมายแสดงความคิดเห็น: 1px
• ความสูงของบรรทัดความคิดเห็น: 2em

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

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

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

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

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

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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