كيفية إنشاء علامات تبويب شهادات مخصصة باستخدام Divi (تنزيل مجاني!)

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

دعنا نذهب اليها.

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط علامات تبويب الشهادات المخصص مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

لنبدأ في إعادة التكوين!

إضافة قسم جديد

لون الخلفية

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

• لون الخلفية: #ffefdb

تباعد

انتقل إلى علامة تبويب تصميم القسم وأضف بعض قيم الهوامش والحشو المخصصة.

• الهامش الأعلى: 5٪
• الهامش السفلي: 5٪
• الهامش الأيسر: 5٪
• الهامش الأيمن: 5٪
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

الحدود

قم بتضمين بعض الزوايا الدائرية أيضًا.

• جميع الزوايا: 20 بكسل

أضف الصف رقم 1

هيكل العمود

تابع بإضافة الصف الأول إلى القسم باستخدام بنية العمود التالية:

تباعد

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وأضف بعض الهامش السفلي.

• الهامش السفلي: 3٪

أضف وحدة نصية إلى العمود

أضف محتوى H2

حان الوقت لإضافة وحدات ، بدءًا من وحدة نصية تحتوي على بعض محتوى H2.

إعدادات نص H2

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات نص H2 وفقًا لذلك:

• خط العنوان 2: مونتسيرات
• وزن خط العنوان 2: شبه عريض
• حجم نص العنوان 2: 31 بكسل
• العنوان 2 تباعد الأحرف: -1 بكسل

إضافة وحدة Divider إلى العمود

الرؤية

أسفل وحدة النص مباشرةً ، نضيف وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

خط

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير لون الخط إلى الأبيض.

• لون الخط: #ffffff

تحجيم

قم بتعديل إعدادات التحجيم أيضًا.

• وزن الحاجز: 10 بكسل
• العرض: 14٪
• الارتفاع: 10 بكسل

الحدود

وأكمل إعدادات الوحدة بإضافة بعض الزوايا الدائرية إلى إعدادات الحدود.

• جميع الزوايا: 10 بكسل

أضف الصف رقم 2

هيكل العمود

إلى الصف التالي. استخدم هيكل العمود التالي:

تحجيم

بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وقم بموازنة ارتفاعات العمود في إعدادات التحجيم.

• معادلة ارتفاعات العمود: نعم

إعدادات العمود 2

لون الخلفية

ثم افتح إعدادات العمود 2 وقم بتطبيق لون الخلفية.

• لون الخلفية: # fffbf9

تباعد

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

• الحشوة العلوية:
  • سطح المكتب: لا شيء
  • الجهاز اللوحي والهاتف: 300 بكسل
• حشوة سفلية
  • سطح المكتب: لا شيء
  • الجهاز اللوحي والهاتف: 300 بكسل

الحدود

قم بتضمين بعض الزوايا الدائرية أيضًا.

• جميع الزوايا: 10 بكسل

قم بإضافة الوحدة النمطية للدعاية والإعلان رقم 1 إلى العمود 1

إضافة محتوى

حان الوقت لإضافة الوحدات ، بدءًا من الوحدة النمطية الأولى Blurb في العمود 1. أضف بعض المحتوى الذي تختاره.

تحميل صورة بنسبة 1: 1

قم بتحميل صورة بنسبة 1: 1 بعد ذلك.

لون الخلفية

ثم قم بتطبيق لون الخلفية التالي:

• لون الخلفية: # d5d6ea

إعدادات الصورة

قم بإجراء تغييرات على إعدادات الصورة أيضًا.

• وضع الصورة / الرمز: اليسار
• الزوايا الدائرية للصورة: 100 بكسل

إعدادات نص العنوان

بعد ذلك ، قم بتعديل إعدادات نص العنوان وفقًا لذلك:

• خط العنوان: مونتسيرات
• وزن خط العنوان: شبه عريض
• تباعد حرف العنوان: -1 بكسل

إعدادات النص الأساسي

نحن نقوم بتغيير إعدادات النص الأساسي أيضًا.

• خط الجسم: لاتو
• حجم النص الأساسي: 13 بكسل

تباعد

بعد ذلك ، سنضيف بعض المساحة حول محتوى الوحدة الخاصة بنا من خلال تطبيق قيم الحشو التالية:

• حشوة علوية: 5٪
• حشوة سفلية: 5٪
• الحشوة اليسرى: 5٪
• الحشوة اليمنى: 5٪

الحدود

أضف بعض الزوايا الدائرية أيضًا.

• جميع الزوايا: 10 بكسل

حيوية

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

• صورة / أيقونة متحركة: لا توجد رسوم متحركة

معرف CSS

لإنشاء تصميم علامة تبويب الشهادات ، سنحتاج إلى إضافة بعض التعليمات البرمجية في نهاية هذا البرنامج التعليمي. للتحضير لذلك ، سنضيف معرف CSS إلى علامة التبويب المتقدمة في Blurb Module.

• معرف CSS: testimonial-person-1

صورة دعاية وعنوان CSS

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

width: 25% !important;

margin-top: 25px;

استنساخ وحدة Blurb ثلاث مرات

بمجرد الانتهاء من أول وحدة Blurb Module ، يمكنك استنساخها ثلاث مرات.

تغيير المحتوى والصور

تأكد من تغيير المحتوى والصور لكل وحدة Blurb Module مكررة.

تغيير ألوان الخلفية

جنبا إلى جنب مع ألوان الخلفية.

• تكرار 1: # fffed6
• تكرار 2: # d7ecd9
• تكرار 3: # f5d5cb

تغيير معرفات CSS

وبالطبع معرفات CSS. استخدم الترقيم المتتالي.

• تكرار 1: شهادة شخص -2
• تكرار 2: شهادة شخص 3
• تكرار 3: شهادة شخص -4

أضف وحدة نص اقتباس إلى العمود 2

أضف اقتباس إلى Content Box

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

إعدادات النص

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات النص على النحو التالي:

• خط النص: عرض Playfair
• لون النص: #ffefdb
• حجم النص: 200 بكسل
• ارتفاع خط النص: 1em

موقع

قم بتغيير موضع الوحدة أيضًا.

• الموقف: مطلق
• الموقع: أعلى اليسار
• إزاحة أفقية: 5٪

أضف وحدة نص الشهادة إلى العمود 2

أضف محتوى الشهادة

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

إعدادات النص

قم بتغيير إعدادات نص الوحدة وفقًا لذلك:

• خط النص: لاتو
• لون النص: # 000000
• حجم النص: 20 بكسل
• ارتفاع خط النص: 2.1em
• محاذاة النص: الوسط

تحجيم

تأكد من ضبط العرض على "100٪" أيضًا.

• العرض: 100٪

تباعد

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

• الهامش الأعلى: 30٪
• الحشوة اليسرى: 10٪
• الحشوة اليمنى: 10٪

معرف CSS

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

• معرف CSS: نسخة الشهادة -1

استنساخ وحدة النص ثلاث مرات

بمجرد الانتهاء من الوحدة النمطية الأولى لنص الشهادة ، يمكنك استنساخها ثلاث مرات.

تغيير محتوى الشهادة

تأكد من تغيير محتوى الشهادة في الوحدات المكررة.

تغيير معرفات CSS

جنبًا إلى جنب مع معرفات CSS. تأكد من اتباعك لترتيب متتالي.

• نسخة 1: شهادة-نسخة -2
• نسخة 2: نسخة شهادة 3
• نسخة 3: شهادة-نسخة -4

أضف فئة CSS إلى وحدة نص الشهادة الأولى

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

• فئة CSS: عرض-شهادة

أضف وحدة التعليمات البرمجية أسفل وحدة المقسم (الصف رقم 1)

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

أضف كود CSS

أدخل الأسطر التالية من كود CSS بين علامات الأنماط كما ترى في شاشة الطباعة أدناه.

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}

.testimonial-active {
transform: translateX(-10%);
}

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

cursor: context-menu;
}

[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;

visibility: hidden;
opacity: 0;
}

أضف كود JQuery

بعد ذلك ، ضع الأسطر التالية من كود JQuery بين علامات البرنامج النصي كما ترى في شاشة الطباعة أدناه ، وبذلك تكون قد انتهيت!

jQuery(function($){
$(document).ready(function(){

$('#testimonial-person-1').addClass('testimonial-active');

$('[id*="testimonial-person"]').hover(function() {

var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);

$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');

$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');

});

});
});

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

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