كيفية استخدام وحدة تبديل Divi بشكل خلاق لعرض خطط الأسعار
نشرت: 2019-02-02عندما يتعلق الأمر بعرض خطط الأسعار على موقع الويب الخاص بك ، يمكنك اتخاذ العديد من الأدوار وإنشاء صفحات أو أقسام تسعير مذهلة وجذابة للغاية. عند إنشاء موقع ويب باستخدام Divi ، ستنتقل على الأرجح إلى وحدة جداول الأسعار. تتيح لك هذه الوحدة إضافة جداول التسعير بسرعة وتصميمها بالشكل الذي تريده. ولكن إذا كنت ترغب في إضافة المزيد من التفاعل إلى هذا القسم المحدد من صفحتك ، فيمكنك أيضًا استخدام Toggle Module لإظهار خطط التسعير عند النقر. هذه طريقة رائعة لتسليط الضوء على خطة تسعير محددة من خلال إبقاء حالتها مفتوحة وإغلاق الأخريين.
في هذا البرنامج التعليمي ، سنوضح لك خطوة بخطوة كيفية إنشاء تصميم رائع لجدول تسعير التبديل باستخدام Divi Toggle Module. بمجرد الحصول على النهج ، ستتمكن من إنشاء جميع أنواع خطط التسعير القابلة للتبديل عند النقر فوق أي نوع من مواقع الويب التي تقوم بإنشائها.
دعنا نذهب اليها!
معاينة
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة على أحجام الشاشات المختلفة.
لنبدأ في الإنشاء!
اشترك في قناتنا على اليوتيوب
إضافة قسم جديد
تباعد
قم بإنشاء صفحة جديدة أو افتح صفحة موجودة باستخدام Divi's Visual Builder. أضف قسمًا جديدًا إلى الصفحة ، وافتح إعدادات القسم وأضف بعض الحشو العلوي والسفلي المخصص لإنشاء بعض المساحة في الجزء العلوي والسفلي من القسم.
- الحشوة العلوية: 160 بكسل
- الحشو السفلي: 160 بكسل
أضف الصف رقم 1
هيكل العمود
بمجرد الانتهاء من تعديل إعدادات تباعد الأقسام ، يمكنك المضي قدمًا وإضافة صف جديد باستخدام بنية العمود التالية:
أضف وحدة نصية
إضافة محتوى
ليست هناك حاجة لإجراء تغييرات على الصف ، فانتقل إلى الأمام وأضف وحدة نصية على الفور. أدخل بعض محتوى H2 المفضل في مربع المحتوى بالوحدة.
إعدادات نص العنوان
تابع بالانتقال إلى علامة تبويب التصميم وتغيير إعدادات نص العنوان.
- خط العنوان 2: Didact Gothic
- وزن خط العنوان 2: عادي
- العنوان 2 محاذاة النص: الوسط
- لون نص العنوان 2: # 000000
- حجم نص العنوان 2: 40 بكسل
- العنوان 2 تباعد الأحرف: -1 بكسل
إضافة وحدة المقسم
الرؤية
أضف وحدة Divider مباشرةً أسفل وحدة النص التي أضفتها وقمت بتعديلها في الخطوات السابقة. تأكد من تمكين خيار "إظهار الحاجز" لوحدة Divider Module.
- إظهار الحاجز: نعم
اللون
تابع بالانتقال إلى علامة تبويب التصميم وتغيير لون الفاصل.
- اللون: # 000000
تحجيم
قم بتغيير عرض الوحدة في إعدادات التحجيم أيضًا.
- العرض: 39٪
- محاذاة الوحدة: المركز
تباعد
أضف بعض الهامش السفلي المخصص أيضًا.
- الهامش السفلي: 50 بكسل
أضف الصف رقم 2
هيكل العمود
انتهينا من تعديل الصف الأول ووحداته. حان الوقت لإضافة صف جديد باستخدام بنية العمود التالية:
العمود 1 خلفية متدرجة
بدون إضافة أي وحدات نمطية حتى الآن ، افتح إعدادات الصف وأضف خلفية متدرجة إلى العمود 1.
- اللون 1: # 00fff2
- اللون 2: rgba (255،255،255،0)
- العمود 1 نوع التدرج: شعاعي
- الاتجاه الشعاعي للعمود 1: أسفل اليمين
- موضع البداية للعمود 1: 30٪
- موضع نهاية العمود 1: 30٪
العمود 2 خلفية متدرجة
افعل الشيء نفسه بالنسبة للعمود الثاني أيضًا.
- اللون 1: # fce96f
- اللون 2: rgba (255،255،255،0)
- العمود 2 نوع التدرج: شعاعي
- العمود 2 شعاعي الاتجاه: أعلى اليمين
- موضع البداية للعمود 2: 40٪
- موضع نهاية العمود 2: 40٪
العمود 3 خلفية متدرجة
وبالمثل ، أضف خلفية متدرجة إلى العمود الثالث باستخدام الإعدادات التالية:
- اللون 1: # a659ff
- اللون 2: rgba (255،255،255،0)
- العمود 3 نوع التدرج: شعاعي
- العمود 3 اتجاه شعاعي: أسفل
- موضع البداية للعمود 3: 30٪
- موضع نهاية العمود 2: 30٪
تحجيم
بمجرد الانتهاء من إضافة خلفية التدرج ، انتقل إلى علامة تبويب التصميم وقم بتغيير إعدادات التحجيم.
- جعل هذا الصف بعرض كامل: نعم
- استخدام عرض مزراب مخصص: نعم
- عرض المزراب: 2
أضف وحدة تبديل إلى العمود 1
إضافة محتوى
حان الوقت للبدء في إنشاء خطط تسعير مختلفة! أضف وحدة Toggle Module الجديدة إلى العمود الأول وأدخل عنوانًا. لتصميم العناصر المختلفة في مربع المحتوى ، استخدمنا بعض علامات HTML الإضافية. تابع وانسخ الأسطر التالية وأضفها إلى علامة تبويب النص في مربع المحتوى الخاص بك:
<p> </p> <p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p> <p> </p> <p><span><span style="font-size: 50px; font-weight: bold;">$30</span>/mo</span></p> <p> </p> <p><a href="#" style="font-weight: bold; color: #ffffff; background-color: #000000; padding: 15px 40px 15px 40px;">Buy now</a></p> <p> </p>
ولاية
يمكنك اختيار ما إذا كنت تريد أن تكون حالة Toggle Module مفتوحة أو مغلقة. لتتمكن من رؤية جميع التغييرات التي تجريها خلال بقية البرنامج التعليمي ، أوصي بإبقاء الحالة "مفتوحة" حتى تنتهي من تعديل جميع إعدادات التصميم المختلفة.
لون الخلفية
استمر بالذهاب إلى إعدادات الخلفية في Toggle Module وأضف لون خلفية أبيض.
- لون الخلفية: #ffffff
إعدادات الرمز
قم بتغيير لون الرمز في علامة تبويب التصميم التالية.
- لون الأيقونة: # 000000
تبديل الإعدادات
وقم بتعديل Open Toggle Background Color في إعدادات التبديل أيضًا.
- فتح تبديل لون الخلفية: rgba (255،255،255،0)
إعدادات نص العنوان
بعد ذلك ، قم بإجراء بعض التغييرات على إعدادات نص العنوان.
- خط العنوان: Didact Gothic
- وزن خط العنوان: غامق
- لون نص العنوان: # 000000
- حجم نص العنوان: 3.5vw (سطح المكتب) ، 60 بكسل (الجهاز اللوحي) ، 40 بكسل (الهاتف)
إعدادات النص الأساسي
قم بتعديل إعدادات النص الأساسي أيضًا.
- خط الجسم: Didact Gothic
- محاذاة النص الأساسي: يسار
- لون النص الأساسي: # 000000
- حجم النص الأساسي: 18 بكسل
- ارتفاع خط الجسم: 1.5em
استنساخ وحدة التبديل مرتين ووضعها في عمودين متبقيين
بمجرد الانتهاء من تعديل Toggle Module في العمود 1 ، يمكنك المضي قدمًا واستنساخها مرتين ووضع التكرارات في العمودين المتبقيين.
تغيير النسخ
تأكد من تغيير كل نسخ التكرارات وانتهيت!
معاينة
الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على نتيجة التصميم الذي أنشأناه بأحجام مختلفة للشاشات.
افكار اخيرة
في هذا البرنامج التعليمي ، أظهرنا لك طريقة إبداعية لاستخدام Divi's Toggle Module لعرض خطط التسعير على موقع الويب الخاص بك. هذه طريقة رائعة للتفاعل مع الزوار والارتقاء بأسلوب التصميم الخاص بك. يسهل تمييز خطة تسعير محددة في القسم الخاص بك عن طريق الإبقاء على ذلك مفتوحًا والخيارين الآخرين مغلقين. يمكنك استخدام هذا الأسلوب لأي نوع من مواقع الويب التي تقوم بإنشائها. إذا كان لديك أي أسئلة أو اقتراحات ، فتأكد من ترك تعليق في قسم التعليقات أدناه!