وحدة تبديل من Divi يسمح لك بعرض محتويات إضافية لكل نقرة، دون الحاجة إلى كود jQuery إضافي. على غرار وحدة الأكورديون، تُستخدم عادةً وحدات التبديل لمشاركة ملف محتويات مجمعة، مثل الأسئلة المتداولة. ومع ذلك، يمكنك أيضًا استخدامها لمهام أخرى، على سبيل المثال، لتنظيم صفحتك. في هذا البرنامج التعليمي، سنستخدم وحدات تبديل كاملة العرض لإنشاء تصميم بسيط للصفحة يتصرف عند النقر. أسلوب التصميم الذي نتعامل معه جريء ونظيف. ستتمكن أيضًا من تنزيل ملف JSON مجانًا!
دعونا نذهب.
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على كيفية ظهوره على أحجام الشاشات المختلفة.
لنبدأ إعادة
إضافة قسم جديد
مباعدة
ابدأ بإنشاء صفحة جديدة (أو فتح صفحة موجودة) وإضافة قسم عادي إليها. الشيء الوحيد الذي يجب فعله في إعدادات القسم هو إزالة جميع الحشو الافتراضي العلوي والسفلي من إعدادات التباعد.
- أعلى الحشو: 0px
- الحشو السفلي: 0px
أضف سطرًا جديدًا
هيكل العمود
متابعة إضافة صف جديد باستخدام بنية الأعمدة التالية:
التحجيم
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وتأكد من أن الخط يلامس الجانبين الأيسر والأيمن من حاوية القسم عن طريق تغيير إعدادات الحجم. هذه خطوة مهمة في هذا البرنامج التعليمي. يسمح هذا لوحدة Toggle ، التي سنضيفها لاحقًا في هذا البرنامج التعليمي ، أن تصبح كاملة العرض.
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- العرض: 100٪
- الحد الأقصى للعرض: 100٪
مباعدة
نعمل أيضًا على إزالة المساحة المتروكة الافتراضية العلوية والسفلية من الصف. سيؤدي ذلك إلى إزالة كل المساحة بين وحدة التبديل وحاوية الصف / العمود التي يتم وضعها فيها.
- أعلى الحشو: 0px
- الحشو السفلي: 0px
إضافة وحدة الروك
أدخل العنوان والمحتوى
حان الوقت للبدء في إضافة وحدات! الوحدة الوحيدة التي نحتاجها في هذا الخط هي وحدة Toggle. سوف نستخدم منطقة العنوان لإضافة عنوان ووضع كل شيء محتويات التي نريد مشاركتها في منطقة محتوى الجسم. لا تتردد في وضع ما تريد في منطقة المحتوى؛ من النص إلى الصور وأكثر من ذلك.
الجهة
نستخدم حالة تبديل مغلقة ، لكن لا تتردد في تركها مفتوحة أيضًا.
- الدولة: قريب
إعدادات الرمز الافتراضية
قم بالتبديل إلى علامة تبويب التصميم وقم بتغيير إعدادات رمز الوحدة وفقًا لذلك:
- لون الأيقونة: # 570fff
- استخدام حجم رمز مخصص: نعم
- حجم الخط رمز: 6vw
إعدادات الرمز عند التمرير
تغيير لون رمز التمرير.
- لون الأيقونة: # f2f2f2
إعدادات الفشل الافتراضية
ثم قم بتغيير لون الخلفية للمفتاح المغلق.
- تبديل لون الخلفية: #ffffff
تحوم فوق الإعدادات
وتغيير اللون تحوم جدا.
- تبديل لون الخلفية: # 000000
إعدادات نص العنوان
تابع بتغيير إعدادات النص الخاصة بالعنوان كما يلي:
- عنوان نص اللون: # 000000
- العنوان مستوى العنوان: H2
- عنوان الشرطة: مونتسيرات
- عنوان النص: محاذاة إلى اليسار
- حجم عنوان النص: 8vw (سطح المكتب) ، 10vw (الجهاز اللوحي والهاتف)
- تباعد خطاب العنوان: -1vw (سطح المكتب) ، -0.5vw (الجهاز اللوحي والهاتف)
- ارتفاع سطر العنوان: 0.7em
إعدادات نص العنوان مغلقة الافتراضية
بعد ذلك ، قم بالوصول إلى معلمات النص الخاصة بالعنوان المغلق وقم بتعديلها وفقًا لذلك:
- عنوان الخط مغلق: مونتسيرات
- عنوان مغلق حجم النص: 18vw (سطح المكتب) ، 16vw (الكمبيوتر اللوحي والهاتف)
- ارتفاع عنوان مغلق: 0.8em
قم بالمرور فوق إعدادات النص الخاصة بالعنوان
تغيير لون نص التسمية التوضيحية المغلقة في التحويم.
- العنوان مغلق لون النص: # f4f4f4
إعدادات نص الجسم
انتقل إلى إعدادات النص الأساسي وإجراء بعض التغييرات أيضًا.
- خط الجسم: Fira Sans
- وزن الخط: الضوء
- محاذاة النص الأساسي: ضبط
- حجم النص الأساسي: 1.2vw (سطح المكتب) ، 2vw (الكمبيوتر اللوحي) ، 3vw (الهاتف)
- ارتفاع الجسم: 2.1em
مباعدة
أضف أيضًا حشوة مخصصة في أعلى وأسفل ويسار الوحدة.
- أعلى الحشو: 10vw
- الحشو السفلي: 10vw
- الحشوة اليسرى: 6vw
الحدود
تابع عن طريق إزالة الحد الافتراضي للوحدة النمطية في إعدادات الحدود.
- عرض الحد: 0px
تبديل محتوى CSS
حدد معلمات الوحدة النمطية Toggle عن طريق إضافة سطور كود CSS التالية إلى سطح المكتب:
العرض: 60vw ؛ الحدود اليسرى: 0.2vw solidblack ؛ الحشو: 5vw 5vw 5vw 5vw ؛
تغيير عرض سطر كود CSS على الجهاز اللوحي والهاتف:
العرض: 85vw ؛
استنساخ القسم بأكمله عدة مرات كما تريد
بمجرد الانتهاء من القسم الأول والخط ووحدة تبديل ، يمكنك استنساخ القسم بأكمله عدة مرات كما تريد. حسب كمية المحتوى الذي تريد عرضه على صفحتك.
تغيير المحتوى
تأكد من تغيير كامل محتويات flip-flop في كل وحدة flip-flop.
تغيير ألوان الرموز
ثم افتح كل وحدة Toggle بشكل فردي وقم بتغيير لون الرمز. تلك التي استخدمناها في هذا البرنامج التعليمي مذكورة أدناه:
- لون الأيقونة 1: # ff9000
- لون الأيقونة 2: # 00ffd4
مسح
الآن وقد تم اتخاذ جميع الخطوات ، دعنا نلقي نظرة أخيرة على ما حدث مع أحجام الشاشات المختلفة.
الأفكار النهائية
في هذه المقالة ، أوضحنا لك كيفية الإبداع باستخدام وحدة Toggle النمطية الخاصة بـ Divi. أكثر دقة؛ لقد جعلناها بعرض كامل واستخدمناها لعرض المحتوى من أقسام مختلفة بطرق إبداعية. يوضح هذا البرنامج التعليمي أنه يمكنك بسهولة استخدام وحدات Divi خارج الصندوق عندما تأخذ في الاعتبار الحاويات المختلفة. لقد تمكنت أيضًا من تنزيل ملف JSON التعليمي مجانًا! إذا كان لديك أي أسئلة أو اقتراحات، فلا تتردد في ترك تعليق في قسم التعليقات أدناه.