تسليط الضوء على البرنامج المساعد Divi: وحدة Divi Product Carousel

Divi Product Carousel Module عبارة عن مكون إضافي تابع لجهة خارجية لـ Divi يعرض منتجات WooCommerce داخل شريط تمرير دائري. قم ببناء دائري للمنتج ووضعه في أي تخطيط Divi. يمكنك تصميمها واختيار تخطيطات متعددة وخيارات عرض. في هذه المقالة ، سنلقي نظرة على وحدة Divi Product Carousel Module ، ونرى ميزاتها ، ونرى مدى سهولة استخدامها.

تتوفر وحدة Divi Product Carousel Module من موقع المطور على الويب وفي أسواق Divi.

وحدة Divi Product Carousel

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

تمت إضافة وحدة نمطية جديدة إلى Divi Builder تسمى Product Carousel. يحتوي على أيقونة أرجوانية بحيث تبرز من بين الحشود.

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

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

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

تتضمن علامة التبويب " خيارات متقدمة" ميزات CSS والرؤية والانتقالات المتوقعة. يتضمن CSS المخصص حقولاً للمنتج ، والصورة ، والعنوان ، والسعر ، وسهم شارة البيع السابق ، والسهم التالي ، والنقاط. يمنحك هذا قدرًا كبيرًا من التحكم باستخدام CSS.

إعدادات وحدة Divi Product Carousel

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

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

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

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

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

إليك كيف يبدو مع تحديد Overflow. يوفر تأثير بطاقة ثلاثية الأبعاد لطيف. يمكنك ضبط مقدار الدوران وتمكين ظل الشريحة.

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

وإليك كيفية ظهورها على الواجهة الأمامية مع تمكين Center Slide. هذا هو التخطيط المكون من 4 أعمدة. يتم عرضه بشكل مختلف عند تحديد Center Slide.

هذا هو التخطيط المكون من 5 أعمدة باستخدام نفس الإعدادات كما في المثال أعلاه.

يتناسب دائري المنتج جيدًا مع تخطيطات Divi. في هذا المثال ، قمت باستبدال وحدة Divi shop بوحدة Divi Product Carousel Module وصممتها لتتناسب مع التصميم.

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

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

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

هذا واحد يستخدم Overflow مع تخطيط 3 أعمدة.

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

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

في هذا ، قمت بتصميم التصنيفات لمطابقة عناصر من التخطيط.

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

عروض توضيحية لوحدة عرض منتجات Divi

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

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

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

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

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

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

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

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

سعر وحدة Divi Product Carousel والتوثيق

يوجد خياران للشراء لوحدة Divi Product Carousel:

• موقع واحد - 19 دولارًا
• مواقع غير محدودة - 39 دولارًا

إنه متاح من موقع الويب الخاص بالمطور وفي الأسواق.

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

خواطر ختامية

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

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

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

نريد أن نسمع منك. هل جربت وحدة Divi Product Carousel؟ أخبرنا برأيك في التعليقات.

رسائل الصور المميزة- Shmetters / shutterstock.com