كيفية إنشاء فصول القسم باستخدام خيارات التصميم الجديدة لديفي

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

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

نتيجة

قبل أن ندخل في الجانب العملي لأنماط الفصول الأربعة ، دعنا نلقي نظرة على ما يمكنك توقعه من النتيجة النهائية.

قسم فصل نمط # 1

قسم فصل نمط # 2

قسم فصل نمط # 3

قسم فصل نمط # 4

كيفية إنشاء فصول القسم باستخدام خيارات التصميم الجديدة لديفي

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

قسم فصل نمط # 1

خيارات الصف

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

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

وحدة المقسم

في جميع الأمثلة لدينا ، سنستخدم فقط أحد العمودين (اعتمادًا على محاذاة الصف). إذا كنت تضع فصلك على الجانب الأيسر من صفحتك ، فاختر العمود الأيسر. بعد ذلك ، أضف وحدة Divider Module وقم بتمكين خيار "Show Divider" ضمن علامة التبويب Content.

انتقل إلى علامة التبويب "تصميم" واستخدم "# 000000" كلون للمقسم.

بعد ذلك ، افتح الفئة الفرعية للأنماط واختر "منقط" كنمط الحاجز و "أعلى" ليكون موضع الحاجز.

بعد ذلك ، تأكد من تطبيق الإعدادات التالية على فئة Sizing الفرعية:

• وزن الحاجز: 3 بكسل
• الارتفاع: 23 بكسل
• العرض: 62٪
• محاذاة الوحدة: يسار

أول وحدة نصية

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

• اللون الأول: rgba (96،150،193،0.16)
• اللون الثاني: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: المركز
• موقف البداية: 51٪
• موضع النهاية: 51٪

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

• خط النص: Happy Monkey
• حجم خط النص: 53 (سطح المكتب والكمبيوتر اللوحي) ، 25 (هاتف)
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

افتح فئة Sizing الفرعية ، واختر عرضًا "40٪" وحدد محاذاة الوحدة النمطية المركزية.

آخر شيء تحتاجه وحدة النص هذه هو الهامش المخصص والحشو التاليين:

• الهامش العلوي: -40 بكسل
• الحشوة العلوية: 40 بكسل
• الحشوة اليمنى: 50 بكسل
• الحشو السفلي: 40 بكسل
• الحشو الأيسر: 50 بكسل

وحدة النص الثانية

أضف وحدة نصية أخرى بإعدادات فئة النص الفرعية التالية:

• خط النص: Arimo
• حجم خط النص: 19 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

قم بالتمرير لأسفل في نفس علامة التبويب ، واستخدم عرض "97٪" وقم بتمكين خيار "محاذاة الوحدة النمطية" المركزية.

أخيرًا ، أضف هامشًا علويًا "-15 بكسل" أيضًا.

وحدة النص الثالثة

تحتوي الوحدة النمطية الأخيرة للنص في فصل القسم على إعدادات الفئات الفرعية للنص التالية:

• خط النص: Arimo
• نمط خط النص: غامق
• حجم خط النص: 19 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

ضمن فئة التحجيم الفرعية ، استخدم عرض "99٪" وحدد محاذاة الوحدة النمطية المركزية.

آخر شيء عليك القيام به في هذا القسم هو إضافة هامش أعلى "-20 بكسل".

قسم فصل نمط # 2

خيارات الصف

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

افتح فئة التباعد الفرعية وقم بتعيين "0 بكسل" إلى الحشوة العلوية واليمنى والسفلية واليسرى.

وحدة المقسم

أضف وحدة Divider إلى العمود الموجود على اليمين وقم بتمكين خيار "Show Divider".

سنستخدم خلفية التدرج التالية للمقسم:

• اللون الأول: rgba (132،132،132،0.61)
• اللون الثاني: rgba (224،43،32،0.86)
• نوع التدرج: خطي
• اتجاه التدرج: 180 درجة
• موقف البداية: 43٪
• موضع النهاية: 100٪

انتقل إلى علامة التبويب "تصميم" وحدد "rgba (0،0،0،0.26)" كلون للمقسم.

بعد ذلك ، استخدم "Solid" كنمط الحاجز و "Top" كوضع الحاجز.

بعد ذلك ، افتح فئة Sizing الفرعية وقم بتطبيق الإعدادات التالية:

• وزن الحاجز: 3 بكسل
• الارتفاع: 11 بكسل
• العرض: 68٪
• محاذاة الوحدة: صحيح

أول وحدة نصية

تحتوي الوحدة النمطية الأولى للنص على إعدادات الفئات الفرعية للنص التالية:

• خط النص: Cantata One
• حجم خط النص: 100 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1.7em
• اتجاه النص: صحيح

افتح فئة التباعد الفرعية واستخدم الهامش المخصص والحشو التاليين:

• الهامش العلوي: -95 بكسل
• الحشوة العلوية: 40 بكسل
• الحشوة اليمنى: 50 بكسل
• الحشو السفلي: 40 بكسل
• الحشو الأيسر: 50 بكسل

وحدة النص الثانية

أضف وحدة نصية أخرى واستخدم إعدادات فئة النص الفرعية التالية بدلاً من ذلك:

• خط النص: Arimo
• حجم خط النص: 20 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

بعد ذلك ، أضف هامشًا علويًا "-50 بكسل".

وحدة النص الثالثة

تحتوي الوحدة النمطية الثالثة والأخيرة للنص في هذا المثال على إعدادات الفئات الفرعية للنص التالية:

• خط النص: Lobster Two
• حجم خط النص: 43 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

أخيرًا ، أضف هامشًا علويًا "-30 بكسل".

قسم فصل نمط # 3

خيارات الصف

بالنسبة للمثال الثالث ، سنستخدم صفًا من عمودين مع خلفية التدرج التالية للعمود 1:

• اللون الأول: # edf000
• اللون الثاني: rgba (255،255،255،0)
• العمود 1 نوع التدرج: خطي
• العمود 1 اتجاه التدرج: 139 درجة
• موضع البداية للعمود 1: 11٪
• موضع نهاية العمود 1: 36٪

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

مرة أخرى ، سنستخدم "0px" للهامش العلوي واليمين والسفلي واليسار.

وحدة المقسم

الآن ، أضف وحدة Divider إلى العمود الأيسر وقم بتمكين خيار "Show Divider".

افتح فئة الخلفية الفرعية واستخدم خلفية التدرج التالية:

• اللون الأول: # 4b61af
• اللون الثاني: rgba (255،255،255،0)
• نوع التدرج: خطي
• اتجاه التدرج: 161 درجة
• موقف البداية: 18٪
• موضع النهاية: 38٪

افتح علامة التبويب "تصميم" واختر "# 000000" كلون للمقسم.

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

بعد ذلك ، تأكد من تطبيق الإعدادات التالية على الفئة الفرعية Sizing:

• وزن الحاجز: 6 بكسل
• الارتفاع: 100 بكسل
• العرض: 70٪
• محاذاة الوحدة: يسار

أول وحدة نصية

تابع عن طريق إضافة أول وحدة نصية أسفل وحدة Divider واختيار خلفية التدرج التالية:

• اللون الأول: rgba (131،0،233،0.58)
• اللون الثاني: rgba (255،255،255،0)
• نوع التدرج: خطي
• اتجاه التدرج: 151 درجة
• موقف البداية: 20٪
• موضع النهاية: 40٪

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

• خط النص: Poiret One
• نمط خط النص: غامق
• حجم خط النص: 69 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1.7em
• اتجاه النص: الوسط

افتح فئة التحجيم الفرعية ، واستخدم عرض "70٪" وحدد محاذاة الوحدة النمطية اليسرى.

أخيرًا ، استخدم الهامش المخصص والحشو التاليين:

• الهامش الأعلى: 124 بكسل
• الحشوة العلوية: 60 بكسل
• الحشو السفلي: 150 بكسل
• الحشو الأيسر: 50 بكسل

وحدة النص الثانية

انطلق وأضف وحدة نصية أخرى بإعدادات فئة النص الفرعية التالية:

• خط النص: Arimo
• حجم خط النص: 20 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

افتح فئة Sizing الفرعية ، وحدد عرضًا "80٪" واختر محاذاة الوحدة النمطية اليسرى.

أخيرًا ، أضف هامشًا علويًا بمقدار "-150 بكسل".

وحدة النص الثالثة

أضف آخر وحدة نصية إلى العمود الأول وتأكد من تطبيق إعدادات الفئات الفرعية للنص التالية:

• خط النص: Arimo
• نمط خط النص: غامق
• حجم خط النص: 20 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: الوسط

افتح فئة التحجيم الفرعية ، واستخدم عرض "80٪" واختر محاذاة الوحدة النمطية اليسرى.

أخيرًا ، اختر الهامش العلوي "-20 بكسل" والمسافة المتروكة السفلية "50 بكسل".

قسم فصل نمط # 4

خيارات الصف

بالنسبة للمثال الأخير ، سنستخدم محاذاة الصف الصحيحة مرة أخرى.

بعد ذلك ، افتح فئة التباعد الفرعية وقم بتعيين "0 بكسل" إلى الحشوة العلوية واليمنى والسفلية واليسرى.

أول وحدة نصية

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

• اللون الأول: rgba (255،255،255،0)
• اللون الثاني: # 92d84b
• نوع التدرج: خطي
• اتجاه التدرج: 55 درجة
• موقف البداية: 25٪
• موضع النهاية: 100٪

بعد ذلك ، انتقل إلى علامة التبويب "تصميم" وتأكد من تطبيق إعدادات الفئات الفرعية للنص التالية:

• خط النص: Cantata One
• حجم خط النص: 220 (سطح المكتب والكمبيوتر اللوحي) ، 100 بكسل (الهاتف)
• لون النص: # f2f2f2 (تطابق لون خلفية القسم)
• ارتفاع خط النص: 1.7em
• اتجاه النص: صحيح

افتح فئة التحجيم الفرعية ، واستخدم عرض "82٪" وحدد محاذاة الوحدة النمطية الصحيحة.

أخيرًا ، استخدم الحشوة المخصصة التالية:

• أعلى: 60 بكسل
• اليمين: 50 بكسل
• الأسفل: 60 بكسل
• اليسار: 50 بكسل

وحدة النص الثانية

أضف وحدة نصية أخرى واستخدم الإعدادات التالية ضمن فئة النص الفرعية:

• خط النص: Arimo
• حجم خط النص: 20 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: صحيح

افتح فئة التحجيم الفرعية ، واختر عرض "39٪" واختر محاذاة الوحدة النمطية المركزية.

أخيرًا ، أضف "-130 بكسل" إلى الهامش العلوي.

وحدة النص الثالثة

تحتوي آخر وحدة نصية في مثال هذا الفصل على إعدادات الفئات الفرعية للنص التالية:

• خط النص: السيناريو الراقص
• حجم خط النص: 45 بكسل
• لون النص: # 000000
• ارتفاع خط النص: 1em
• اتجاه النص: صحيح

افتح فئة Sizing الفرعية ، واختر عرضًا "50٪" وحدد محاذاة الوحدة النمطية المركزية.

أخيرًا وليس آخرًا ، اختر مساحة متروكة علوية "-30 بكسل" وتكون بذلك قد انتهيت!

افكار اخيرة

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!

صورة مميزة بواسطة Kwok Design / shutterstock.com