كيفية إنشاء حسابات أسعار تلقائية باستخدام Divi (باستخدام JQuery)

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل مخطط حسابات الأسعار مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

أضف القسم رقم 1

لون الخلفية

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

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

مقسم سفلي

أضف حاجزًا سفليًا إلى القسم التالي.

• نمط الحاجز: البحث في القائمة
• فاصل الفاصل: عمودي

تباعد

أضف بعض الحشوة السفلية أيضًا.

• الحشو السفلي: 130 بكسل

أضف صفًا جديدًا

هيكل العمود

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

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

أضف محتوى H2

أضف أول وحدة نصية إلى العمود الخاص بك وأدخل بعض محتوى H2 من اختيارك.

إعدادات نص H2

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

• خط العنوان 2: مونتسيرات
• وزن خط العنوان 2: شبه عريض
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: # 0f1c4d
• حجم نص العنوان 2: 57 بكسل (سطح المكتب) ، 35 بكسل (جهاز لوحي) ، 30 بكسل (هاتف)
• العنوان 2 تباعد الأحرف: -2 بكسل

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: مونتسيرات
• محاذاة النص: الوسط
• لون النص: # 0f1c4d
• حجم النص: 22 بكسل (سطح المكتب) ، 18 بكسل (جهاز لوحي) ، 16 بكسل (هاتف)

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

الرؤية

الوحدة التالية والأخيرة المطلوبة في هذا العمود هي وحدة Divider Module. تأكد من تمكين خيار "إظهار الحاجز".

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

خط

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

• لون الخط: #ffffff

تحجيم

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

• العرض: 12٪

أضف القسم رقم 2

لون الخلفية

إلى الجزء التالي من التصميم! أضف قسمًا جديدًا وقم بتغيير لون الخلفية.

• لون الخلفية: # 0f1c4d

تباعد

أضف بعض المساحة المتروكة العلوية والسفلية المخصصة بعد ذلك.

• الحشوة العلوية: 70 بكسل
• الحشو السفلي: 130 بكسل

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

• العرض: 80٪ (سطح المكتب) ، 90٪ (الجهاز اللوحي والهاتف)

تباعد

أضف بعض المساحة المتروكة السفلية المخصصة بعد ذلك.

• الحشو السفلي: 70 بكسل (سطح المكتب) ، 20 بكسل (جهاز لوحي) ، 0 بكسل (هاتف)

الحدود

أضف حدًا سفليًا إلى الصف أيضًا.

• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: #ffffff

عرض

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

display: flex;

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

حدد أيقونة

حان الوقت لبدء إضافة الوحدات! أضف وحدة Blurb Module إلى العمود 1 وحدد رمزًا من اختيارك.

إعدادات الرمز الافتراضية

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

• لون الأيقونة: # f7f7f7
• رمز الدائرة: نعم
• رمز الدائرة: # f8c5ac
• وضع الرمز: الأعلى
• استخدام حجم خط الأيقونة: نعم
• حجم خط الرمز: 96 بكسل (سطح المكتب) ، 20 بكسل (الجهاز اللوحي والهاتف)

إعدادات رمز التمرير

قم بتعديل لون الرمز عند التمرير.

• لون الأيقونة: # 000000

معرف CSS

أدخل معرف CSS أيضًا.

• معرف CSS: price-item-click-1

أضف وحدة النص رقم 1 إلى العمود 2

أضف محتوى H3

إلى العمود الثاني! أضف الوحدة النصية الأولى وأدخل بعض محتوى H3.

إعدادات نص H3

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

• خط العنوان 3: مونتسيرات
• وزن خط العنوان 3: شبه عريض
• لون نص العنوان 3: # f8c5ac
• حجم نص العنوان 3: 40 بكسل (سطح المكتب) ، 25 بكسل (جهاز لوحي) ، 18 بكسل (هاتف)
• العنوان 3 تباعد الأحرف: -1 بكسل
• ارتفاع سطر العنوان 3: 1.1em

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: مونتسيرات
• وزن خط النص: خفيف للغاية
• لون النص: # f8c5ac
• حجم النص: 23 بكسل (سطح المكتب) ، 18 بكسل (جهاز لوحي) ، 14 بكسل (هاتف)
• تباعد حروف النص: -1 بكسل
• ارتفاع خط النص: 1.1em

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

أضف السعر إلى Content Box

إلى العمود الثالث! أضف وحدة نصية وضع السعر في مربع المحتوى.

إعدادات النص

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

• خط النص: مونتسيرات
• وزن خط النص: ثقيل
• محاذاة النص: الوسط
• لون النص: #ffffff
• حجم النص: 40 بكسل (سطح المكتب) ، 25 بكسل (جهاز لوحي) ، 18 بكسل (هاتف)

معرف CSS والفئة

انتقل إلى علامة التبويب خيارات متقدمة وأضف معرف CSS وفئة CSS.

• معرف CSS: السعر -1
• فئة CSS: إخفاء السعر أولاً

صف استنساخ عدة مرات حسب الحاجة

بمجرد الانتهاء من الصف وجميع الوحدات فيه ، يمكنك استنساخ الصف حتى عدد المرات الذي تريده.

تغيير معرفات CSS لوحدة Blurb المكررة

قم بتغيير معرف CSS لكل وحدة Blurb Module جديدة وفقًا لذلك:

• الوحدة النمطية 1: السعر-البند-النقر -1
• الوحدة النمطية 2: السعر-البند-النقر -2
• الوحدة النمطية 3: السعر-النقر -3
• ...

تغيير سعر وحدة النص المكرر ومعرفات CSS

افعل الشيء نفسه بالنسبة لوحدة نص السعر في العمود الثالث من كل صف.

• السعر 1: السعر -1
• السعر 2: السعر -2
• السعر 3: السعر -3
• ...

أضف صفًا جديدًا

هيكل العمود

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

تحجيم

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

• العرض: 80٪ (سطح المكتب) ، 90٪ (الجهاز اللوحي والهاتف)

عرض

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

display: flex;

أضف وحدة التعليمات البرمجية إلى العمود 1

أدخل كود CSS

تابع عن طريق إضافة Code Module إلى العمود الأول من الصف وإدراج الأسطر التالية من كود CSS:

<style>
.price-hide-first {
display: none;
}

.price-item-active .et-pb-icon {
color: black !important;
}
</style>

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: مونتسيرات
• وزن خط النص: خفيف للغاية
• لون النص: # f8c5ac
• حجم النص: 23 بكسل (سطح المكتب) ، 18 بكسل (جهاز لوحي) ، 14 بكسل (هاتف)
• تباعد حروف النص: -1 بكسل
• ارتفاع خط النص: 1.1em

أضف وحدة نص فارغ إلى العمود 3

اترك مربع المحتوى فارغًا

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

إعدادات النص

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

• خط النص: مونتسيرات
• وزن خط النص: ثقيل
• محاذاة النص: الوسط
• لون النص: #ffffff
• حجم النص: 40 بكسل (سطح المكتب) ، 25 بكسل (جهاز لوحي) ، 18 بكسل (هاتف)

معرف CSS

أكمل إعدادات الوحدة عن طريق إضافة معرف CSS.

• معرّف CSS: السعر الإجمالي للسعر

أضف JQuery إلى خيارات سمة Divi

انتقل إلى علامة التبويب التكامل

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

أضف كود JQuery إلى علامات الرأس

أدخل الأسطر التالية من كود JQuery بين علامات البرنامج النصي ، وبذلك تكون قد انتهيت:

jQuery(function($){
  $('[id*="price-item-click"]').click(function() {
    var selector = $(this).attr('id').replace('-item-click', '');
    var $price   = $('#' + selector);
    var sum = 0;
    $price.toggle();
    $price.toggleClass('price-active');
    $(this).toggleClass('price-item-active');
    $('.price-active').each(function(){
    sum += parseFloat($(this).text().replace(/\D/g,''));
    });
    if (sum > 0){
    $("#total-price-cal").show();
        $("#total-price-cal").text("$" + sum + "k");
    }
    else {
    $("#total-price-cal").hide();
    }
  });
});

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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