قم بتنزيل تصميم تبديل مجاني للتسعير الشهري / السنوي لـ Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل تصميم تبديل التسعير الشهري / السنوي مجانًا

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

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

تنزيل مجاني

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

تحميل

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

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

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

لون الخلفية

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

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

مقسم سفلي

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

• نمط الحاجز: البحث في القائمة
• ارتفاع الحاجز: 10vw

تباعد

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

• الحشوة العلوية: 5vw
• الحشو السفلي: 10vw

معرف CSS

وأضف معرف CSS إلى القسم.

• معرف CSS: تبديل القسم

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

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 30vw (سطح المكتب) ، 45vw (كمبيوتر لوحي) ، 50vw (هاتف)
• العرض الأقصى: 100٪

تباعد

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

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

الحدود

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

• زوايا دائرية: 50vw (جميع الزوايا)
• عرض الحدود: 1 بكسل
• لون الحدود: # e8e8e8

عرض

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

display: flex;

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: مونتسيرات
• حجم النص: 1vw (سطح المكتب) ، 1.5vw (جهاز لوحي) ، 2vw (هاتف)
• محاذاة النص: الوسط
• لون النص: فاتح

تباعد

قم بتعديل قيم المساحة المتروكة العلوية والسفلية عبر أحجام الشاشات المختلفة أيضًا.

• الحشوة العلوية: 2vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 4vw (هاتف)
• الحشو السفلي: 2vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 4vw (هاتف)

معرف CSS والفئة

وقم بتعيين معرف CSS وفئة للوحدة النصية.

• معرف CSS: pricing-plan-item-1
• فئة CSS: pricing-item-cursor

استنساخ وحدة النص ووضع نسخة مكررة في العمود 2

بمجرد الانتهاء من وحدة النص في العمود 1 ، يمكنك استنساخها مرة واحدة ووضع النسخة المكررة في العمود 2.

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

تأكد من تغيير المحتوى.

تغيير معرف CSS

واستخدم معرف CSS مختلف.

• معرف CSS: pricing-plan-item-2

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

لون الخلفية

إلى القسم الثاني. أضف لون الخلفية التالي:

• لون الخلفية: # 6b63dd

تباعد

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

• الحشوة العلوية: 7vw
• الحشو السفلي: 15vw
• الحشو الأيسر: 21vw (سطح المكتب) ، 10vw (الكمبيوتر اللوحي والهاتف)
• الحشو الأيمن: 21vw (سطح المكتب) ، 10vw (الجهاز اللوحي والهاتف)

معرف CSS

أضف معرف CSS إلى القسم أيضًا.

• معرف CSS: التسعير -1

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

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

الحدود

بعد ذلك ، انتقل إلى إعدادات التباعد وقم بتطبيق إعدادات الحدود التالية:

• عرض الحد الأيمن: 1 بكسل
• عرض الحد الأيسر: 1 بكسل
• عرض الحد العلوي: 0 بكسل
• عرض الحد السفلي: 0 بكسل
• لون الحدود: rgba (255،255،255،0)

عرض

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

display: flex;

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

تباعد

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

• الحشوة العلوية: 1vw
• الحشو السفلي: 4vw

الحدود

استخدم حدًا في العمود 2 أيضًا.

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

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

تباعد

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

• الحشوة العلوية: 1vw
• الحشو السفلي: 4vw

أضف حاجزًا إلى العمود 1

الرؤية

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

• إظهار الحاجز:

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

أضف محتوى H3

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

إعدادات نص H3

قم بتغيير إعدادات نص H3 كما يلي:

• خط العنوان 3: مونتسيرات
• العنوان 3 محاذاة النص: الوسط
• لون نص العنوان 3: #ffffff
• حجم نص العنوان 3: 2vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 3.5vw (هاتف)
• العنوان 3 تباعد الأحرف: -1 بكسل

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: مونتسيرات
• وزن خط النص: خفيف للغاية
• لون النص: #ffffff
• حجم النص: 2vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 3.5vw (هاتف)
• ارتفاع خط النص: 1em
• محاذاة النص: الوسط

تباعد

أضف بعض الهامش العلوي المخصص أيضًا.

• الهامش العلوي: 0.5vw

استنساخ كلا الوحدتين ووضع التكرارات في العمود 3

بمجرد الانتهاء من الوحدات النمطية في العمود 2 ، يمكنك استنساخ كل منهما ووضع التكرارات في العمود 3.

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

تأكد من تغيير محتوى كل نسخة.

أضف الصف رقم 2

هيكل العمود

إلى الصف الثاني في القسم 2! اختر هيكل العمود التالي:

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة المساحة المتروكة العلوية والسفلية الافتراضية بعد ذلك.

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

الحدود

وتطبيق الحدود.

• عرض الحد العلوي: 0 بكسل
• عرض الحد الأيمن: 1 بكسل
• عرض الحد السفلي: 1 بكسل
• عرض الحد الأيسر: 1 بكسل
• لون الحدود # 8882dd

عرض

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

display: flex;

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

تباعد

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

• الحشوة العلوية: 3vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)
• الحشوة السفلية: 3vw (سطح المكتب) ، 5vw (الكمبيوتر اللوحي والهاتف)

الحدود

أضف حدًا أيمنًا إلى العمود أيضًا.

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: # 8882dd

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

تباعد

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

• الحشوة العلوية: 3vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)
• الحشوة السفلية: 3vw (سطح المكتب) ، 5vw (الكمبيوتر اللوحي والهاتف)

الحدود

أضف الحد الأيمن بعد ذلك.

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

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

تباعد

بعد ذلك ، افتح إعدادات العمود 3 وأضف بعض قيم المساحة المتروكة العلوية والسفلية المخصصة عبر أحجام الشاشات المختلفة.

• الحشوة العلوية: 3vw (سطح المكتب) ، 5vw (الجهاز اللوحي والهاتف)
• الحشوة السفلية: 3vw (سطح المكتب) ، 5vw (الكمبيوتر اللوحي والهاتف)

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

إضافة محتوى

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

إعدادات النص

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

• خط النص: مونتسيرات
• لون النص: #ffffff
• حجم النص: 1vw (سطح المكتب) ، 1.5vw (جهاز لوحي) ، 2vw (هاتف)
• محاذاة النص: الوسط

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

أضف رمزًا إلى Content Box

في العمود الثاني ، سنحتاج إلى وحدة نصية أخرى. أضف الرمز "" إلى مربع المحتوى.

إعدادات النص

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

• لون النص: # ffad72
• حجم النص: 2vw (سطح المكتب) ، 3vw (جهاز لوحي) ، 4vw (هاتف)
• ارتفاع خط النص: 1em
• محاذاة النص: الوسط

استنساخ وحدة النص ووضع نسخة مكررة في العمود 3

بمجرد الانتهاء من وحدة النص في العمود 2 ، يمكنك استنساخها ووضع النسخة المكررة في العمود 3.

رمز بديل ولون النص

اعتمادًا على الميزة التي تعرضها ، قد ترغب في تغيير الرمز إلى "✗". استخدم لون نص مختلف أيضًا.

• لون النص: #ffffff

استنساخ صف عدة مرات كما هو مطلوب

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

أضف الصف رقم 3

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة المساحة المتروكة العلوية والسفلية الافتراضية بعد ذلك.

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

الحدود

أضف حدًا أيضًا.

• عرض الحد العلوي: 0 بكسل
• عرض الحد السفلي: 0 بكسل
• عرض الحد الأيمن: 1 بكسل
• عرض الحد الأيسر: 1 بكسل
• لون الحدود: rgba (255،255،255،0)

عرض

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

display: flex;

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

تباعد

استمر بإضافة بعض الهامش العلوي إلى كل من العمود 2 و 3.

• الحشوة العلوية: 4vw

العمود 2 الحدود

أضف حدًا أيمنًا إلى العمود 2 أيضًا.

• عرض الحد الأيمن: 1 بكسل
• لون الحد الأيمن: #eaeaea

وحدة تقسيم الاستنساخ ووضعها في العمود 1 من الصف الجديد

انسخ وحدة Divider التي يمكنك العثور عليها في الصف الأول من القسم وضع النسخة المكررة في العمود الأول من صفك الجديد.

أضف وحدة الزر إلى العمود 2

أضف نسخة

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

انتقام

قم بتعديل محاذاة الزر في علامة تبويب التصميم.

• محاذاة الزر: الوسط

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1vw (سطح المكتب) ، 1.5vw (جهاز لوحي) ، 2vw (هاتف)
• لون نص الزر: #ffffff
• لون خلفية الزر: # ffad72
• عرض حد الزر: 0 بكسل

• نصف قطر حدود الزر: 50vw
• زر الخط: مونتسيرات

تباعد

أضف بعض قيم الحشو المخصصة إلى وحدة الأزرار أيضًا.

• الحشوة العلوية: 1vw (سطح المكتب) ، 1.5vw (الجهاز اللوحي والهاتف)
• الحشوة السفلية: 1vw (سطح المكتب) ، 1.5vw (الجهاز اللوحي والهاتف)
• الحشو الأيسر: 4vw (سطح المكتب) ، 6vw (الجهاز اللوحي والهاتف)
• الحشو الأيمن: 4vw (سطح المكتب) ، 6vw (الجهاز اللوحي والهاتف)

وحدة زر النسخ ووضع نسخة مكررة في العمود 3

بمجرد الانتهاء من وحدة الأزرار في العمود 2 ، يمكنك استنساخها ووضع النسخة المكررة في العمود 3.

قسم الاستنساخ # 2

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

تغيير معرف CSS وإضافة فئة CSS

غيّر معرّف CSS للقسم بعد ذلك وأضف فئة CSS أيضًا.

• معرف CSS: التسعير -2
• فئة CSS: إخفاء القسم 2

أضف صفًا جديدًا من عمود واحد إلى أعلى القسم رقم 1

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

أضف وحدة التعليمات البرمجية رقم 1 مع كود CSS

أضف وحدة التعليمات البرمجية الأولى وأدخل الأسطر التالية من تعليمات CSS البرمجية:

<style>
.pricing-item-cursor {
cursor: pointer;
}

.hide-section-2 {
display: none;
}

.active-pricing-plan {
color: #6b63dd !important;
background-color: #fff;
}</style>

أضف وحدة التعليمات البرمجية رقم 2 مع كود JQuery

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

jQuery(function($){
  
$('#pricing-plan-item-1').addClass('active-pricing-plan');

$('[id*="pricing-plan-item"]').click(function() {

var selector = $(this).attr('id').replace('-plan-item', '');
var $pricingselect  = $('#' + selector);

  
$('[id*="pricing-"]').not('[id*="pricing-plan"]').hide();
  
$pricingselect.show()
  
$('#toggle-section').show();
  
$('[id*="pricing-plan"]').removeClass("active-pricing-plan");
$(this).addClass('active-pricing-plan');

});
});

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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