วิธีสร้างทิกเกอร์โพสต์บล็อกด้วยโมดูลตัวเลื่อนโพสต์ของ Divi

ทิกเกอร์โพสต์บล็อกเป็นเครื่องมือที่สะดวกสำหรับการแสดงโพสต์บล็อกแบบไดนามิก (ล่าสุด ที่เกี่ยวข้อง ฯลฯ) บนเว็บไซต์ของคุณ คุณสามารถคิดว่ามันเป็นสัญลักษณ์ข่าวสำหรับโพสต์บล็อก WordPress

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

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

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

แอบมอง

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

นี่คือวิธีที่ทิกเกอร์โพสต์วางเรียงกันอย่างสวยงามบนหน้าจอโทรศัพท์

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

ดาวน์โหลดเลย์เอาต์และเทมเพลตฟรี

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

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

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

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

ดาวน์โหลด

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

นำเข้าเค้าโครงไปยัง Divi Library

ในการนำเข้าเค้าโครงส่วนไปยังไลบรารี Divi ของคุณ ให้ไปที่ Divi Library

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

ในป๊อปอัปการพกพา ให้เลือกแท็บนำเข้าและเลือกไฟล์ดาวน์โหลดจากคอมพิวเตอร์ของคุณ มันจะเป็นไฟล์ JSON ภายในโฟลเดอร์ชื่อ “รูปแบบการโพสต์บล็อกโพสต์ (Divi Library)”

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

เมื่อเสร็จแล้ว เค้าโครงส่วนจะพร้อมใช้งานใน Divi Builder

นำเข้าเทมเพลตส่วนหัวไปยังตัวสร้างธีม Divi

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

จากนั้นใช้ไอคอนการพกพาที่ด้านบนขวาของหน้าเพื่อนำเข้าไฟล์ JSON มันจะเป็นไฟล์ในโฟลเดอร์ชื่อ “เทมเพลตส่วนหัวของบล็อกโพสต์พร้อมสัญลักษณ์โพสต์ (ตัวสร้างธีม)”

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

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

ในการเริ่มต้น คุณจะต้องทำสิ่งต่อไปนี้:

1. หากคุณยังไม่ได้ติดตั้ง ให้ติดตั้งและเปิดใช้งานธีม Divi
2. สร้างหน้าใหม่ใน WordPress และใช้ Divi Builder เพื่อแก้ไขหน้าในส่วนหน้า (ตัวสร้างภาพ)
3. เลือกตัวเลือก "สร้างตั้งแต่เริ่มต้น"

หลังจากนั้น คุณจะมีผืนผ้าใบเปล่าเพื่อเริ่มออกแบบใน Divi

การสร้าง Ticker โพสต์บล็อกใน Divi

การสร้างแถว

ในการเริ่มต้น ให้สร้างแถวหนึ่งคอลัมน์ภายในส่วน

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

ถัดไป อัปเดตการตั้งค่าการออกแบบแถวดังนี้:

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

การสร้างชื่อ Post Ticker ด้วยโมดูลข้อความ

เมื่อแถวอยู่ในตำแหน่งแล้ว ให้เพิ่มโมดูลข้อความในแถวเพื่อสร้างชื่อย่อของโพสต์

ข้อความชื่อเรื่องและพื้นหลัง

อัปเดตข้อความเนื้อหาเป็น "โพสต์ล่าสุด:"

จากนั้นอัปเดตสีพื้นหลัง:

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

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

ใต้แท็บออกแบบ ให้อัปเดตสไตล์ข้อความดังนี้:

• แบบอักษรของข้อความ: Poppins
• น้ำหนักแบบอักษรของข้อความ: กึ่งหนา
• รูปแบบตัวอักษรของข้อความ: TT
• สีข้อความ: rgba(255,255,255,0.7)
• ระยะห่างของตัวอักษรข้อความ: 1px
• ความสูงของบรรทัดข้อความ: 40px
• การจัดตำแหน่งข้อความ: กึ่งกลาง

• ความกว้าง: 100%
• ความกว้างสูงสุด: 175px (เดสก์ท็อปและแท็บเล็ต), 100% (โทรศัพท์)

ที่ดูแลชื่อทิกเกอร์โพสต์ของเรา ตอนนี้เรามาเริ่มสร้างทิกเกอร์โพสต์กัน

การสร้างทิกเกอร์โพสต์บล็อกด้วยโมดูลตัวเลื่อนโพสต์บล็อก

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

เพิ่มโมดูลตัวเลื่อนโพสต์ภายใต้โมดูลข้อความ

โพสต์เนื้อหา Slider

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

หากต้องการซ่อนข้อความที่ตัดตอนมาของโพสต์ โปรดอัปเดตสิ่งต่อไปนี้:

• ใช้ข้อความที่ตัดตอนมา: NO
• ความยาวข้อความที่ตัดตอนมา: 0

โพสต์องค์ประกอบตัวเลื่อนและพื้นหลัง

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

• แสดงการควบคุม: NO
• แสดงปุ่มอ่านเพิ่มเติม: ไม่
• แสดงโพสต์ Meta: NO

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

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

การตั้งค่าการออกแบบตัวเลื่อนโพสต์

รูปแบบการวางซ้อนและลูกศร

ภายใต้แท็บการออกแบบ ให้อัปเดตการซ้อนทับพื้นหลังและสีของลูกศรดังนี้:

• ใช้การซ้อนทับพื้นหลัง: ใช่
• พื้นหลังซ้อนทับสี: rgba(248,248,248,0.9)
• ลูกศรสี: #ffffff (เดสก์ท็อป), #ef51f7 (โฮเวอร์)

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

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

• แบบอักษรของชื่อเรื่อง: Poppins
• น้ำหนักแบบอักษรของชื่อเรื่อง: ปานกลาง
• การจัดตำแหน่งข้อความชื่อเรื่อง: ซ้าย
• ชื่อข้อความสี: #333333
• สีข้อความของชื่อเรื่อง (โฮเวอร์): #ef51f7
• ขนาดข้อความของชื่อเรื่อง: 16px (เดสก์ท็อป), 14px (โทรศัพท์)
• ความสูงของบรรทัดหัวเรื่อง: 40px
• เงาข้อความชื่อเรื่อง: ดูภาพหน้าจอ
• ชื่อข้อความเงาสี: โปร่งใส

ระยะห่าง

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

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

แอนิเมชั่นอัตโนมัติ

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

เพิ่มแอนิเมชั่นอัตโนมัติดังนี้:

• แอนิเมชั่นอัตโนมัติ: ON
• ความเร็วแอนิเมชั่นอัตโนมัติ: 3500

รู้สึกอิสระที่จะเพิ่มหรือลดความเร็วในสิ่งที่คุณคิดว่าดีที่สุด

จัดแต่งทรงผมขั้นสูง

CSS Class และ Custom CSS

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

ขั้นแรก เพิ่มคลาส CSS แบบกำหนดเองดังนี้:

• CSS Class: et-post-ticker

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

padding-bottom:0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

เพื่อให้ลูกศรสไลด์มีลักษณะเหมือนปุ่มมากขึ้น ให้เพิ่ม CSS ต่อไปนี้ในลูกศรสไลด์:

height: 40px;
width: 40px;
line-height:40px;
font-size: 28px;
text-align: center;
margin-top:-20px;
background:#333;

CSS เพิ่มเติมพร้อมโค้ดโมดูลสำหรับการวางตำแหน่งลูกศรสไลด์

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

ในการดำเนินการนี้ ให้เพิ่มโมดูลโค้ดใหม่ใต้แถบเลื่อนโพสต์

จากนั้นวาง CSS ต่อไปนี้เพื่อให้แน่ใจว่าได้ห่อด้วยแท็กรูปแบบที่จำเป็น

.et-post-ticker.et_pb_slider:hover .et-pb-arrow-prev,
.et-post-ticker .et-pb-arrow-prev {
  right: 40px !important;
  opacity: 1 !important;
  left: auto !important;
}
.et-post-ticker.et_pb_slider:hover .et-pb-arrow-next,
.et-post-ticker .et-pb-arrow-next {
  right: 0px !important;
  opacity: 1 !important;
}
.et-post-ticker .et_pb_slide {
  padding: 0 84px 0 3% !important;
}

ผลสุดท้าย

นี่คือผลลัพธ์สุดท้ายบนหน้าสด

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

และนี่คือวิธีที่ทิกเกอร์โพสต์วางเรียงกันอย่างสวยงามบนจอแสดงผลของโทรศัพท์

การเพิ่มทิกเกอร์โพสต์ไปที่ส่วนหัวของเทมเพลตโพสต์บล็อก

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

การบันทึกแถวไปยังห้องสมุด Divi

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

การเพิ่ม Post Ticker Row ให้กับเทมเพลตส่วนหัว

แก้ไขส่วนหัวที่กำหนดเอง

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

แทรกแถว (Post Ticker) จาก Library

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

ในโมดอล Inser Row ให้เลือกแท็บ Add From Library ค้นหาแถวทิกเกอร์โพสต์บล็อกที่คุณบันทึกไว้ในไลบรารีก่อนหน้านี้แล้วเลือก

ตอนนี้ทิกเกอร์โพสต์จะแสดงบนส่วนหัว

แสดงกระทู้ที่เกี่ยวข้องสำหรับหมวดหมู่ปัจจุบัน

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

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

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

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

ผลลัพธ์ของเทมเพลตการโพสต์บล็อก

นี่คือแอนิเมชั่นอัตโนมัติที่ทำงานอยู่

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

และนี่คือลักษณะที่ปรากฏบนแท็บเล็ตและโทรศัพท์

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

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

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

ไชโย!