تسليط الضوء على Divi Plugin: منزلق شهادات DP

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

يقوم DP Testimonials Slider بإنشاء نوع منشور مخصص جديد يسمى jvt_testimonials. يتيح لك إنشاء شهاداتك في محرر ، ثم يوفر ثلاث وحدات لعرض تلك الشهادات. يمكنك اختيار إظهار جميع الشهادات ، وتحديد العدد المعروض ، وإظهار فئات معينة. تتضمن كل وحدة تصميمات متعددة للاختيار من بينها ويمكنك تصميمها.

دعنا نلقي نظرة على الإضافة.

شهادات موانئ دبي

تمت إضافة عنصر قائمة جديد إلى لوحة القيادة يسمى الشهادات . يؤدي النقر فوقه إلى إظهار قائمة الشهادات التي قمت بإنشائها.

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

تعمل فئات الشهادات تمامًا مثل فئات المنشورات. هنا ، يمكنك إنشاؤها وتحريرها.

وحدات منزلق شهادات موانئ دبي

تمت إضافة ثلاث وحدات إلى Divi Builder:

عرض شبكة شهادة DP

يشتمل عرض شبكة شهادة DP Testimonial Grid View على إعدادات لاختيار التخطيط من بين 3 خيارات ، وتعيين عدد الشهادات التي تعرض رمز الاقتباس وتعرضه ونمطه ، وتعرض الصورة ، وتعرض ارتباط الاقتباس ، واختيار فئة ، وضبط لون ترقيم الصفحات ، والرابط ، إلخ.

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

عرض قائمة شهادات DP

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

موانئ دبي التزكية المتزلج

يتضمن منزلق DP Testimonial Slider 56 تخطيطًا ويضيف عناصر تحكم شريط التمرير. يتضمن الأمر Order By ، والتشغيل التلقائي ، والسرعة ، وتقسيم الصفحات ، وإيقاف الانزلاق عند تمرير الماوس ، وعرض حد المحتوى.

أمثلة على عرض شبكة شهادات موانئ دبي

هذا المخطط 1 يعرض 3 شهادات. يقوم بإنشاء صور دائرية وعرض كل شهادة في بطاقة مع تأثير الظل. لقد تركت كل شيء آخر في الإعدادات الافتراضية.

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

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

أمثلة لقائمة شهادات موانئ دبي

هذا هو التخطيط 1 لعرض القائمة . لقد تركت كل شيء في إعداداتهم الافتراضية.

يقلل التخطيط 2 من حجم الصور ويضيف تصميمًا مربعًا أنيقًا بزوايا دائرية. يظهر تأثير الظل على التحويم.

أمثلة على المنزلق شهادات موانئ دبي

بالنسبة إلى شريط التمرير ، كان علي استخدام Classic Divi Builder. على عكس الوحدتين الأخريين ، لا تظهر هذه الوحدة عند استخدام New Divi Builder أو Visual Builder. لديها 54 تخطيطات. بدلاً من النظر إليها جميعًا ، سنلقي نظرة على بعضها.

هذا هو التخطيط 1. يقوم بإنشاء صور محاطة بدائرة ولا يتضمن التنقل للشرائح. يمكنك ضبط ألوان الرصاص.

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

هذا هو التخطيط 3. وهو يزيل الصورة. لقد قمت بتضمين ظل الصندوق والحد الأقصى للحروف من المثال السابق.

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

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

أضفت خلفية حتى تبرز الألوان أكثر قليلاً.

هذا هو Layout 5. لقد أضفت خلفية رمادية قليلاً إلى القسم ويأخذ شريط التمرير هذه الخلفية.

هذا هو التخطيط 6. وهو يعرض شهادتين في كل شريحة.

هذا تخطيط 7. أعرض نص الشهادة الكامل. تعجبني الصورة المتداخلة مع مربع الشهادة.

هذا تخطيط 8. أحب هذا التصميم.

هذا هو Layout 9. إنه مشابه لـ 8 في تخطيطه ، لكن لديه قوائم انتظار التصميم الخاصة به.

هذا هو التخطيط 10. يقوم بإنشاء مربع جميل حول المؤلف ويضيف مجموعتين من علامات الاقتباس.

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

هذا هو Layout 14. ويتضمن أيضًا أزرار التنقل بعد النشر.

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

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

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

تكامل نماذج كالديرا

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

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

الترخيص والتوثيق

DP Testimonials Slider متاح من موقع المطور. هناك ثلاثة تراخيص متاحة:

• موقع واحد - 30 دولارًا
• 5 مواقع - 40 دولارًا
• مواقع غير محدودة - 50 دولارًا

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

خواطر ختامية

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

حتى استخدام نموذج Caldera Forms كان عمليًا سهلاً. لقد قمت للتو باستيراد ملف JSON وعمل في المحاولة الأولى.

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

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

إذا كنت مهتمًا بإدارة شهاداتك وعرضها باستخدام وحدة نمطية ، فإن DP Testimonials Slider يستحق نظرة.

نريد أن نسمع منك. هل جربت DP Testimonials Slider؟ أخبرنا عن تجربتك في التعليقات.

صورة مميزة عبر Blan-k / shutterstock.com