كيفية تطبيق لون نص متدرج على نسختك باستخدام خيارات Divi المدمجة فقط

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

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

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

معاينة

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

مقاربة

1. فهم أوضاع مزيج Divi

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

• وضع المزج المطبق على وحدة نمطية سوف يمزج الوحدة + العمود الموجود أسفلها
• وضع المزج المطبق على عمود سوف يمزج العمود + الصف الموجود أسفله
• وضع المزج المطبق على الصف سوف يمزج الصف + القسم الموجود أسفله

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

2. الاختيار بين لوحة ألوان داكنة تمامًا أو فاتحة

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

3. إزالة كل عرض المزراب بين الأعمدة والوحدات النمطية

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

4. استخدام الحشو بدلاً من تغيير عرض العنصر

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

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

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

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

لون الخلفية

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

• لون الخلفية: #ffffff (تخطيط خفيف) ، # 000000 (تخطيط داكن)

تباعد

تابع بإضافة بعض المساحة المتروكة المخصصة إلى القسم.

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

أضف الصف رقم 1

هيكل العمود

بعد ذلك ، أضف صفًا جديدًا باستخدام بنية العمود التالية:

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

أضف خلفية متدرجة إلى العمود الثاني من الصف. هذا هو المكان الذي سنضع فيه وحدة نص العنوان في الجزء التالي من البرنامج التعليمي.

• اللون 1: # c700ff
• اللون 2: # 32f1ff
• العمود 2 اتجاه التدرج: 150 درجة
• موضع البداية للعمود 2: 20٪
• موضع نهاية العمود 2: 60٪

تحجيم

قم بتغيير إعدادات التحجيم أيضًا.

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

تباعد

وتعديل إعدادات التباعد.

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

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

إضافة محتوى

انتقل الآن وأضف وحدة نصية إلى العمود الثاني من الصف الذي أضفته.

لون الخلفية

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

• لون الخلفية: #ffffff (تخطيط خفيف) ، # 000000 (تخطيط داكن)

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

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

• العنوان 2 محاذاة النص: الوسط
• لون نص العنوان 2: # 000000 (تخطيط فاتح) ، #ffffff (تخطيط غامق)
• حجم نص العنوان 2: 67 بكسل (سطح المكتب) ، 50 بكسل (الجهاز اللوحي) ، 40 بكسل (الهاتف)
• العنوان 2 تباعد الأحرف: -2 بكسل

تباعد

وإضافة بعض الحشو السفلي. تذكر أننا نستخدم الحشوة السفلية بدلاً من الهامش للتأكد من عدم ظهور خلفية التدرج اللوني للعمود.

• الحشو السفلي: 50 بكسل

وضع المزج

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

• وضع المزج: تفتيح (تخطيط فاتح) ، معتم (تخطيط داكن)

أضف وحدة المقسم إلى الصف

الرؤية

الوحدة الثانية والأخيرة التي نحتاجها في هذا الصف هي وحدة Divider Module.

• إظهار الحاجز: نعم

لون الخلفية

قم بتغيير لون الخلفية وفقًا لنوع التخطيط الذي تعيد إنشاءه.

• لون الخلفية: #ffffff (تخطيط خفيف) ، # 000000 (تخطيط داكن)

تباعد

لتقليل عرض الحاجز ، سنضيف بعض الحشو المخصص للجانب الأيسر والأيمن.

• الحشوة اليسرى: 250 بكسل
• الحشوة اليمنى: 250 بكسل

وضع المزج

مرة أخرى ، أضف وضع مزج لإظهار خلفية التدرج اللوني للعمود.

• وضع المزج: تفتيح (تخطيط فاتح) ، معتم (تخطيط داكن)

أضف الصف رقم 2

هيكل العمود

إلى الصف التالي! استخدم هيكل العمود التالي:

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

تابع بإضافة خلفية متدرجة إلى العمود الأول.

• اللون 1: # c700ff
• اللون 2: # 32f1ff
• العمود 1 نوع التدرج: خطي
• العمود 1 اتجاه التدرج: 105 درجة
• موضع البداية للعمود 1: 20٪
• موضع نهاية العمود 1: 50٪

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

نحن نستخدم خلفية متدرجة للعمود الثاني أيضًا.

• اللون 1: # 32f1ff
• اللون 2: # c700ff
• العمود 2 نوع التدرج: خطي
• العمود 2 اتجاه التدرج: 90 درجة
• موضع البداية للعمود 2: 40٪
• موضع نهاية العمود 2: 60٪

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

الشيء نفسه ينطبق على العمود الثالث.

• اللون 1: # c700ff
• اللون 2: # 32f1ff
• العمود 3 نوع التدرج: خطي
• العمود 3 اتجاه التدرج: 85 درجة
• موضع البداية للعمود 3: 20٪
• موضع نهاية العمود 3: 50٪

تحجيم

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

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

تباعد

وأضف بعض الحشو الأيمن والأيسر المخصص.

• الحشوة اليسرى: 100 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 50 بكسل (الهاتف)
• الحشوة اليمنى: 100 بكسل (سطح المكتب والكمبيوتر اللوحي) ، 50 بكسل (الهاتف)

أضف الوحدة النمطية للدعاية إلى العمود 1

إضافة محتوى

حان الوقت لبدء إضافة الوحدات! أضف وحدة Blurb Module إلى العمود 1 بعنوان من اختيارك. لاحقًا في المنشور ، سنستخدم وحدة منفصلة لإضافة محتوى الجسم.

اختر الرمز

حدد أيقونة الاختيار.

لون الخلفية

وتعديل لون خلفية Blurb Module.

• لون الخلفية: #ffffff (تخطيط خفيف) ، # 000000 (تخطيط داكن)

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

استمر بالذهاب إلى إعدادات الرمز وإجراء بعض التغييرات هناك.

• لون الرمز: # 000000 (تخطيط فاتح) ، #ffffff (تخطيط غامق)
• وضع الصورة / الرمز: علوي
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 51 بكسل

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

قم بتغيير إعدادات نص العنوان أيضًا.

• وزن خط العنوان: غامق
• محاذاة نص العنوان: الوسط
• لون نص العنوان: # 000000 (تخطيط فاتح) ، #ffffff (تخطيط داكن)
• تباعد حرف العنوان: -1 بكسل
• ارتفاع خط العنوان: 1.2em

تباعد

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

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

وضع المزج

أخيرًا وليس آخرًا ، قم بتطبيق وضع المزج الصحيح.

• وضع المزج: تفتيح (تخطيط فاتح) ، معتم (تخطيط داكن)

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

إضافة محتوى

نحن نفصل عنوان وجسم Blurb Module إلى وحدتين لجعل وضع المزج ينطبق على الرمز والعنوان فقط. انطلق وأضف وحدة نصية أسفل وحدة Blurb التي تحتوي على محتوى الجسم.

لون الخلفية

بعد ذلك ، أضف لون الخلفية.

• لون الخلفية: #ffffff (تخطيط فاتح) ، # 0c0c0c (تخطيط غامق)

إعدادات النص

وتغيير إعدادات النص.

• تباعد حروف النص: 0.5 بكسل
• ارتفاع خط النص: 2.3em
• اتجاه النص: ضبط
• لون النص: داكن (تخطيط فاتح) ، فاتح (تخطيط داكن)

تباعد

لإعطاء الوحدة بعض المساحة للتنفس ، أضف بعض قيم الحشو المخصصة في إعدادات التباعد.

• الحشوة العلوية: 100 بكسل
• الحشو السفلي: 100 بكسل
• الحشو الأيسر: 70 بكسل
• الحشو الأيمن: 70 بكسل

مربع الظل

وفوق ذلك ، أضف ظل مربع دقيقًا أيضًا.

• مربع قوة طمس الظل: 56 بكسل
• قوة انتشار الظل المربع: -12 بكسل
• لون الظل: rgba (0،0،0،0.3)

استنساخ وحدة Blurb ووحدة النص مرتين + ضعهما في الأعمدة المتبقية

أخيرًا وليس آخرًا ، قم بنسخ كلتا الوحدتين اللتين يمكنك العثور عليهما في العمود 1 ووضع التكرارات في العمودين المتبقيين. قم بتغيير المحتوى وفقًا لذلك أيضًا.

معاينة

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

افكار اخيرة

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