วิธีสร้างรายการโพสต์ในเว็บไซต์ Elementor โดยใช้วิดเจ็ตรายการโพสต์ Happy Smart

เผยแพร่แล้ว: 2021-07-16

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

การสร้างรายการโพสต์ในเว็บไซต์ Elementor ของคุณไม่ใช่เรื่องยากอีกต่อไป

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

เรามาดูกันว่าวิดเจ็ตสุดเจ๋งนี้ทำงานอย่างไร

วิธีใช้วิดเจ็ตรายการโพสต์อัจฉริยะของ HappyAddons ตาม 3 ขั้นตอนง่ายๆ

ในส่วนนี้ เราจะแสดงวิธีใช้วิดเจ็ต Smart Post List ของ Happy Addons บนเว็บไซต์ Elementor ของคุณเพื่อสร้างหน้าบล็อกที่ยอดเยี่ยม

ข้อกำหนดเบื้องต้น:

ในการใช้วิดเจ็ตที่สวยงาม คุณต้องมีปลั๊กอินต่อไปนี้บนเว็บไซต์ของคุณ:

  • องค์ประกอบ (ฟรี)
  • Happy Addons (ฟรี)
  • Happy Addons Pro

หากคุณเป็นมือใหม่ ให้ตรวจสอบคู่มือนี้ - วิธีใช้ Elementor เพื่อสร้างเว็บไซต์ของคุณอย่างง่ายดาย

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

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

Add Smart Post List Widget

ขั้นตอนที่สอง: ตั้งค่าและปรับแต่งเนื้อหาโพสต์

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

  • เค้าโครง
  • ท็อปบาร์
  • โพสต์เด่น
  • รายการโพสต์
  • แบบสอบถาม
  • ลิงค์แรปเปอร์
Smart Post List Widget Content

มาสำรวจการตั้งค่าเนื้อหาแต่ละรายการกัน

เค้าโครง

ที่นี่ใน Content->Layout คุณจะได้รับการตั้งค่าที่แตกต่างกัน 4 แบบ เช่น.

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

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

Content Layout Settings

ท็อปบาร์

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

  • หัวข้อ: คุณสามารถเขียนชื่อแถบบนสุดได้ เช่น บทความที่กำลังเป็นที่นิยม โพสต์ล่าสุด โพสต์ยอดนิยม ตัวเลือกของบรรณาธิการ และอื่นๆ
  • Title Tag: สามารถเลือก Tag H1-H6 และ Div ของ Title ได้
  • การนำทาง: คุณยังสามารถเปิด และปิด การนำทางได้
  • แสดงตัวกรอง: หากคุณไม่ต้องการแสดงตัวเลือกตัวกรอง คุณสามารถปิดได้ที่นี่
  • สไตล์ตัวกรอง: คุณยังสามารถตั้งค่ารูปแบบตัวกรองในสองรูปแบบที่แตกต่างกันแบบ อินไลน์ และ ดรอปดาวน์
  • ข้อกำหนดตัวกรอง : แม้คุณสามารถเพิ่มเงื่อนไขสำหรับตัวกรอง

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

Content Top Bar Settings

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

โพสต์เด่น

มีการตั้งค่าที่ใช้งานง่ายมากมายซึ่งจะช่วยคุณได้มากในการปรับแต่งการตั้งค่าโพสต์เด่น พวกเขาเป็น.

  • สไตล์: ในองค์ประกอบสไตล์ คุณสามารถกำหนดสไตล์เนื้อหาของคุณได้สองวิธีคือ Content Inside และ Content Outside หากคุณเลือกรูปแบบเนื้อหาภายนอก เนื้อหาโพสต์ของคุณจะปรากฏด้านล่างรูปภาพเด่น ที่นี่ เราได้เลือก Content Inside เป็นสไตล์
  • ขนาดรูปภาพ: ที่นี่ คุณสามารถกำหนดขนาดรูปภาพเด่นของคุณได้
  • ป้ายสถานะ: คุณสามารถ เปิด และ ปิด ป้ายสถานะโพสต์ได้
  • อนุกรมวิธานของตราสัญลักษณ์: คุณยังสามารถเลือกอนุกรมวิธานของตราสัญลักษณ์ เช่น แท็ก และ หมวดหมู่
  • ชื่อเรื่อง: คุณสามารถปิดใช้งานชื่อโพสต์เด่นได้ แท็กชื่อ: คุณสามารถกำหนดแท็กชื่อได้ตามความต้องการของคุณ
  • Active Meta: ตั้งค่าโพสต์ของคุณ องค์ประกอบ Active Meta เช่น วันที่ ผู้เขียน ความคิดเห็น ฯลฯ
  • ไอคอนผู้แต่ง: คุณสามารถเพิ่มไอคอนผู้แต่งได้ที่นี่
  • ไอคอนวันที่: คุณสามารถเพิ่มไอคอนวันที่
  • ไอคอนความคิดเห็น: นอกจากนี้ยังสามารถเพิ่มไอคอนความคิดเห็น
  • ความยาวข้อความที่ตัดตอนมา: คุณสามารถกำหนดความยาวของข้อความที่ตัดตอนมา
  • การ จัด แนว : คุณยังสามารถกำหนดเนื้อหาที่เหมาะสม การจัดแนว บน กลาง และ ล่าง
Content Featured Post Settings

รายการโพสต์

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

  • แท็กชื่อเรื่อง
  • ภาพ
  • ขนาดรูปภาพ
  • ใช้งาน Meta
  • ไอคอนผู้เขียน
  • ไอคอนวันที่
  • การจัดตำแหน่ง
Content List Post Settings

แบบสอบถาม

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

  • ประเภทโพสต์: คุณสามารถเลือกประเภทโพสต์จากสามประเภท เช่น โพสต์ หน้า และ การเลือกด้วยตนเอง
  • รวม & ยกเว้น: คุณสามารถ รวม & ยกเว้น โพสต์ตามที่คุณต้องการ รวมโดย: ที่นี่ เราได้รวมโพสต์ทั้งหมดโดย ผู้เขียน
  • ผู้เขียน: คุณยังสามารถเพิ่มชื่อผู้แต่งได้
  • วันที่: คุณสามารถเลือกโพสต์ลงวันที่ต่างๆ ได้ตามความต้องการ เช่น วันที่ผ่านมา สัปดาห์ที่ผ่านมา เดือนที่ผ่านมา ไตรมาสที่ผ่านมา ปีที่ผ่านมา และ กำหนดเอง
  • Order By: คุณสามารถแสดงโพสต์ Order By Author, Comment Count, Date, ID, Menu Order, Random, and Title
  • คำสั่งซื้อ: คุณยังสามารถเลือกคำสั่งซื้อ เช่น ASC & DESC ละเว้นโพสต์ Sticky: หากต้องการ คุณสามารถละเว้น Sticky Post ได้โดยคลิกสวิตช์ เปิด และ ปิด
  • ภาพเด่น : คุณยังสามารถ เปิด และ ปิด รูปภาพเด่นของโพสต์ของคุณได้
Content Query Settings

ขั้นตอนที่สาม: จัดรูปแบบรายการโพสต์

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

  • เค้าโครง
  • ท็อปบาร์
  • ชื่อแถบด้านบน
  • ตัวกรองแถบด้านบน
  • แถบด้านบนการนำทาง
  • โพสต์เด่น
  • ป้าย
  • รายการโพสต์
Style the post list

ดูตัวอย่างปัจจุบันของรายการโพสต์ของเรา

Smart Post List Preview

โบนัส: ลองใช้ฟีเจอร์ Live Copy เพื่อใช้เทมเพลตที่ออกแบบไว้ล่วงหน้าของ Smart Post List

'รายการโพสต์อัจฉริยะ' เป็นวิดเจ็ตระดับมืออาชีพของ Happy Addons ในเวอร์ชัน Pro ของเรา คุณจะได้รับคุณลักษณะพิเศษที่ชื่อว่า ' Live Copy ' ด้วยคุณสมบัติขั้นสูงนี้ คุณสามารถคัดลอกการออกแบบที่สร้างไว้ล่วงหน้าของเรา และวางบนเว็บไซต์ Elementor ของคุณได้ ดังนั้น คุณสามารถประหยัดเวลาอันมีค่าและรับงานออกแบบอันน่าทึ่งที่สร้างโดยนักออกแบบผู้เชี่ยวชาญของเรา

ลองใช้การออกแบบที่สร้างไว้ล่วงหน้าของรายการโพสต์ของ Happy Addons

คัดลอกการสาธิต

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

จากนั้นคลิกปุ่ม Live Copy เพื่อคัดลอกการสาธิต ที่นี่ เราได้คัดลอกการสาธิต Design 2

Live Copy Smart Post List Demo

เปิดใช้งานคุณสมบัติการคัดลอกแบบสด & วางการสาธิตที่คัดลอก

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

Add New Section

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

  • ขั้นแรกให้คลิกที่ส่วน แก้ไข
  • ประการที่สอง ไปที่ส่วน ขั้นสูง แล้วคลิกที่ Happy Features
  • ประการที่สาม เปิดใช้งานคุณสมบัติ Live Copy
Enable Live Copy Feature

สุดท้าย ให้คลิกขวาที่ส่วน แก้ไข แล้วคลิกปุ่ม X Paste หรือ Live Paste เพื่อวางการสาธิต

X Paste
ตรวจสอบเอกสารฉบับสมบูรณ์ของคุณสมบัติการคัดลอกแบบสด!

ตัวอย่างสุดท้าย รายการโพสต์อัจฉริยะใหม่

หลังจากทำงานทั้งหมดแล้ว ตัวอย่างสุดท้ายของการสาธิต Live Copy จะปรากฏขึ้นในลักษณะนี้

Live Copy Demo Final Preview

คุณจะสามารถปรับแต่งการสาธิตการคัดลอกสดใหม่ในสไตล์ของคุณเอง

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

ดูเอกสารทั้งหมดของ Smart Post List Widget!

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

ในบล็อกนี้ เราได้แสดงให้คุณเห็นว่าคุณสามารถออกแบบรายการโพสต์ที่สวยงามบนเว็บไซต์ Elementor ของคุณโดยใช้วิดเจ็ต Smart Post List ของ Happy Addons ได้อย่างไร นอกจากนี้เรายังได้กล่าวถึงว่าคุณลักษณะ Live Copy สามารถประหยัดเวลาอันมีค่าของคุณได้อย่างไร และสาเหตุที่เป็นไปได้บางประการในการใช้วิดเจ็ตรายการโพสต์ในเว็บไซต์ Elementor ของคุณ

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