วิธีใช้คุณสมบัติเนื้อหาแบบไดนามิกของ Divi เพื่อออกแบบเค้าโครงโพสต์แบบไดนามิก

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

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

มาเริ่มกันเลย.

แอบมอง

สิ่งที่คุณต้องการเพื่อเริ่มต้น

สำหรับบทช่วยสอนนี้ คุณจะต้องมีสิ่งต่อไปนี้:

• ธีม Divi
• ชุดเค้าโครงผู้ฝึกสอนส่วนบุคคล ชุดรูปแบบนี้สามารถเข้าถึงได้จาก Divi Builder เราจะใช้เค้าโครงหน้าบริการผู้ฝึกสอนส่วนบุคคลเพื่อเริ่มต้นการออกแบบเค้าโครงโพสต์ของเรา

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

ส่วนที่ 1: การเพิ่มเลย์เอาต์ที่สร้างไว้ล่วงหน้าไปยังโพสต์

หากต้องการเริ่มต้น ให้สร้างโพสต์ใหม่ (ไม่ใช่หน้า) ตั้งชื่อโพสต์ของคุณ จากนั้นคลิกปุ่ม ใช้ Divi Builder อย่าเพิ่งปรับใช้ Visual Builder เพราะก่อนอื่นเราต้องปรับแต่งการตั้งค่าโพสต์จากหน้าจอตัวแก้ไข WordPress เริ่มต้น

เนื่องจากเราต้องการเพิ่มเลย์เอาต์ที่สร้างไว้ล่วงหน้าเพื่อดึงรูปภาพของเราจากเลย์เอาต์ (เราต้องการสำหรับรูปภาพเด่นของเรา) คลิกปุ่ม Load Layout ที่อยู่ในเมนู Divi Builder

จากป๊อปอัป Load From Library เลือกเค้าโครงหน้าบริการผู้ฝึกสอนส่วนบุคคลและปรับใช้กับโพสต์ของคุณโดยคลิกปุ่ม "ใช้เค้าโครงนี้"

จากนั้นเผยแพร่โพสต์ของคุณเพื่อบันทึกการตั้งค่าของคุณ

ส่วนที่ 2: การอัปเดตการตั้งค่าหน้า Divi โพสต์ข้อมูลเมตาและรูปภาพเด่น

การตั้งค่าหน้า Divi

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

ที่ด้านบนขวาของหน้า ให้ค้นหากล่องการตั้งค่าหน้า Divi และอัปเดตสิ่งต่อไปนี้:

เค้าโครงหน้า: เต็มความกว้าง
แสดงชื่อกระทู้: Hide

หากคุณไม่เห็นการตั้งค่าหน้า Divi แสดงว่าคุณอาจไม่ได้เปิดใช้งานตัวสร้าง Divi ดังนั้นตรวจสอบให้แน่ใจว่าคุณทำอย่างนั้นก่อน

เพิ่มหมวดหมู่

ใต้กล่องหมวดหมู่ ให้เพิ่มหมวดหมู่ใหม่ที่เรียกว่า “การฝึกความแข็งแกร่ง” และตรวจสอบให้แน่ใจว่าเป็นหมวดหมู่เดียวที่เลือกไว้

เพิ่มแท็ก

ในกล่องแท็ก ให้เพิ่มแท็กสามแท็กต่อไปนี้: ความเร็ว การฝึก และการออกกำลังกาย

ภาพที่โดดเด่น

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

ส่วนที่ 3: การเพิ่มฟิลด์ที่กำหนดเองสำหรับเนื้อหา Dynamic Workout

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

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

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

จากนั้นคลิกดรอปดาวน์กล่องฟิลด์กำหนดเอง (หากยุบ) เพื่อเพิ่มฟิลด์กำหนดเองใหม่และป้อนข้อมูลต่อไปนี้:

ชื่อ: ชื่อการออกกำลังกาย
ความคุ้มค่า: การออกกำลังกายที่โดดเด่น

จากนั้นคลิกปุ่มเพิ่มฟิลด์กำหนดเอง

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

ดำเนินการตามขั้นตอนนี้ต่อไปเพื่อเพิ่มฟิลด์ที่กำหนดเองต่อไปนี้ในเว็บไซต์ของคุณ

ชื่อ: วอร์มอัพ
มูลค่า: วิ่ง 800 เมตร

ชื่อ: ระยะเวลา
มูลค่า: 30 นาที

ชื่อ: ยกน้ำหนัก
ค่า:

<ul>
<li>Squats: 10 reps at 60% max (4 sets)</li>
<li>Bench: 6 reps at 70% max (3 sets)</li>
</ul>

ชื่อ: เย็นลง
มูลค่า: วิ่ง 400 เมตร

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

อย่าลืมอัปเดตโพสต์ของคุณ!

ส่วนที่ 4: การเพิ่มเนื้อหาแบบไดนามิกให้กับเค้าโครงโพสต์โดยใช้ Visual Builder

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

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

ในส่วนหัว ให้ลบโมดูลปุ่ม (เราไม่ต้องการมัน)

การแทนที่ภาพพื้นหลังด้วยเนื้อหาไดนามิกของรูปภาพที่โดดเด่น

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

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

ไปต่อกันเลย

การเพิ่มชื่อโพสต์ด้วยโมดูลชื่อโพสต์

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

จากนั้นอัปเดตการตั้งค่าโมดูลชื่อบทความดังนี้:

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

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

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

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

ตอนนี้ชื่อโพสต์ของคุณควรตรงกับการออกแบบของชื่อเลย์เอาต์ดั้งเดิม

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

การใช้เนื้อหาแบบไดนามิกเพื่อสร้างแถวของ Meta-Data

ย้ายไปยังส่วนที่สองของเค้าโครง จากนั้นนำช่องว่างด้านบนออกโดยลากออกไปในตัวสร้างภาพหรือตั้งค่าเป็น 0px ในการตั้งค่าส่วน

ในแถวแรกของส่วนที่สองของเค้าโครง คุณจะสังเกตเห็นโมดูลข้อความ (มีเนื้อหา "เกี่ยวกับการฝึกอบรมส่วนบุคคล") โดยมีตัวแบ่งอยู่ข้างใต้ นี่คือที่ที่เราจะสร้างแถวข้อมูลเมตาที่กำหนดเองโดยใช้เนื้อหาแบบไดนามิก

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

คุณจะต้องเพิ่มระยะห่างแบบกำหนดเองดังนี้:

ช่องว่างภายในแบบกำหนดเอง: เหลือ 1%, ขวา 1%

จากนั้นบันทึกการตั้งค่าแถว

ตอนนี้อัปเดตโครงสร้างคอลัมน์แถวเป็นเค้าโครงสี่คอลัมน์

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

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

จากนั้นเปลี่ยนรูปแบบวันที่ตามนั้น

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

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

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

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

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

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

ก่อน: ความคิดเห็น:

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

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

ก่อน: โดย:
รูปแบบชื่อ: ชื่อและนามสกุล

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

จากนั้นปรับการตั้งค่าการออกแบบเพื่อดึงภาพขึ้นและกำหนดความกว้างที่กำหนดเองดังนี้:

ความกว้าง: 80px
มาร์จิ้นที่กำหนดเอง (เดสก์ท็อป): -82px Top
มาร์จิ้นที่กำหนดเอง (แท็บเล็ต): 0px Top

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

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

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

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

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

สำหรับชื่อ ให้เพิ่มฟิลด์ที่กำหนดเองชื่อ "ชื่อการออกกำลังกาย" เป็นเนื้อหาแบบไดนามิก จากนั้นสำหรับเนื้อหาการนำเสนอ ให้เพิ่มฟิลด์ที่กำหนดเองชื่อ “ระยะเวลา” เป็นเนื้อหาแบบไดนามิก

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

ถัดไป เพิ่มโมดูลประกาศที่สองด้านล่าง ป้อนข้อความ "อุ่นเครื่อง" เป็นชื่อ จากนั้นเพิ่มฟิลด์ที่กำหนดเองชื่อ "Warmup" เป็นเนื้อหาแบบไดนามิก

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

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

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

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

ส่วนที่ 6: การออกแบบส่วน "หัวข้อที่เกี่ยวข้อง" โดยใช้แท็กโพสต์เนื้อหาแบบไดนามิก

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

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

ก่อน: หัวข้อที่เกี่ยวข้อง:
ตัวคั่นแท็ก: //

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

เมื่อต้องการจัดรูปแบบเนื้อหา ให้อัปเดตการตั้งค่าการออกแบบต่อไปนี้:

แบบอักษรของข้อความ: Oswald
น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
สีข้อความ: #ff4c00
ขนาดข้อความ: 30px
แบบอักษรของลิงก์: Oswald
Link Font Weight: กึ่งหนา
สีของข้อความลิงก์: #262d3f
ขนาดข้อความลิงก์: 50px
ระยะห่างระหว่างตัวอักษรของลิงก์: 2px
ความสูงของสายลิงก์: 1.6em

นี่คือการออกแบบขั้นสุดท้าย

ส่วนที่ 7: การเพิ่มประวัติผู้แต่งและส่วนความคิดเห็น

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

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

หากต้องการเพิ่มส่วนประวัติผู้เขียนที่ด้านล่างของเนื้อหาโพสต์ คุณสามารถใช้เนื้อหาไดนามิกของผู้เขียนโพสต์ รูปภาพโปรไฟล์ของผู้เขียนโพสต์ และชีวประวัติของผู้เขียน ดังที่คุณเห็นในภาพหน้าจอด้านล่าง ฉันสร้างแถวคอลัมน์ 1/4 3/4 จากนั้นฉันก็เพิ่มรูปโปรไฟล์ของผู้เขียนโพสต์ในคอลัมน์ด้านซ้าย ในคอลัมน์ทางขวา ฉันได้เพิ่มผู้เขียนโพสต์โดยมีประวัติผู้เขียนอยู่ด้านล่าง ฉันยังเพิ่มเนื้อหาไดนามิกของรูปภาพเด่นเป็นภาพพื้นหลังสำหรับส่วน (และการซ้อนทับแบบไล่ระดับสี) นี่คือตัวอย่างของสิ่งที่จะมีลักษณะ

การเพิ่มส่วนความคิดเห็นโดยใช้โมดูลความคิดเห็น

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

การออกแบบขั้นสุดท้าย

นี่คือการออกแบบขั้นสุดท้ายของโพสต์ทั้งหมดเมื่อการออกแบบทั้งหมดได้รับการปรับปรุง

อัปเดตเนื้อหาโพสต์และบันทึกเค้าโครงสำหรับโพสต์ในอนาคต

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

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

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

ฉันหวังว่าจะได้ยินจากคุณในความคิดเห็น

ไชโย!