هيكلة صفحتك باستخدام عرض كامل جريء لتبديل الوحدات باستخدام Divi

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

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

معاينة

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

سطح المكتب

متحرك

قم بتنزيل Bold Fullwidth Toggle Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

اشترك في قناتنا على اليوتيوب

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

إضافة قسم جديد

تباعد

ابدأ بإنشاء صفحة جديدة (أو فتح صفحة موجودة) وإضافة قسم عادي إليها. الشيء الوحيد الذي عليك القيام به في إعدادات القسم هو إزالة جميع الحشو الافتراضي العلوي والسفلي في إعدادات التباعد.

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

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

هيكل العمود

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

تحجيم

بدون إضافة أي وحدات بعد ، افتح إعدادات الصف وتأكد من أن الصف يلامس الجانب الأيسر والأيمن من حاوية القسم عن طريق تعديل إعدادات الحجم. هذه خطوة مهمة في هذا البرنامج التعليمي ؛ إنها تسمح لـ Toggle Module ، التي سنضيفها لاحقًا في هذا البرنامج التعليمي ، لتصبح ذات عرض كامل.

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

تباعد

نعمل على إزالة المساحة المتروكة العلوية والسفلية الافتراضية للصف أيضًا. سيؤدي ذلك إلى إزالة كل المساحة بين وحدة Toggle Module وحاوية الصف / العمود التي تم وضعها فيها.

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

إضافة وحدة تبديل إلى العمود

أدخل العنوان والمحتوى

حان الوقت لبدء إضافة الوحدات! الوحدة الوحيدة التي نحتاجها في هذا الصف هي Toggle Module. سنستخدم مربع العنوان لإضافة عنوان ووضع كل المحتوى الذي نريد مشاركته في مربع محتوى النص. لا تتردد في وضع ما تريد في مربع المحتوى ؛ من النص إلى الصور والمزيد.

ولاية

نحن نستخدم حالة تبديل مغلقة ولكن لا تتردد في تركها مفتوحة أيضًا.

• الدولة: أغلق

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

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

• لون الأيقونة: # 570fff
• استخدام حجم رمز مخصص: نعم
• حجم خط الأيقونة: 6vw

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

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

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

الإعدادات الافتراضية تبديل

قم بتغيير لون خلفية التبديل المغلق بعد ذلك.

• مغلق تبديل لون الخلفية: #ffffff

تحوم تبديل الإعدادات

وتغيير اللون عند التمرير أيضًا.

• مغلق تبديل لون الخلفية: # 000000

إعدادات نص العنوان

تابع عن طريق تعديل إعدادات نص العنوان كما يلي:

• لون نص العنوان: # 000000
• مستوى عنوان العنوان: H2
• خط العنوان: مونتسيرات
• محاذاة نص العنوان: يسار
• حجم نص العنوان: 8vw (سطح المكتب) ، 10vw (الجهاز اللوحي والهاتف)
• تباعد أحرف العنوان: -1vw (سطح المكتب) ، -0.5vw (الجهاز اللوحي والهاتف)
• ارتفاع خط العنوان: 0.7em

الإعدادات الافتراضية لنص العنوان المغلق

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

• خط العنوان المغلق: مونتسيرات
• حجم نص العنوان المغلق: 18vw (سطح المكتب) ، 16vw (الجهاز اللوحي والهاتف)
• ارتفاع خط العنوان المغلق: 0.8em

تحوم فوق إعدادات نص العنوان المغلق

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

• لون نص العنوان المغلق: # f4f4f4

إعدادات النص الأساسي

انتقل إلى إعدادات النص الأساسي وقم بإجراء بعض التغييرات هناك أيضًا.

• خط الجسم: فيرا سانس
• وزن خط الجسم: خفيف
• محاذاة النص الأساسي: ضبط
• حجم النص الأساسي: 1.2vw (سطح المكتب) ، 2vw (الجهاز اللوحي) ، 3vw (الهاتف)
• ارتفاع خط الجسم: 2.1em

تباعد

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

• الحشوة العلوية: 10vw
• الحشو السفلي: 10vw
• الحشوة اليسرى: 6vw

الحدود

تابع عن طريق إزالة الحدود الافتراضية للوحدة النمطية في إعدادات الحدود.

• عرض الحدود: 0 بكسل

تبديل Content CSS

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

width: 60vw;
border-left: 0.2vw solid black;
padding: 5vw 5vw 5vw 5vw;

قم بتعديل عرض سطر كود CSS على الجهاز اللوحي والهاتف:

width: 85vw;

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

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

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

تأكد من تغيير كل محتوى التبديل في كل وحدة Toggle Module المكررة.

تغيير ألوان الأيقونة

بعد ذلك ، افتح كل وحدة تبديل على حدة وقم بتغيير لون الرمز. تلك التي استخدمناها في هذا البرنامج التعليمي مذكورة أدناه:

• لون الأيقونة 1: # ff9000
• لون الأيقونة 2: # 00ffd4

معاينة

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

سطح المكتب

متحرك

افكار اخيرة

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

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