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

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

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

ถ้าอย่างนั้น เริ่มสร้างเนื้อความของเทมเพลต

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

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

สีพื้นหลัง

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

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

ระยะห่าง

แก้ไขค่าระยะห่างของส่วนตามขนาดหน้าจอต่างๆ ด้วย

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

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

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 2
• ความกว้าง: 100%
• ความกว้างสูงสุด: 95%

ระยะห่าง

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

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

คอลัมน์ 2

สีพื้นหลัง

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

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

กล่องเงา

เพิ่มเงากล่องให้กับคอลัมน์ด้วย

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -21px
• เงาสี: rgba(0,0,0,0.08)

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

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

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

• รูปภาพ: รูปภาพเด่น

ขนาด

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

• บังคับเต็มความกว้าง: ใช่

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

องค์ประกอบ

ไปยังโมดูลที่สอง ซึ่งเป็นโมดูลชื่อโพสต์ ปิดใช้งานรูปภาพเด่นในการตั้งค่าองค์ประกอบ

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

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

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

• แบบอักษรของชื่อเรื่อง: Oxygen
• ขนาดตัวอักษรของชื่อเรื่อง: 2vw (เดสก์ท็อป), 4vw (แท็บเล็ต), 6vw (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 1.2em

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

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

• แบบอักษร Meta: เปิด Sans
• Meta Text Color: #ffc023
• ขนาดข้อความ Meta: 1vw (เดสก์ท็อป), 2vw (แท็บเล็ต), 3vw (โทรศัพท์)

ระยะห่าง

แก้ไขค่าระยะห่างด้วย

• ขอบบน: 100px
• ระยะขอบซ้าย: 4vw
• ระยะขอบขวา: 4vw

ชื่อเรื่อง CSS

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

margin-bottom: 20px;

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

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

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

• แบบอักษรข้อความ: เปิด Sans
• ขนาดตัวอักษร: 0.9vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.2em

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

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

• แบบอักษรของหัวข้อ: ออกซิเจน
• ขนาดข้อความ H2: 1.5vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 4vw (โทรศัพท์)
• ขนาดข้อความ H3, H4, H5 & H6: 1.3vw (เดสก์ท็อป), 2.5vw (แท็บเล็ต), 3.5vw (โทรศัพท์)

ระยะห่าง

เรากำลังใช้ค่าระยะขอบและช่องว่างภายในที่กำหนดเองด้วย

• ระยะขอบซ้าย: 4vw
• ระยะขอบขวา: 4vw
• ช่องว่างภายในด้านบน: 50px
• ช่องว่างภายในด้านล่าง: 100px

CSS Class

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

• หลังเนื้อหาเว้นวรรค

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

ใส่โค้ด CSS

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

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

เพิ่มโมดูล Optin อีเมลในคอลัมน์ 3

เพิ่มเนื้อหา

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

บัญชีอีเมล์

ดำเนินการต่อโดยเชื่อมโยงบัญชีอีเมลกับโมดูล

ทุ่งนา

จากนั้นปิดใช้งานฟิลด์นามสกุลในการตั้งค่าฟิลด์

• แสดงนามสกุล ฟิลด์: No

สีพื้นหลัง

เปลี่ยนสีพื้นหลังตามนี้:

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

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

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

• ฟอนต์ฟิลด์: เปิด Sans
• ขนาดข้อความของฟิลด์: 0.8vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 3vw (โทรศัพท์)

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

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

• แบบอักษรของชื่อเรื่อง: Oxygen
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ขนาดตัวอักษรของชื่อเรื่อง: 1vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 5vw (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 1.5em

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

ดำเนินการต่อโดยจัดรูปแบบปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 0.9vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 3vw (โทรศัพท์)
• สีข้อความของปุ่ม: #ffc023
• สีพื้นหลังของปุ่ม: #f4f4f4
• ความกว้างของขอบปุ่ม: 0px

• รัศมีเส้นขอบของปุ่ม: 0px
• แบบอักษรของปุ่ม: ออกซิเจน

• ช่องว่างภายในปุ่ม: 15px
• ปุ่ม Padding ด้านล่าง: 15px

กล่องเงา

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

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -21px
• เงาสี: rgba(0,0,0,0.08)

เพิ่มโมดูลการติดตามโซเชียลมีเดียในคอลัมน์ 3

เพิ่มเครือข่ายโซเชียลทางเลือก

โมดูลต่อไปที่เราต้องการในคอลัมน์ 3 คือโมดูลการติดตามโซเชียลมีเดีย เพิ่มเครือข่ายโซเชียลที่คุณเลือก

รีเซ็ตสไตล์โซเชียลเน็ตเวิร์กทีละรายการ

ดำเนินการต่อโดยรีเซ็ตรูปแบบรายการสำหรับเครือข่ายโซเชียลแต่ละรายการ

การตั้งค่าไอคอน

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

• ไอคอนสี: #ffc023

เพิ่มโมดูลบล็อกลงในคอลัมน์ 1

องค์ประกอบ

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

• แสดงผู้แต่ง: No

เค้าโครง

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

• เค้าโครง: Grid

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

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

• แบบอักษรของชื่อเรื่อง: Oxygen
• น้ำหนักแบบอักษรของชื่อเรื่อง: ตัวหนา
• ขนาดตัวอักษรของชื่อเรื่อง: 1vw (เดสก์ท็อป), 3vw (แท็บเล็ต), 5vw (โทรศัพท์)
• ความสูงของบรรทัดชื่อเรื่อง: 1.5em

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

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

• แบบอักษรของร่างกาย: เปิด Sans
• ขนาดตัวอักษร: 0.7vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 3vw (โทรศัพท์)
• ความสูงของเส้นร่างกาย: 2.2em

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

ถัดไป จัดรูปแบบการตั้งค่าข้อความเมตาตามลำดับ:

• แบบอักษร Meta: เปิด Sans
• Meta Text Color: #ffc023
• ขนาดข้อความ Meta: 0.8vw (เดสก์ท็อป), 1.8vw (แท็บเล็ต), 3vw (โทรศัพท์)

ชายแดน

ลบเส้นขอบเริ่มต้นของโมดูลด้วย

• ความกว้างเส้นขอบของเค้าโครงตาราง: 0px

กล่องเงา

และใช้เงากล่องที่บอบบาง

• ความแรงของกล่องเงาเบลอ: 80px
• ความแรงของการกระจายเงาของกล่อง: -21px
• เงาสี: rgba(0,0,0,0.08)

ทัศนวิสัย

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

โคลนบล็อกโมดูล & วางซ้ำในคอลัมน์ 3

จากนั้น เราจะลอกแบบโมดูลบล็อกและวางสำเนาในคอลัมน์ที่สาม

เปลี่ยนการมองเห็น

เราต้องการให้โมดูลนี้ปรากฏในคอลัมน์ 3 บนอุปกรณ์ขนาดเล็กเท่านั้น นั่นคือเหตุผลที่เราจะซ่อนโมดูลทั้งหมดบนเดสก์ท็อป

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

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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