كيفية إنشاء عناوين أقسام نابضة بالحياة لمشروع Divi التالي

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

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

معاينة

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

لنبدأ في الإنشاء!

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

تباعد

ابدأ بفتح صفحة جديدة ، وانتقل إلى Visual Builder وإضافة قسمك الأول. بدون إضافة أي صفوف أو وحدات بعد ، افتح إعدادات القسم وأضف بعض المساحة المتروكة:

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

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

هيكل العمود

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

لون الخلفية

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

• لون الخلفية: # f9f9f9

العمود 1 خلفية متدرجة

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

• اللون 1: # 0031c4
• اللون 2: # 00aeff
• العمود 1 اتجاه التدرج: 125 درجة

تحجيم

قم بتغيير تباعد الصف أيضًا للتأكد من أنه يشغل عرض الشاشة بالكامل.

• جعل هذا الصف بعرض كامل: نعم
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم

تباعد

أخيرًا ، قم بتغيير إعدادات التباعد وفقًا لأحجام الشاشة المختلفة:

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل
• الحشوة العلوية للعمود 2: 200 بكسل
• مساحة العمود 2 السفلية: 200 بكسل
• الحشوة اليسرى للعمود 2: 350 بكسل (سطح المكتب) ، 50 بكسل (الكمبيوتر اللوحي والهاتف)
• الحشوة اليمنى للعمود 2: 50 بكسل

إضافة وحدة نص عنوان القسم إلى العمود 1

إعدادات نص H2

الآن بعد أن أصبحت جميع إعدادات الصف في مكانها الصحيح ، يمكننا البدء في إضافة الوحدات النمطية. سنبدأ بالعمود الأول. هنا ، الوحدة الوحيدة التي سنحتاجها هي وحدة نصية. بعد إضافة محتوى H2 في مربع المحتوى ، امض قدمًا وقم بتغيير إعدادات نص H2:

• وزن خط العنوان 2: غامق للغاية
• نمط خط العنوان 2: أحرف كبيرة
• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: #ffffff
• حجم نص العنوان 2: 150 بكسل
• ارتفاع خط العنوان 2: 1.25em
• الطول الرأسي لظل النص في العنوان 2: -0.55em
• لون ظل النص في العنوان 2: rgba (0،255،255،0.25)

تباعد

يختلف التداخل بين العمود على سطح المكتب والجهاز اللوحي والهاتف. لإنشاء التداخل ، سنجري بعض التغييرات على إعدادات التباعد في وحدة النص الخاصة بنا:

• الهامش العلوي: 325 بكسل (سطح المكتب) ، 150 بكسل (الجهاز اللوحي والهاتف)
• الهامش السفلي: 325 بكسل ، -120 بكسل (جهاز لوحي) ، -110 بكسل (هاتف)
• الهامش الأيمن: -100٪ (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)

منقي

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

• وضع المزج: تراكب

أضف وحدة نص العنوان إلى العمود 2

إعدادات نص H3

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

• وزن خط العنوان 3: شبه عريض
• لون نص العنوان 3: # 00aeff
• حجم نص العنوان 3: 60 بكسل
• العنوان 3 تباعد الأحرف: -3 بكسل

تباعد

قم بإنشاء بعض المساحة عن طريق إضافة الهامش السفلي التالي:

• الهامش السفلي: 50 بكسل

أضف وحدة Divider إلى العمود 2

لون المقسم

الوحدة الثانية التي سنحتاجها هي وحدة Divider Module. افتح إعدادات اللون وغير اللون ليتوافق مع لوحة ألوان التصميم:

• لون المقسم: # 00ffff

تحجيم

بعد ذلك ، قم بتعديل إعدادات التحجيم:

• الارتفاع: 56 بكسل
• العرض: 75٪

أضف وحدة نص الوصف إلى العمود 2

إعدادات النص

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

• حجم النص: 17 بكسل
• ارتفاع خط النص: 1.3em
• اتجاه النص: ضبط

تحجيم

قم بتغيير إعدادات التحجيم بعد ذلك:

• الحجم: 70٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)

تباعد

أضف بعض المساحة أسفل هذه الوحدة باستخدام الهامش السفلي أيضًا:

• الهامش السفلي: 50 بكسل

أضف وحدة الزر إلى العمود 2

إعدادات الزر

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

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 17 بكسل
• لون نص الزر: #ffffff
• لون خلفية الزر: # 00aeff
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 100 بكسل
• تباعد حرف الزر: -1 بكسل
• وزن الخط: عريض للغاية
• نمط الخط: أحرف كبيرة

تباعد

ولإعطاء الزر مظهرًا وملمسًا أنظف ، سنضيف بعض الحشو أيضًا:

• الحشوة العلوية: 10 بكسل
• الحشو السفلي: 10 بكسل
• الحشوة اليسرى: 30 بكسل
• الحشو الأيمن: 30 بكسل

مربع الظل

أخيرًا وليس آخرًا ، سنستخدم ظل مربع دقيقًا لإضافة القليل من العمق إلى قسمنا:

• قوة مربع الظل الضبابية: 54 بكسل
• قوة انتشار الظل المربع: -8 بكسل
• لون الظل: rgba (0،0،0،0.3)

قسم الاستنساخ

تغيير كل نسخ

لإنشاء القسم الثاني ، سنقوم ببساطة باستنساخ القسم الذي أنشأناه بالفعل ثم تغيير كل النسخة.

تغيير لون خلفية الصف

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

• لون الخلفية: #efefef

تغيير خلفية العمود 1 التدرج

ثم اختر خلفية متدرجة أخرى أيضًا.

• اللون 1: # 5f00a8
• اللون 2: # 9000ff

تغيير لون الظل لعنوان القسم

نحن نطابق لون ظل النص مع لوحة الألوان الجديدة أيضًا:

• لون ظل نص العنوان 2: rgba (255،0،255،0.24)

تغيير إعدادات تباعد عنوان القسم

اعتمادًا على طول النسخة التي تستخدمها ، ستحتاج إلى التلاعب بالهامش الأيمن السلبي.

• الهامش الأيمن: -110٪ (سطح المكتب)

تغيير لون نص وحدة نص العنوان

بعد ذلك ، قم بتغيير لون النص الخاص بالعنوان Text Module في العمود 2.

• لون نص العنوان 3: # 9000ff

تغيير لون الحاجز

وبالمثل ، اجعل لون المقسم يتناسب مع التصميم.

• اللون: # ff00ff

تغيير لون خلفية الزر

للإنهاء ، ستحتاج إلى تغيير لون خلفية وحدة الأزرار.

• لون خلفية الزر: # 9000ff

معاينة

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

افكار اخيرة

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