تتيح لك وحدة التبديل في Divi عرض محتوى إضافي عند النقر، دون الحاجة إلى أكواد jQuery إضافية. وكما هو الحال مع وحدة Accordion، تُستخدم وحدات التبديل عادةً لمشاركة محتوى مُجمّع، مثل الأسئلة الشائعة. ومع ذلك، يمكنك استخدامها أيضًا لأغراض أخرى، مثل هيكلة صفحتك. في هذا البرنامج التعليمي، سنستخدم وحدات تبديل كاملة العرض لإنشاء تصميم صفحة بسيط يستجيب للنقرات. يتميز أسلوب التصميم الذي نتناوله بالجرأة والوضوح. ستتمكن أيضًا من تنزيل ملف JSON مجانًا!
دعونا نذهب.
قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على كيفية ظهوره على أحجام الشاشات المختلفة.
لنبدأ إعادة
إضافة قسم جديد
مباعدة
ابدأ بإنشاء صفحة جديدة (أو فتح صفحة موجودة) وإضافة قسم عادي إليها. الشيء الوحيد الذي يجب فعله في إعدادات القسم هو إزالة جميع الحشو الافتراضي العلوي والسفلي من إعدادات التباعد.
- أعلى الحشو: 0px
- الحشو السفلي: 0px
أضف سطرًا جديدًا
هيكل العمود
متابعة إضافة صف جديد باستخدام بنية الأعمدة التالية:
التحجيم
بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وتأكد من أن الخط يلامس الجانبين الأيسر والأيمن من حاوية القسم عن طريق تغيير إعدادات الحجم. هذه خطوة مهمة في هذا البرنامج التعليمي. يسمح هذا لوحدة Toggle ، التي سنضيفها لاحقًا في هذا البرنامج التعليمي ، أن تصبح كاملة العرض.
- استخدم عرض مزراب مخصص: نعم
- عرض مزراب: 1
- العرض: 100٪
- الحد الأقصى للعرض: 100٪
مباعدة
نعمل أيضًا على إزالة المساحة المتروكة الافتراضية العلوية والسفلية من الصف. سيؤدي ذلك إلى إزالة كل المساحة بين وحدة التبديل وحاوية الصف / العمود التي يتم وضعها فيها.
- أعلى الحشو: 0px
- الحشو السفلي: 0px
إضافة وحدة الروك
أدخل العنوان والمحتوى
حان وقت إضافة الوحدات! الوحدة الوحيدة التي نحتاجها في هذا الصف هي وحدة تبديل. سنستخدم منطقة العنوان لإضافة عنوان ووضع كل المحتوى الذي نريد مشاركته في منطقة محتوى النص. لا تتردد في إضافة أي شيء تريده في منطقة المحتوى؛ من نصوص وصور وغيرها.
الجهة
نستخدم حالة تبديل مغلقة ، لكن لا تتردد في تركها مفتوحة أيضًا.
- الدولة: قريب
إعدادات الرمز الافتراضية
قم بالتبديل إلى علامة تبويب التصميم وقم بتغيير إعدادات رمز الوحدة وفقًا لذلك:
- لون الأيقونة: # 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
مسح
الآن وقد تم اتخاذ جميع الخطوات ، دعنا نلقي نظرة أخيرة على ما حدث مع أحجام الشاشات المختلفة.
الأفكار النهائية
في هذه المقالة، شرحنا لكم كيفية إطلاق العنان لإبداعكم باستخدام وحدة "تبديل" في ديفي. تحديدًا، أنشأناها بعرض كامل واستخدمناها لعرض محتوى من أقسام مختلفة بشكل إبداعي. يوضح هذا الشرح التعليمي إمكانية استخدام وحدات ديفي بسهولة ويسر عند استخدام الحاويات المختلفة. كما يمكنكم تنزيل ملف JSON الخاص بالشرح التعليمي مجانًا! لأي استفسارات أو اقتراحات، لا تترددوا في ترك تعليق في قسم التعليقات أدناه.