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

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

ไปกันเถอะ

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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

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

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

ดาวน์โหลด

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

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

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

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

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

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

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

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

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

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

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

สีพื้นหลัง

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

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

ภาพพื้นหลัง

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

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

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

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

ขนาด

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

• ความกว้างสูงสุด: 1380px

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

องค์ประกอบ

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

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

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

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

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

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

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

• แบบอักษรของชื่อเรื่อง: Work Sans
• ขนาดตัวอักษรของชื่อเรื่อง: 7rem (เดสก์ท็อป), 4rem (แท็บเล็ต), 2rem (โทรศัพท์)
• ระยะห่างของตัวอักษรชื่อเรื่อง: -2px

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

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

• แบบอักษร Meta: Work Sans
• ขนาดข้อความ Meta: 1rem

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

ระยะห่าง

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

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

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

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้างสูงสุด: 1380px

ระยะห่าง

ลบช่องว่างภายในด้านบนเริ่มต้นทั้งหมดด้วย

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

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

ระยะห่าง

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

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

กล่องเงา

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

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

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

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

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

• แบบอักษรของข้อความ: Work Sans
• ขนาดตัวอักษร: 1rem (เดสก์ท็อป), 0.9rem (แท็บเล็ตและโทรศัพท์)
• ความสูงของบรรทัดข้อความ: 2.3em

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

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

• แบบอักษรของหัวเรื่อง: Work Sans
• หัวเรื่อง 2 ขนาดตัวอักษร: 1.6rem (H2), 1.5rem (H3), 1.4rem (H4), 1.3rem (H5), 1.2rem (H6)
• ความสูงของบรรทัดหัวเรื่อง: 1.3em

CSS ID

ตั้งค่าโมดูลให้สมบูรณ์โดยเพิ่ม CSS ID

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

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

แทรกโค้ด CSS ของหัวเรื่อง

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

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

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

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

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

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

• ชื่อ: ผู้ตั้งกระทู้
• ตำแหน่ง: Author
• ร่างกาย: ผู้เขียน Bio

เนื้อหาไดนามิกของรูปภาพ

เพิ่มรูปโปรไฟล์แบบไดนามิกของผู้เขียนลงในโมดูลด้วย

• รูปภาพ: รูปภาพโปรไฟล์ผู้แต่ง

โฮเวอร์สีพื้นหลัง

จากนั้นเพิ่มสีพื้นหลังสีขาวบนโฮเวอร์

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

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

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

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

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

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

• แบบอักษรของร่างกาย: Work Sans
• ขนาดข้อความเนื้อหา: 0.9rem
• ความสูงของเส้นร่างกาย: 2em

การตั้งค่าข้อความตำแหน่ง

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

• แบบอักษรของตำแหน่ง: ทำงาน Sans
• ขนาดข้อความตำแหน่ง: 0.9rem

ขนาดเริ่มต้น

แก้ไขความสูงในการตั้งค่าการปรับขนาด

• ความสูง: 160px (เดสก์ท็อป), อัตโนมัติ (แท็บเล็ตและโทรศัพท์)

เลื่อนขนาด

และนำความสูงกลับมาเป็นอัตโนมัติเมื่อโฮเวอร์

• ส่วนสูง: auto

ระยะห่าง

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

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

เส้นขอบเริ่มต้น

และเราจะใช้เส้นขอบด้วย

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

โฮเวอร์ชายแดน

แก้ไขความกว้างของเส้นขอบเมื่อโฮเวอร์

• ความกว้างของเส้นขอบด้านซ้าย: 4px

ค่าเริ่มต้นกล่องเงา

จากนั้นเพิ่มเงาของกล่อง

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

เงากล่องเลื่อน

เปลี่ยนสีเงาเมื่อโฮเวอร์

• เงาสี: rgba(0,0,0,0.11)

ตัวกรองเริ่มต้น

ต่อไปเราจะเปลี่ยนความทึบ

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

โฮเวอร์ฟิลเตอร์

นำความทึบกลับเป็น 100% เมื่อวางเมาส์เหนือ

• ความทึบ: 100%

องค์ประกอบหลัก CSS

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

position: sticky;
position: -webkit-sticky;
top: 50px !important;

รูปภาพสมาชิก CSS

เรากำลังตรวจสอบให้แน่ใจว่ารูปโปรไฟล์ของผู้เขียนอยู่ชิดซ้ายโดยการเพิ่มโค้ด CSS หนึ่งบรรทัดลงในรูปภาพสมาชิกของโมดูล

text-align: left;

การมองเห็นเริ่มต้น

ในการซ่อนเนื้อหาของโมดูลบนเดสก์ท็อป เราจะเปลี่ยนโอเวอร์โฟลว์ในแท็บขั้นสูง

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

โฮเวอร์การมองเห็น

เราจะทำให้เนื้อหาปรากฏบนโฮเวอร์โดยเปลี่ยนโอเวอร์โฟลว์ให้มองเห็นได้

• ล้นแนวนอน: มองเห็นได้
• ล้นแนวตั้ง: มองเห็นได้

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

เพิ่มส่วนอื่นในการออกแบบของคุณ

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

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

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

ขนาด

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

• ใช้ความกว้างของรางน้ำแบบกำหนดเอง: ใช่
• ความกว้างของรางน้ำ: 1
• ปรับความสูงของคอลัมน์ให้เท่ากัน: ใช่
• ความกว้างสูงสุด: 1380px

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

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

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

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

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

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

• ระดับหัวเรื่องการนับความคิดเห็น: H2
• ฟอนต์การนับความคิดเห็น: Work Sans
• ขนาดข้อความจำนวนความคิดเห็น: 1.5rem

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

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

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

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

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

• แบบอักษร Meta: Work Sans
• ขนาดข้อความ Meta: 1rem

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

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

• แบบอักษรแสดงความคิดเห็น: Work Sans
• ขนาดข้อความแสดงความคิดเห็น: 1rem
• ความสูงของบรรทัดความคิดเห็น: 2.3em

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

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

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

• แบบอักษรของปุ่ม: Work Sans

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

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

ดูตัวอย่าง

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

เดสก์ทอป

มือถือ

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

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

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