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

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

تثبيت وحدة Divi Carousel وتنشيطها

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

وحدة Divi Carousel في Divi Builder

تمت إضافة وحدة جديدة إلى Divi Builder تسمى Divi Carousel.

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

تتضمن علامة التبويب Design إعدادات التراكب والصورة (العرض) وحد الصورة والعنوان والنص الأساسي واللون والتباعد والحد. يتضمن هذا تخصيصات اللون لكل من التنقل بين السهم والنقطة.

تحتوي علامة التبويب خيارات متقدمة على جميع حقول CSS التي تتوقعها ، بالإضافة إلى إعدادات الرؤية والانتقال. يضيف حقول CSS للعنوان والمحتوى والصورة والزر.

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

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

بالنسبة لإعدادات الصور ، يمكنك استخدام الصور أو الرموز.

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

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

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

لقد قمت بتعيين هذه لعرض شريحتين. إنها تظهر التنقل النقطي.

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

لقد قمت الآن بتعيين التدوير على 100. وتميل الشرائح بشكل أكبر ثلاثي الأبعاد باتجاه الجانب الأيسر ، بعيدًا عن الشاشة.

إليك نفس الدوران ولكن بدون ظل Coverflow.

أمثلة على وحدة Divi Carousel Module

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

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

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

يستخدم هذا واحد تأثير شريط التمرير Overflow. هذه هي الإعدادات الافتراضية.

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

تم تعيين هذا لعرض 3 شرائح. لقد قمت بتعيين التدوير على 80.

تم تعيين هذا لعرض 6 شرائح. تم تعيين التدوير على الوضع الافتراضي (50).

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

هذا يظهر 6 مع تمكين الشريحة المركزية.

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

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

هذا واحد يستخدم تأثير Coverflow. أحوم فوق الشريحة اليسرى لإظهار التراكب والأسهم.

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

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

يؤدي عرض شرائح متعددة إلى قطع جزء من الرمز ، مما يعطي مظهرًا مرئيًا جيدًا أثناء تحريك شريط التمرير.

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

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

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

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

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

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

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

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

كما أنه يعمل بشكل رائع مع Extra. في هذا المثال ، قمت بتعيين الصفحة بحيث لا تظهر الشريط الجانبي.

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

سعر وحدة Divi Carousel

وحدة Divi Carousel Module متاحة من موقع المطور. هناك خياران متوفران:

• موقع واحد - 15 دولارًا
• مواقع غير محدودة - 29 دولارًا

توثيق ودعم وحدة Divi Carousel

التوثيق متاح في قائمة لوحة معلومات DiviGear. حدد علامة التبويب الوثائق. يوفر هذا روابط لمقطع فيديو مدته 4 دقائق على قناة DiviGear على YouTube. يتم توفير دعم التذاكر من خلال Freshdesk.

خواطر ختامية

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

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

Divi Carousel Module عبارة عن منزلق دائري ممتاز. إنه متاح من موقع الويب الخاص بالمطور وفي أسواق Divi.

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

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