تسليط الضوء على البرنامج المساعد Divi: Divi FilterGrid

Divi FilterGrid هو مكون إضافي تابع لجهة خارجية يضيف وحدة جديدة قابلة للتصفية إلى Divi Builder. يمكنه عرض المنشورات من أي نوع منشور مخصص وإنشاء عوامل تصفية مخصصة لعرضها وفقًا لأي تصنيف تختاره. اعرض منشورات المدونة والمشروعات والمنتجات وإنشاء المعارض وغير ذلك الكثير.

في تمييز البرنامج المساعد هذا ، سنلقي نظرة على Divi FilterGrid ، ونرى ما يمكن أن يفعله ، ونرى مدى سهولة استخدامه. يمكنك شراء البرنامج المساعد من موقع المطور.

وحدة Divi FilterGrid

تمت إضافة وحدة Divi FilterGrid إلى Divi Builder. الأيقونة ملونة وتبرز عن البقية.

علامة تبويب المحتوى Divi FilterGrid

تضيف علامة التبويب "المحتوى" الكثير من الميزات. وهي تتضمن عناصر النشر وخيارات الاستعلام وخيارات التصفية وخيارات ترقيم الصفحات والخلفية لضبط كل ألوان الخلفية. ويتضمن أيضًا الارتباط القياسي وخيارات تسمية المسؤول.

عناصر المشاركة

تتيح لك خيارات Post Elements إظهار أو إخفاء الصورة المميزة ثم تحديد إجراء الصورة المصغرة. يمكنك الارتباط بالمنشور ، أو إظهار الصورة في العرض المبسط ، أو في معرض العرض المبسط ، أو إظهار المنشور في نافذة منبثقة ، أو فتح معرض العرض المبسط المخصص. في هذا المثال ، أعرض المنشور في نافذة منبثقة.

هذا يفتح الصورة في معرض lightbox. يمكن للقارئ تحديد الأسهم لرؤية الصور المميزة لجميع المنشورات. النقر فوق عنوان المنشور لا يزال يفتح المنشور في نفس علامة التبويب.

يمكنك أيضًا تغيير لون التراكب والرمز ولون الرمز. لقد قمت بتخصيص كل من هذه في الصورة أعلاه. يمكنك أيضًا إظهار العنوان وإضافة رابط إلى العنوان وإضافة مقتطف والحد من عدد الأحرف المقتطف وإظهار زر قراءة المزيد وإضافة حقول مخصصة والمزيد. لقد أضفت مقتطفًا وقمت بتعطيل meta post.

خيارات الاستعلام

تتيح لك خيارات الاستعلام اختيار نوع الاستعلام من أساسي ومتقدم ومخصص. اختر الفئات ورقم المنشور ورقم الإزاحة والترتيب حسب الخيارات. لقد اخترت فئة واحدة في هذا المثال.

تمنحك الخيارات المتقدمة العديد من الميزات الجديدة. حدد أنواع منشورات معينة ، وتصنيفات ، وشروط ، واستبعد المصطلحات والتصنيفات. يمكنك أيضًا عرض المنشورات الخاصة والمشاركات اللاصقة. في المثال أعلاه ، أقوم بإعداد تصنيف. يتيح لي اختيار الفئات أو العلامات المحددة التي أريد استخدامها ثم تحديد علاقتها بمصطلح البحث. تعمل مصطلحات الطفل بنفس الطريقة. يتيح لك ذلك الحصول على تفاصيل إضافية وليس فقط عرض المشاركات بناءً على الفئات أو العلامات. يمكنك أيضًا تعيين رقم المنشور وخيارات الطلب للتصنيفات.

يسمح لك نوع الاستعلام المخصص باستخدام محتوى مخصص. يوفر رابطًا للوثائق حيث يمكنك معرفة كيفية إعداد هذا. تتم الاستعلامات المخصصة باستخدام التعليمات البرمجية الموجودة في ملف function.php. يتضمن التوثيق عدة أمثلة لتخطيها.

خيارات المرشحات

تتيح لك خيارات المرشحات تصفية الشبكة حسب مصطلحات البحث. حدد الفلتر الافتراضي وسترى شكلاً حيث يمكنك اختيار الفئات والعلامات للمشاركات والمشروعات. يمكنك أيضًا تعيين الطلب والتصفية حسب المعرف أو الاسم أو الطلب المخصص. بالنسبة إلى الطلب المخصص ، سترى مربعًا حيث يمكنك إدخال القيم مفصولة بفاصلات.

خيارات ترقيم الصفحات

تتيح لك خيارات ترقيم الصفحات اختيار نوع ترقيم الصفحات. اختر من بين الصفحات ، أو زر تحميل المزيد ، أو لتحميل المزيد عند التمرير. بالنسبة للخيار المقسم إلى صفحات ، يمكنك اختيار الأسهم والنص وعدد الصفحات التي تظهر في الروابط. لقد أضفت نصًا وقمت بتغيير الأسهم في هذا المثال.

خلفية

تتيح لك إعدادات الخلفية تخصيص خلفيات الشبكة والمرشحات والمرشح النشط وترقيم الصفحات والصفحات النشطة. يتضمن أيضًا خيارات الخلفية القياسية التي تتوقعها في وحدة Divi. في المثال أعلاه ، قمت بتعديل ألوان الخلفية للمرشح والشبكة والصفحات.

علامة تبويب تصميم Divi FilterGrid

توفر علامة التبويب Design تخصيصات لخيارات التخطيط ، ونص عنوان المنشور ، ونشر نص البيانات الوصفية ، ونص محتوى المنشور ، ونص المرشحات ، ونص ترقيم الصفحات ، وزر قراءة المزيد ، وزر تحميل المزيد ، وجميع خيارات وحدة Divi القياسية.

خيارات التخطيط

تتيح لك خيارات التخطيط تحديد تخطيط ، وشكل ، وتعيين عرض العناصر ، وحجم هامش العمود والصف ، وحجم خط الشبكة. لقد قمت بتقليل عرض العناصر ، وقمت بإزالة الحضيض ، واخترت منتصف الليل للبشرة. لقد قمت أيضًا بتقليل حجم الخط.

هذه هي المرشحات الرأسية اليسرى. يضع المرشحات في كومة عمودية على الجانب الأيسر. لقد قمت بزيادة عرض العناصر بحيث تكون الصور أكبر.

هذه عناصر في التراكب. المشاركات أقصر في هذا الخيار.

تُظهر Zoom Image كل صورة مع تراكب والعنوان في المنتصف. يتم تكبير الصورة عند التحويم.

تعرض المكتبة البطاقات ذات الحدود وتضع العنوان أعلى الصورة.

هذا هو تخطيط القائمة باستخدام السطح الافتراضي.

هذا عرض كامل. يضع العنوان والميتا والمقتطف في أسفل الصورة.

علامة التبويب المتقدمة Divi FilterGrid Module

تضيف علامة التبويب Advanced 15 حقلاً CSS مخصصًا لكل عنصر تقريبًا داخل الوحدة النمطية. لن يواجه مستخدمو CSS أي مشكلة في استهداف عناصر معينة للتخصيص.

تصميم وحدة Divi FilterGrid

يمكن لخيارات التخطيط إنشاء بعض التصميمات المثيرة للاهتمام. في هذا المثال ، قمت بتقليل العرض بحيث تظهر في صف واحد. لقد أزلت أيضًا الميتا والمقتطفات.

لهذا ، قمت بزيادة عرض العناصر. هذا يخلق تصميم معرض فسيفساء جميل.

في هذا العنوان ، أضفت العنوان وكل الميتا والمقتطف وزر قراءة المزيد. لقد قمت بتغيير لون العنوان ، وجعلت كل الأحرف كبيرة ، وزدت الحجم ، ووسطته ، وزدت تباعد الأحرف. لقد قمت أيضًا بتقليل حجم زر قراءة المزيد وقمت بتصميم النص باللون الأبيض.

هناك الكثير من خيارات التصميم لزر قراءة المزيد. لهذا ، عدت إلى الحجم الافتراضي ولكن جعلت النص خفيف الوزن. لقد قمت بتقريب الحواف وأعطيتها تدرجًا في الخلفية.

لا يتم عرضه في وضع المحرر ، ولكن يمكنك أيضًا إضافة صورة إلى الزر. يمكنك إضافة الصورة بمفردها ، بتراكب صلب ، أو بتراكب متدرج. في هذا المثال ، أضفت الصورة خلف التدرج اللوني الأخضر.

يضبط نص البيانات الوصفية المنشور كل بيانات التعريف المنشورة معًا. لقد قمت بتغيير اللون وتباعد الأسطر.

يتيح لك نص المرشحات تحديد نمط خط المرشح. لقد قمت بزيادة حجم الخط وتغيير اللون وإضافة تأثير الظل. نمط المرشح الافتراضي له لون مختلف للفلتر المحدد. يمكنك ضبط ذلك بشكل منفصل في خيار الخلفيات في علامة تبويب المحتوى.

في هذا المثال ، أقوم بضبط نص ترقيم الصفحات. لقد قمت بتغيير اللون وزيادة الحجم وإضافة بعض تباعد الأحرف وإضافة الظل. لقد قمت أيضًا بتعديل قوة التمويه.

يتضمن زر تحميل المزيد أيضًا خيارات التصميم الأساسية. أنا أستخدم النص الافتراضي (يمكن تغييره في علامة تبويب المحتوى). لقد قمت أيضًا بتعيين النص على الأبيض (يكون أخضر بشكل افتراضي).

لقد قمت بزيادة حجم الخط وإضافة تباعد بين الأحرف وتعديل الحدود وإضافة التدرج اللوني وتعطيل إظهار الرمز فقط عند التمرير.

شبكة مرشح Divi وأنواع المنشورات المخصصة

لقد وجدت أنه سهل الاستخدام مع أنواع المنشورات المخصصة. في خيارات الاستعلام ، انقر فوق تحديد أنواع المنشور ، ثم حدد نوع المنشور من النموذج.

لا يزال يعرض الفلتر الأصلي ، ولكن يمكنك إنشاء المرشح الخاص بك أو تعطيله. في خيارات التصفية ، انقر فوق تصنيفات التصفية واختر التصنيفات الخاصة بك من القائمة. انقر فوق تعيين القيم .

لدي الآن مرشح مخصص لمنتجات 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