ไฮไลท์ปลั๊กอิน Divi: Divi FilterGrid

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

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

Divi FilterGrid Module

โมดูล Divi FilterGrid ถูกเพิ่มไปยัง Divi Builder ไอคอนเป็นสีและโดดเด่นกว่าที่อื่น

แท็บเนื้อหา Divi FilterGrid

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

โพสต์องค์ประกอบ

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

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

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

ตัวเลือกแบบสอบถาม

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

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

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

ตัวเลือกตัวกรอง

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

ตัวเลือกการแบ่งหน้า

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

พื้นหลัง

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

Divi FilterGrid Design Tab

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

ตัวเลือกเค้าโครง

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

นี่คือตัวกรองแนวตั้งด้านซ้าย โดยจะวางตัวกรองในแนวตั้งทางด้านซ้าย ฉันได้เพิ่มความกว้างของรายการเพื่อให้รูปภาพมีขนาดใหญ่ขึ้น

นี่คือรายการในโอเวอร์เลย์ โพสต์จะสั้นกว่าในตัวเลือกนี้

Zoom Image จะแสดงภาพแต่ละภาพที่มีการซ้อนทับและชื่อเรื่องอยู่ตรงกลาง ภาพซูมเมื่อโฮเวอร์

ห้องสมุดแสดงการ์ดที่มีเส้นขอบและวางชื่อเรื่องเหนือรูปภาพ

นี่คือเค้าโครงรายการโดยใช้สกินเริ่มต้น

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

แท็บขั้นสูงของโมดูล Divi FilterGrid

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

การออกแบบโมดูล Divi FilterGrid

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

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

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

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

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

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

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

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

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

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

Divi FilterGrid และประเภทโพสต์ที่กำหนดเอง

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

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

ตอนนี้ฉันมีตัวกรองแบบกำหนดเองสำหรับผลิตภัณฑ์ WooCommerce ของฉันแล้ว

ตอนนี้ฉันมีโมดูลผลิตภัณฑ์ WooCommerce ที่ฉันสามารถจัดรูปแบบได้ตามใจฉัน

ตัวอย่างบล็อก Divi FilterGrid

สำหรับตัวอย่างนี้ ฉันได้แทนที่โมดูลบล็อกจากหน้าบล็อกเค้าโครง Dog Walker ฉันจัดรูปแบบให้เข้ากับสี ลักษณะแบบอักษร และมุมโค้งมนของโพสต์ จากนั้นฉันก็เพิ่มผลิตภัณฑ์ WooCommerce ให้ปรากฏในรายการบล็อก นี่เป็นวิธีที่ยอดเยี่ยมในการเพิ่มเนื้อหาประเภทต่างๆ ภายในสตรีมบล็อกของคุณ

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

เอกสารประกอบโมดูล Divi FilterGrid และราคา

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

มีสี่ตัวเลือกในการซื้อ Divi FilterGrid:

• ไซต์เดียว – $19
• 5 ไซต์ – $39
• ไม่จำกัดไซต์ – $59
• ไซต์ไม่จำกัดอายุการใช้งาน – $129

คุณสามารถซื้อปลั๊กอินได้จากเว็บไซต์ของผู้พัฒนา

จบความคิด

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

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

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

เราต้องการได้ยินจากคุณ คุณลอง Divi FilterGrid แล้วหรือยัง? แจ้งให้เราทราบว่าคุณคิดอย่างไรเกี่ยวกับเรื่องนี้ในความคิดเห็น

ภาพเด่นผ่าน Thepanyo / shutterstock.com