Divi เป็นธีมที่ทรงพลังอย่างไม่ต้องสงสัย และการสร้างเว็บไซต์ที่สะดุดตาโดยไม่ต้องใช้ปลั๊กอินใด ๆ ก็ไม่ใช่เรื่องยากสำหรับมัน แต่เรารู้อยู่เสมอว่าปลั๊กอินทำให้ประสบการณ์การสร้างเว็บไซต์ของเราดีขึ้นโดยการช่วยเหลือเรา เราได้ตรวจสอบ ปลั๊กอินส่วนท้ายของส่วนหัว บาง ส่วน แล้ว แต่วันนี้เราจะพูดถึงปลั๊กอินการกรองที่เรียกว่า Divi Filter มันจะเพิ่มคุณสมบัติที่ยอดเยี่ยมให้กับเว็บไซต์ของคุณเพื่อให้ผู้ใช้สามารถค้นหารายการใด ๆ ได้อย่างง่ายดายผ่านการกรอง
สมมติว่าคุณมีเว็บไซต์เกี่ยวกับการถ่ายภาพที่คุณอัปโหลดวอลเปเปอร์และภาพสัตว์ป่า ตอนนี้มีคนต้องการดูภาพของคุณตั้งแต่เดือนมกราคม ตัวกรอง Divi จะช่วยให้คุณทำอย่างนั้นได้ ปลั๊กอินนี้ทั้งเวอร์ชันพรีเมียมและฟรีมีวางจำหน่ายในท้องตลาด แต่วันนี้เราจะมาพูดถึงเวอร์ชันฟรีและดูว่ามีประสิทธิภาพเพียงใด มาเริ่มกันเลยโดยไม่ชักช้า
การติดตั้งปลั๊กอิน
การติดตั้งปลั๊กอิน Divi Filter ใน WordPress นั้นง่ายมาก ไปที่แดชบอร์ดของ WordPress และเลือก "เพิ่มใหม่" จากปลั๊กอิน จากนั้นเลือกอัปโหลดปลั๊กอินและเลือกไฟล์ zip จากเวิร์กสเตชันของคุณ
คลิกที่ "ติดตั้งทันที" แล้วกลับไปที่ปลั๊กอิน คุณจะเห็นว่าติดตั้งปลั๊กอินของคุณสำเร็จแล้ว
สร้างเว็บไซต์ที่น่าทึ่ง
ด้วย Elementor ตัวสร้างหน้าฟรีที่ดีที่สุด
เริ่มเลย
ตัวกรอง Divi UX
เราจะไม่เห็นโมดูลโดยตรงของตัวกรอง Divi เนื่องจากไม่ได้เพิ่มโมดูลลงในองค์ประกอบ Divi เราจะเพิ่มมันผ่านคลาส CSS ปลั๊กอินนี้มีเอกสารประกอบโดยละเอียด และคุณจะสนุกไปกับมันมากขึ้นหากทำสำเร็จ
ปลั๊กอินนี้ทำงานโดยการกรองหมวดหมู่ นี่คือโมดูลการทำงานเต็มรูปแบบของปลั๊กอินนี้
- ขั้นแรก เราจะสร้างทริกเกอร์เช่นปุ่ม จากนั้น เราจะเพิ่มชื่อหมวดหมู่ให้กับคลาส CSS นั้น
- จากนั้นเราต้องสร้างส่วนใหม่และเพิ่มคลาสเข้าไป
- ต่อมาเราต้องเพิ่มโมดูลในส่วนที่จะถูกกรอง
- สุดท้าย เพิ่มคลาส CSS ลงในคอลัมน์ที่จะแสดงผลที่กรอง ควรตรงกับทริกเกอร์
แผนที่ การสลับ แบบฟอร์ม โมดูลข้อความ เมนู ตารางราคา ความคิดเห็น ปุ่ม รหัส เสียง - อะไรก็ตามที่พอดีกับคอลัมน์สามารถกรองได้ นอกจากนี้ เราสามารถออกแบบมันในแบบที่เราต้องการเพราะมันทำเป็นโมดูล Divi
ตัวกรอง Divi: การกรองปุ่ม
เราได้สร้างหน้าศูนย์ช่วยเหลือที่เราจะใช้ปุ่มต่างๆ เป็นตัวกรองและสลับเป็นข้อมูล เราสามารถเพิ่มรายการใดก็ได้ในการสลับ เช่น รูปภาพ บล็อก วิดีโอ ฯลฯ บนแท็บขั้นสูง ฉันได้เพิ่มคลาส CSS ลงในหมวดหมู่แล้ว
ที่นี่ เราได้เพิ่มคลาส CSS ในส่วนสลับที่เราจำเป็นต้องกรอง
เนื่องจากเราได้เพิ่มคลาสหมวดหมู่ทั้งหมดในคอลัมน์เรียบร้อยแล้ว เราจึงสามารถกรองคลาสเหล่านี้ได้โดยคลิกที่ปุ่มหัวข้อตามที่ตรงกันอย่างสมบูรณ์ เรามาสร้างปุ่มที่เรียกรายการทั้งหมดกัน
ตอนนี้เราสามารถกำหนดเป้าหมายทุกหมวดหมู่แยกกันได้ เราสามารถเห็นทุกหัวข้อจากทุกส่วน และเมื่อคลิกปุ่มอื่น เราจะเห็นเฉพาะโมดูลที่เชื่อมต่อกับปุ่มโดยคลาส CSS
ดังนั้นคุณจึงสามารถกรอง/จัดหมวดหมู่รายการตามคลาสได้ด้วย ตัวกรอง Divi
ตัวกรอง Divi: การกรองข้อความ
ที่นี่เราจะสร้างระบบที่จะกรองเฉพาะข้อความ/บล็อก โดยจะแสดงรายการตามข้อเสนอที่ดีที่สุด รายการยอดนิยม และรายการล่าสุดพร้อมรายการทั้งหมด เราจำเป็นต้องเพิ่มคลาสให้กับโมดูลข้อความยกเว้นอันแรกเพราะจะแสดงคอลัมน์ทั้งหมด
ตอนนี้เราจะเพิ่มคลาสของปุ่มและหมวดหมู่ให้กับโมดูลยอดนิยม นอกจากนี้ โมดูลอื่นๆ จะมีคลาสเหมือนรายการนี้
จากนั้นเราจะเพิ่มคลาส CSS ให้กับคอลัมน์ โมดูลเหล่านี้เป็นโมดูลการนำเสนอและหนึ่งในประกาศเหล่านี้จะแสดงโดยตัวกรอง
จากนั้นเราจะเพิ่มคลาส CSS "df-area" ในส่วนที่มีคำประกาศ
ตอนนี้ถ้าเราไปสำหรับรายการทั้งหมด โมดูลการนำเสนอทั้งหมดจะปรากฏขึ้น
หรือถ้าเราไปหารายการใดรายการหนึ่งเช่นข้อเสนอที่ดีที่สุด รายการนั้นจะแสดงเฉพาะรายการที่มีข้อเสนอที่ดีที่สุดเท่านั้น
มันทำงานได้อย่างสมบูรณ์แบบ
กำลังมองหาตัวกรอง Divi?
คุณสามารถรับปลั๊กอินนี้บน Divi Marketplace ได้อย่างง่ายดาย ตัวกรอง Divi มีสองเวอร์ชัน - ฟรีและพรีเมียม เวอร์ชันฟรีสามารถกรองคอลัมน์ได้เท่านั้น เวอร์ชันพรีเมียมสามารถกรองแถว ภาพเคลื่อนไหว หน้า และอื่นๆ ได้
เวอร์ชันพรีเมียมสามารถอัปเดตได้โดยตรงจากเวอร์ชันฟรี คุณสามารถรับได้จากเว็บไซต์ของผู้เขียน เวอร์ชัน Pro มีหลายเลย์เอาต์ และคุณสามารถเริ่มต้นใช้งานได้ทันที
บทสรุป
Divi Filter เป็นปลั๊กอินที่ยอดเยี่ยมสำหรับการกรองรายการสำหรับเว็บไซต์ Divi อย่างที่คุณเห็น การจัดระเบียบรายการด้วยปลั๊กอินนี้ไม่ยากนัก สิ่งที่คุณต้องทำคือกำหนดเป้าหมายรายการและเชื่อมโยงกับตัวเลือกต่างๆ ผ่านคลาส CSS มันจะทริกเกอร์รายการเหล่านั้นโดยอัตโนมัติเมื่อคุณเลือกตัวเลือกในการกรอง มันจะทำให้ร้านค้า Woo Commerce แกลเลอรี่บล็อกและรายการอื่น ๆ อีกมากมายจัดระเบียบและผู้เข้าชมสามารถตรวจสอบสิ่งเหล่านั้นได้ตามความต้องการ ลองใช้ Divi Filter เวอร์ชันฟรี และแจ้งให้เราทราบความคิดเห็นของคุณในส่วนความคิดเห็น
