تسليط الضوء على البرنامج المساعد Divi - Owl Carousel Pro

هل سبق لك أن أردت عرض المنشورات والمشاريع وأنواع المنشورات المخصصة والصور داخل دائرة باستخدام Divi Builder؟ عادةً ما يتم عرض المشاركات والصور داخل شريط التمرير ، والذي يعرض منشورًا أو صورة واحدة في كل مرة ، ولكن ماذا لو كنت تريد عرضًا دائريًا فعليًا يعرض منشورات متعددة في وقت واحد؟ يمكنك القيام بذلك بسهولة باستخدام مكون إضافي يسمى Owl Carousel Pro.

Owl Carousel Pro هو مكون إضافي تابع لجهة خارجية يضيف وحدتين جديدتين إلى Divi Builder. يعرض الأول أنواع المنشورات مثل المشاريع والمنشورات وأنواع المنشورات المخصصة. والثاني هو التنافس الدائري للصور مع المحرر المرئي لإضافة أي نوع من المحتوى الذي تريده.

تتوفر نسخة مجانية من البرنامج المساعد. ألقي نظرة على الإصدار المحترف الذي يضيف العديد من الميزات الجديدة بما في ذلك:

• أنواع المنشورات المخصصة
• عرض الحقول المخصصة
• استعلام مخصص
• تغيير حجم الصورة المصغرة
• تغيير عدد الصور المعروضة
• فتح الصورة في lightbox

الصور للأمثلة مأخوذة من Unsplash.com.

تثبيت Owl Carousel Pro

قم بتحميل وتنشيط البرنامج المساعد كالمعتاد. سترى بعد ذلك وحدتين جديدتين في Divi Builder: DP Owl Carousel و DP Owl Image Carousel. يتم تلوين الوحدات بشكل مختلف عن وحدات Divi القياسية لمساعدتها على التميز. هذا هو تفضيلي لوحدات الطرف الثالث لأنه يسهل العثور عليها.

موانئ دبي البومة دائري

تعرض DP Owl Carousel المنشورات والمشروعات وأنواع المنشورات المخصصة داخل المكتبة. سيعرض آخر 10 مشاركات أو من الفئات أو العلامات التي تحددها. تتضمن علامة تبويب المحتوى الخاصة بها إعدادات المحتوى والعناصر. تتضمن علامة تبويب التصميم نصًا ونصًا لعنوان المنشور ونصًا تعريفيًا للنشر ونصًا مقتطفًا للنشر ونصًا مخصصًا للملف والتباعد والسهم وعناصر التحكم والصور المصغرة.

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

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

تتم إضافة الاستعلامات المخصصة إلى السمة الفرعية الخاصة بك داخل كود PHP (قم دائمًا بإجراء تغييرات PHP في السمة الفرعية وليس السمة الأصلية حتى لا تفقد التغييرات عند تحديث السمة). يتضمن موقع المطور بعض الأمثلة.

ملاحظة - جرب دائمًا الكود على موقع اختبار قبل إضافته إلى موقعك المباشر.

أمثلة على دائرة عرض البومة DP

هذا هو التصميم القياسي (لقد أضفت خلفية لمساعدته على التميز). يعرض آخر 10 مشاركات في جميع الفئات. لقد قمت بتضمين رأس Divi ونشر التعريف لإظهار كيف يبدو داخل الصفحة. يؤدي النقر فوق أي من الصور إلى نقلك إلى المنشور.

هذا يضيف العنوان والفئة والتاريخ. يمكنك أيضًا إظهار الحقول المخصصة إذا قمت بإعدادها.

يعرض هذا العنوان مقتطفًا من العنوان والمنشور باستخدام 270 حرفًا افتراضيًا.

في هذا ، قمت بتعيين مقتطفات المنشور على 70 حرفًا.

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

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

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

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

DP Owl Image Carousel

تعرض DP Owl Image Carousel الصور داخل دائرة. يتيح لك إضافة الصور وعرض الأسهم وعناصر التحكم. تتضمن إعدادات التصميم النص ونص عنوان الصورة ونص محتوى الصورة والتباعد والسهم وعناصر التحكم والصور المصغرة. علامة التبويب "خيارات متقدمة" هي نفسها وحدة DP Owl Carousel.

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

عرض الصور بشكل جيد. يعجبني أنه يمكنك الارتباط بعنوان URL أو فتحه في Lightbox. أود أن أرى تراكبات مضافة إلى الصور لأن هذا من شأنه أن يعزز التجربة بشكل أكبر.

أمثلة على حلقة صورة بومة DP

إليك كيفية ظهور الوحدة على الصفحة باستخدام الإعدادات الافتراضية. لقد أضفت خلفية في القسم لمساعدته على التميز.

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

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

يستخدم هذا الخيار خلفية داكنة مع ألوان جديدة للخطوط وعناصر التحكم والأسهم.

إليك كيف تبدو الصور عند فتحها في Lightbox. لا تزال حركة التمرير تعمل في الخلفية.

أنواع المنشورات المخصصة

في الوحدة النمطية Owl Carousel Pro ، تأكد من تعطيل الاستعلام المخصص (يستخدم هذا فقط إذا كنت تريد إنشاء عوامل تصفية مخصصة خاصة بك بدلاً من اختيار الفئات من القائمة) واختر نوع المنشور الخاص بك ضمن اسم نوع المنشور المخصص. لقد قمت بتثبيت WooCommerce ولدي الآن المنتج تلقائيًا كخيار.

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

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

لدي الآن مجموعة منتجات تظهر فئات WooCommerce التي حددتها. لقد اخترت إظهار 4 منشورات ، وزيادة حجم الصورة ، وتغيير ألوان الخط للعنوان ، والميتا ، والحقول المخصصة ، وزيادة أحجام خطوط العنوان والحقول المخصصة. في هذا المثال ، أعرض فقط تاريخ meta ، ولكن تمامًا مثل المنشورات العادية يمكنني عرض أي من المعلومات الوصفية ومقتطفًا.

استخدام Owl Carousel Pro مع Extra و Divi Builder Plugin

يعمل Owl Carousel Pro بشكل رائع مع Extra أيضًا. هذه هي دائرة الصورة.

إليك نظرة على المكون الإضافي مع البرنامج المساعد Divi Builder المثبت على قالب Twenty Seventeen WordPress. يعرض هذا المنتج منتجات WooCommerce الخاصة بي.

رخصة

يمكن استخدام المكون الإضافي على مواقع ويب غير محدودة لك ولعملائك. يتضمن سنة واحدة من التحديثات والدعم.

افكار اخيرة

يضيف Owl Carousel Pro وحدتين جميلتين إلى Divi Builder يسمح لك بعرض المنشورات والمشروع وأنواع المنشورات المخصصة والصور داخل دائرة قابلة للتخصيص. يتم تضمين معظم تخصيصات وحدة Divi المتوقعة بالإضافة إلى بعض الميزات الجديدة للتحكم في العرض.

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

نود أن نسمع منك. هل جربت Own Carousel Pro؟ أخبرنا عن تجربتك في التعليقات.

صورة مميزة عبر gst / shutterstock.com