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

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

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

معاينة

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

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

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

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

تباعد

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

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

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

هيكل العمود

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

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

إضافة محتوى

حان الوقت لبدء إضافة الوحدات! سنحتاج إلى 8 وحدات Blurb Modules إجمالاً. سنبدأ بالأولى ، ونجري التغييرات العامة وننسخها 7 مرات بعد ذلك قبل إجراء تغييرات فريدة على كل وحدة Blurb Module. أضف وحدة Blurb Module جديدة إلى العمود الأول وأضف بعض المحتوى المفضل.

إعدادات النص

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

• اتجاه النص: الوسط
• لون النص: غامق

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

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

• خط العنوان: أنتيك ديدون
• حجم نص العنوان: 23 بكسل
• ارتفاع خط العنوان: 1.5em

مربع الظل

أخيرًا ، أضف ظل مربع دقيقًا إلى Blurb Module أيضًا.

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

Clone Blurb Module 7 Times & Place 4 مكررات في العمود الثاني

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

تعديل الوحدة النمطية Blurb # 1

خلفية متدرجة

يمكننا الآن البدء في إضافة إعدادات فريدة لكل واحد من وحدات Blurb Modules. افتح أول وحدة Blurb Module في العمود 1 وأضف خلفية متدرجة إليها.

• اللون 1: rgba (255،255،255،0)
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: أسفل
• موقف البداية: 45٪
• موضع النهاية: 45٪
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

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

• موضع صورة الخلفية: المركز العلوي
• تكرار صورة الخلفية: لا يوجد تكرار

تباعد

أخيرًا وليس آخرًا ، أضف بعض الحشو المخصص لوضع كل شيء في مكانه.

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

تعديل Blurb Module # 2

خلفية متدرجة

دعنا ننتقل إلى Blurb Module التالي (الوحدة الأولى في العمود الثاني) ونضيف خلفية متدرجة.

• اللون 1: rgba (255،255،255،0)
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• الاتجاه الشعاعي: أعلى اليمين
• موقف البداية: 45٪
• موضع النهاية: 45٪
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

تابع عن طريق إضافة صورة خلفية مقترنة بإعدادات الخلفية أدناه.

• موضع صورة الخلفية: أعلى اليمين
• تكرار صورة الخلفية: لا يوجد تكرار

تباعد

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

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

تعديل الوحدة النمطية Blurb # 3

خلفية متدرجة

انتقل إلى الوحدة النمطية Blurb الثالثة (الوحدة النمطية الثانية في العمود الأول). افتح الإعدادات وأضف خلفية متدرجة.

• اللون 1: rgba (255،255،255،0)
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى اليسار
• موقف البداية: 45٪
• موضع النهاية: 45٪
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

تواصل بإضافة صورة خلفية بعد ذلك.

• موضع صورة الخلفية: أعلى اليسار
• تكرار صورة الخلفية: لا يوجد تكرار

تباعد

وأضف بعض الحشو المخصص للوحدة لتأخذ شكلها.

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

تعديل الوحدة النمطية Blurb # 4

خلفية متدرجة

إلى الوحدة الثانية في العمود الثاني! افتح إعدادات Blurb Module وأضف خلفية متدرجة.

• اللون 1: rgba (255،255،255،0)
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى
• موقف البداية: 45٪
• موضع النهاية: 45٪
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

تواصل بإضافة صورة خلفية بعد ذلك.

• موضع صورة الخلفية: المركز العلوي
• تكرار صورة الخلفية: لا يوجد تكرار

تباعد

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

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

تعديل الوحدة النمطية Blurb # 5

خلفية متدرجة

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

• اللون 1: rgba (255،255،255،0)
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• اتجاه شعاعي: يسار
• موقف البداية: 35٪
• موضع النهاية: 35٪
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

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

• موضع صورة الخلفية: أعلى اليسار
• تكرار صورة الخلفية: لا يوجد تكرار

تباعد

وأضف بعض قيم الحشو المخصصة في إعدادات التباعد أيضًا.

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

تعديل Blurb Module # 6

خلفية متدرجة

إلى الوحدة الثالثة في العمود الثاني! افتح الإعدادات وأضف خلفية متدرجة.

• اللون 1: rgba (255،255،255،0)
• اللون 2: #ffffff
• نوع التدرج: خطي
• اتجاه التدرج: 140 درجة
• موقف البداية: 60٪
• موضع النهاية: 60٪
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

أضف صورة خلفية مع إعدادات الخلفية المطابقة بعد ذلك.

• موضع صورة الخلفية: المركز العلوي
• تكرار صورة الخلفية: لا يوجد تكرار

تباعد

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

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

تعديل Blurb Module # 7

خلفية متدرجة

تستخدم الوحدة النمطية Blurb التالية في العمود 1 الخلفية المتدرجة التالية:

• اللون 1: rgba (255،255،255،0)
• اللون 2: #ffffff
• نوع التدرج: خطي
• اتجاه التدرج: 220 درجة
• موقف البداية: 60٪
• موضع النهاية: 60٪
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

أضف صورة الخلفية أيضًا.

• موضع صورة الخلفية: المركز العلوي
• تكرار صورة الخلفية: لا يوجد تكرار

تباعد

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

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

تعديل الوحدة النمطية Blurb # 8

خلفية متدرجة

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

• اللون 1: rgba (255،255،255،0)
• اللون 2: #ffffff
• نوع التدرج: شعاعي
• الاتجاه الشعاعي: صحيح
• موقف البداية: 35٪
• موضع النهاية: 35٪
• وضع التدرج فوق صورة الخلفية: نعم

الصورة الخلفية

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

• موضع صورة الخلفية: أعلى اليسار
• تكرار صورة الخلفية: لا يوجد تكرار

تباعد

وقم بإنهاء التصميم والبرنامج التعليمي عن طريق إضافة بعض الحشو المخصص لإعدادات التباعد للوحدة.

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

معاينة

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

افكار اخيرة

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