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

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

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

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

แอบมอง

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

ดาวน์โหลดเค้าโครงฟรี

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

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

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

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

ดาวน์โหลด

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

ในการนำเข้าเค้าโครงส่วนไปยังตัวสร้างธีม Divi ให้ไปที่ตัวสร้างธีม Divi

คลิกไอคอนการพกพา

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

จากนั้นคลิกปุ่มนำเข้า

เมื่อเสร็จแล้ว เทมเพลตส่วนจะปรากฏในตัวสร้างธีม Divi

ไปกวดวิชากันเถอะ

ส่วนที่ 1: การนำเข้าเทมเพลตที่สร้างไว้ล่วงหน้า

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

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

นำเข้าเทมเพลตเว็บไซต์เริ่มต้น

ขั้นแรก คุณจะต้องดาวน์โหลด Sixth FREE Theme Builder Pack สำหรับ Divi จากนั้นแตกไฟล์

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

นำเข้าเทมเพลตโพสต์

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

ปิดใช้งาน Global บนส่วนหัวของเทมเพลตโพสต์

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

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

การสร้างแถบข้อมูลโพสต์แบบไดนามิก

การเพิ่มส่วนและแถว

ภายในตัวแก้ไขเค้าโครงส่วนหัว ให้สร้างส่วนปกติใหม่ภายใต้ส่วนปัจจุบันที่มีส่วนหัว

จากนั้นเพิ่มแถวของคอลัมน์หนึ่งในสี่ของครึ่งหนึ่งส่วนสี่ลงในส่วน

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

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

• สีพื้นหลัง: #eceffe
• ช่องว่างภายใน: บน 10px, ด้านล่าง 10px

การตั้งค่าแถว

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

• ความกว้างของรางน้ำ: 1
• ช่องว่างภายใน: 0px บน, 0px ด้านล่าง

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

display:flex !important;
flex-wrap: nowrap;
align-items: center;

นี้จะทำให้แน่ใจว่าคอลัมน์ลงสแต็คบนมือถือ

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

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

เพิ่มโมดูลข้อความ

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

เพิ่มชื่อโพสต์/ที่เก็บถาวรเป็นเนื้อหาแบบไดนามิก

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

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

You're Reading: 

จากนั้นบันทึกการเปลี่ยนแปลง

การตั้งค่าการออกแบบ

ภายใต้แท็บออกแบบ กำหนดลักษณะของชื่อไดนามิกดังนี้:

• แบบอักษรข้อความ: Ubuntu
• น้ำหนักแบบอักษรของข้อความ: ปานกลาง
• สีข้อความ: #121212
• ขนาดข้อความ: 14px (เดสก์ท็อป), 12px (แท็บเล็ต), 11px (โทรศัพท์)

เพิ่มไดนามิกโพสต์หมวดหมู่ Info

ในการสร้างข้อมูลหมวดหมู่ของโพสต์ ให้ทำซ้ำโมดูลข้อความที่มีชื่อโพสต์

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

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

• ก่อนหน้านี้: In
• ตัวคั่นหมวดหมู่: &

อัพเดทสีลิงค์

ภายใต้แท็บการออกแบบ ให้อัปเดตสีลิงก์ดังนี้:

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

การเพิ่มข้อมูลการนับความคิดเห็นแบบไดนามิก

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

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

จากนั้นจึงเพิ่มความคิดเห็นของโพสต์เป็นเนื้อหาแบบไดนามิกในเนื้อหาข้อความ

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

• หลัง: ความคิดเห็น

การเพิ่มคำกระตุ้นการตัดสินใจ "แสดงความคิดเห็น"

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

ในการสร้าง CTA ให้ทำซ้ำโมดูลข้อความในคอลัมน์ 2 โดยถือจำนวนความคิดเห็น

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

<a href="#respond">Leave a Comment</a>

การเพิ่มปุ่มสมัครสมาชิก

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

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

ใต้แท็บออกแบบ ให้อัปเดตลักษณะปุ่มดังนี้:

• ขนาดข้อความของปุ่ม: 14px (เดสก์ท็อป), 12px (แท็บเล็ต), 11px (โทรศัพท์)
• สีข้อความของปุ่ม: #ffffff
• ปุ่มไล่ระดับสีพื้นหลังซ้าย: #7e5ce6
• ปุ่มไล่ระดับสีพื้นหลังขวา: #25b8ee
• ความกว้างของขอบปุ่ม: 0px
• รัศมีเส้นขอบของปุ่ม: 100px
• ระยะห่างระหว่างตัวอักษรของปุ่ม : 2px
• แบบอักษรของปุ่ม: Ubuntu
• น้ำหนักแบบอักษรของปุ่ม: ตัวหนา
• รูปแบบตัวอักษรของปุ่ม: TT
• Padding (เดสก์ท็อป): บน 10px, 10px ล่าง, 20px ซ้าย, 20px ขวา
• ช่องว่างภายใน (แท็บเล็ต): บน 6px, 6px ล่าง, 14px ซ้าย, 14px ขวา

หากต้องการเพิ่มลิงก์สมอให้กับปุ่ม ให้ไปที่แท็บเนื้อหาและเพิ่ม URL ลิงก์ของปุ่มต่อไปนี้:

• URL ลิงก์ของปุ่ม: #subscribe

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

ปิดการใช้งานคอลัมน์ 1 บนมือถือ

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

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

ให้ส่วนตำแหน่งคงที่และดัชนี Z สูง

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

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

• ตำแหน่ง: คงที่
• ดัชนี Z: 998

สังเกตว่าดัชนี z คือ 998 เพราะฉันต้องการให้แถบคงที่อยู่เหนือเนื้อหาที่เหลือในโพสต์

อัปเดตดัชนีส่วนหัวของส่วน Z

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

• ดัชนี Z: 999 (มากกว่าหนึ่งส่วนที่มีแถบ)

บันทึกการเปลี่ยนแปลงในตัวแก้ไขเค้าโครง

เพิ่ม CSS ID ลงในแถวการเลือกรับอีเมลบนเทมเพลตเนื้อหา

ปุ่มสมัคร CTA ที่เราเพิ่มลงในแถบยังคงต้องมีจุดยึดหรือตำแหน่งที่จะ "กระโดด" ไปที่บนเทมเพลตโพสต์ เนื่องจาก CTA คือการ "สมัครรับข้อมูล" เราจึงต้องข้ามไปยังแบบฟอร์ม opi-in ของอีเมล

ในการดำเนินการนี้ ให้เปิดส่วน "เนื้อหาที่กำหนดเอง" ของเทมเพลตโพสต์ในตัวสร้างธีม

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

• CSS ID: สมัครสมาชิก

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

เมื่อเสร็จแล้วให้บันทึกการเปลี่ยนแปลงไปยังเลย์เอาต์และตัวสร้างธีม

ผลสุดท้าย

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

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

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

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

ไชโย!