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

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

https://youtu.be/8hTA3ogf3ZQ

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

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

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

เริ่มต้นด้วยการไปที่ Divi Theme Builder และเพิ่มเทมเพลตใหม่

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

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

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

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

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

2. เริ่มสร้างเนื้อหาบล็อกโพสต์ (แถบด้านข้างขวา)

ส่วนที่ #1 การตั้งค่า

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

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

• สี 1: #8995ff
• สี 2: #6163b5
• ทิศทางการไล่ระดับสี: 150deg

ระยะห่าง

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

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

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

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

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

สีพื้นหลัง

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

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

ขนาด

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

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

ระยะห่าง

เพิ่มช่องว่างภายในด้านซ้ายและขวาต่อไป

• ช่องว่างภายในด้านซ้าย: 3%
• ช่องว่างภายในด้านขวา: 3%

ชายแดน

จากนั้น รวมมุมโค้งมนบางส่วนในการตั้งค่าเส้นขอบ

• ทุกมุม: 20px

กล่องเงา

ใช้เงากล่องด้วย

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.08)

แปลงแปล

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

• ขวา: 50px

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

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

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

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

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

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

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

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

เปลี่ยนสีข้อความลิงค์ด้วย

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

Clone Text Module สองครั้ง & วางซ้ำในคอลัมน์ที่เหลือ

เมื่อคุณสร้างโมดูลข้อความแรกเสร็จแล้ว คุณสามารถโคลนทั้งโมดูลได้สองครั้ง และวางสำเนาที่ซ้ำกันในสองคอลัมน์ที่เหลือของแถว

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

เปลี่ยนเนื้อหาแบบไดนามิกสำหรับแต่ละรายการที่ซ้ำกัน

• ซ้ำครั้งแรก: โพสต์วันที่เผยแพร่

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

เพิ่มส่วน #2

ระยะห่าง

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

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

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

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

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

ขนาด

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

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

ระยะห่าง

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

• ขอบบน: 100px
• ขอบล่าง:
  • เดสก์ท็อป: 100px
  • แท็บเล็ตและโทรศัพท์: 50px

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

ระยะห่าง

จากนั้นเปิดการตั้งค่าคอลัมน์ 1 และใช้ช่องว่างภายในด้านซ้ายและขวา

• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

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

สีพื้นหลัง

ไปที่การตั้งค่าคอลัมน์ 2 และใช้สีพื้นหลังสีขาว

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

ระยะห่าง

รวมค่าช่องว่างภายในที่กำหนดเองด้วย

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

ชายแดน

จากนั้นไปที่การตั้งค่าเส้นขอบและใช้การตั้งค่าต่อไปนี้:

• ทุกมุม: 20px
• ขอบบน:
  • ความกว้างขอบด้านบน:
    • เดสก์ท็อป: 0px
    • แท็บเล็ตและโทรศัพท์: 5px
  • สีขอบบน: #8995ff
• ขอบซ้าย:
  • ความกว้างของขอบด้านซ้าย:
    • เดสก์ท็อป: 5px
    • แท็บเล็ตและโทรศัพท์: 0px
  • ขอบซ้ายสี: #8995ff

กล่องเงา

ตั้งค่าคอลัมน์ให้สมบูรณ์โดยใช้เงาของกล่องต่อไปนี้:

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.08)

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

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

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

• เนื้อหาแบบไดนามิก: ชื่อโพสต์/ที่เก็บถาวร
• ก่อน: <H1>
• หลัง: </H1>

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

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

• แบบอักษรของหัวเรื่อง: Alata
• ขนาดข้อความหัวเรื่อง:
  • เดสก์ท็อป: 4.8rem
  • แท็บเล็ต: 3.2rem
  • โทรศัพท์: 2.3rem
• ระยะห่างของตัวอักษรหัวเรื่อง: -2px

ระยะห่าง

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

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

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

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

เพิ่มโมดูลข้อความอื่นในคอลัมน์ 1 และปล่อยให้กล่องเนื้อหาว่าง

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

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

• ภาพพื้นหลังแบบไดนามิก: ภาพเด่น
• ขนาดภาพพื้นหลัง: ปก

ระยะห่าง

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

• ช่องว่างภายในด้านบน: 250px
• แผ่นรองด้านล่าง: 250px

ชายแดน

จากนั้นไปที่การตั้งค่าเส้นขอบและเพิ่มมุมโค้งมน

• ทุกมุม: 20px

กล่องเงา

ตั้งค่าโมดูลให้สมบูรณ์โดยใช้การตั้งค่าเงาของกล่องต่อไปนี้:

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.08)

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

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

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

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

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

เปลี่ยนฟอนต์หัวเรื่องด้วย

• แบบอักษรของหัวเรื่อง: Alata

ระยะห่าง

และลบระยะขอบล่างเริ่มต้น

• ขอบล่าง: 0px

CSS Class

สุดท้ายแต่ไม่ท้ายสุด ไปที่แท็บขั้นสูงและใช้คลาส CSS ต่อไปนี้:

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

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

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

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

<style>
.blog-post-content p,
.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

เค้าโครง

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

• แสดงตัวคั่นชายแดน: ไม่

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

เปลี่ยนฟอนต์ชื่อเรื่องต่อไป

• แบบอักษรของชื่อเรื่อง: Alata

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

พร้อมกับฟอนต์ตัว

• แบบอักษรของร่างกาย: Lato

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

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

ด้านล่างโมดูลแถบด้านข้าง เราจะเพิ่มโมดูลเพิ่มประสิทธิภาพอีเมล เพิ่มสำเนาที่คุณเลือก

เพิ่มบัญชี

เชื่อมโยงบัญชีอีเมลของคุณต่อไป

ลบสีพื้นหลัง

แล้วเอาสีพื้นหลังออก

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

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

• ฟอนต์ฟิลด์: Lato

• Box Shadow: ตัวเลือกแรก
• เงาสี: rgba(0,0,0,0.06)

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

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

• สีข้อความ: Dark

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

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

• ระดับหัวเรื่อง: H3
• แบบอักษรของชื่อเรื่อง: Alata
• ขนาดข้อความชื่อเรื่อง: 1.5rem

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

ต่อไป เราจะจัดรูปแบบปุ่ม

• ใช้สไตล์ที่กำหนดเองสำหรับปุ่ม: ใช่
• ขนาดข้อความของปุ่ม: 20px
• สีข้อความของปุ่ม: #ffffff
• ไล่ระดับสี 1: #8995ff
• ไล่ระดับสี 2: #6163b5
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 150deg
• ความกว้างของขอบปุ่ม: 0px

• รัศมีเส้นขอบของปุ่ม: 5px
• แบบอักษรของปุ่ม: Lato

ระยะห่าง

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

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

เพิ่มมาตรา #3

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

ไปยังส่วนถัดไปและส่วนสุดท้าย เพิ่มพื้นหลังไล่ระดับสีต่อไปนี้:

• สี 1: #8995ff
• สี 2: #6163b5
• ประเภทการไล่ระดับสี: เชิงเส้น
• ทิศทางการไล่ระดับสี: 150deg

ระยะห่าง

ไปที่แท็บการออกแบบของส่วนและลบช่องว่างด้านบนเริ่มต้น

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

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

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

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

สีพื้นหลัง

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

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

ขนาด

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

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

ระยะห่าง

แก้ไขค่าการเติมตาม:

• ช่องว่างภายในด้านบน: 100px
• ช่องว่างภายในด้านล่าง: 100px
• ช่องว่างภายในด้านซ้าย: 5%
• ช่องว่างภายในด้านขวา: 5%

ชายแดน

จากนั้นเพิ่มมุมโค้งมน

• ทุกมุม: 20px

กล่องเงา

เราจะเพิ่มเงาของกล่องด้วย

• ความแรงของกล่องเงาเบลอ: 50px
• เงาสี: rgba(0,0,0,0.08)

แปลงแปล

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

• ขวา: -100px

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

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

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

• ฟิลด์สีพื้นหลัง: rgba(255,255,255,0.09)
• สีข้อความของฟิลด์: #ffffff
• ฟอนต์ฟิลด์: Lato

• ฟิลด์ มุมโค้งมน: 10px (ทุกมุม)
• ฟิลด์ ความกว้างเส้นขอบด้านล่าง: 5px
• ฟิลด์ขอบด้านล่างสี: #ffffff

• Fields Box Shadow: ตัวเลือกแรก
• เงาสี: rgba(0,0,0,0.06)

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

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

• มุมโค้งมนของรูปภาพ: 100px (ทุกมุม)

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

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

• สีข้อความ: เบา

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

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

• ระดับหัวเรื่องการนับความคิดเห็น: H2
• แบบอักษรการนับความคิดเห็น: Alata
• ขนาดข้อความจำนวนความคิดเห็น: 2rem
• จำนวนความคิดเห็น ความสูงของบรรทัด: 1.4em

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

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

• แบบฟอร์ม หัวเรื่อง ระดับหัวเรื่อง: H3
• แบบอักษรของชื่อแบบฟอร์ม: Alata

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

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

• แบบอักษร Meta: Alata
• ขนาดข้อความ Meta: 1.2rem

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

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

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

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

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

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

• ระยะห่างระหว่างตัวอักษรของปุ่ม: 1px
• แบบอักษรของปุ่ม: Lato

• ปุ่มเสริมด้านบน: 20px
• ปุ่ม Padding ด้านล่าง: 20px

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

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

margin-top: 50px;

3. ใช้ Sticky Effect กับคอลัมน์แถบด้านข้าง

เปิดคอลัมน์แถบด้านข้าง

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

ใช้ Sticky Effect

ไปที่แท็บขั้นสูงของคอลัมน์และใช้การตั้งค่าแบบติดหนึบต่อไปนี้:

• ตำแหน่งเหนียว:
  • เดสก์ท็อป: Stick to Top
  • แท็บเล็ตและโทรศัพท์: อย่าเหนียวเหนอะหนะ
• ขีด จำกัด ปักหมุดด้านล่าง: แถว
• ออฟเซ็ตจากองค์ประกอบติดหนึบรอบข้าง: ใช่
• รูปแบบเริ่มต้นของการเปลี่ยนและรูปแบบติดหนึบ: ใช่

4. วางแถบด้านข้างทางด้านซ้าย

ลากคอลัมน์แถบด้านข้างเหนือคอลัมน์ 1

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

เปลี่ยนเส้นขอบคอลัมน์แถบด้านข้าง

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

• ความกว้างขอบขวา:
  • เดสก์ท็อป: 5px
  • แท็บเล็ตและโทรศัพท์: 0px
• สีขอบขวา: #8995ff
• ความกว้างของเส้นขอบด้านซ้าย: ไม่มี

ใช้คอลัมน์ย้อนกลับหากต้องการ

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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