ديفي: كيفية تغيير التدرج اللوني للخلفية عند التمرير

هل ترغب في الحصول على تدرج لوني في الخلفية في Divi يتغير عند تحريك المؤشر عليه؟

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

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

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

دعونا نذهب!

مسح

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

لنبدأ التصميم مع Divi

أنظر أيضا: Divi: كيفية إنشاء شريط تمرير أكورديون سريع الاستجابة

أضف القسم رقم 1

مباعدة

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

• المساحة المتروكة (أعلى وأسفل): 100 بكسل

أضف السطر 1

هيكل العمود

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

لون الخلفية الافتراضي (سطح المكتب) للعمود 1

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

• الخلفية (سطح المكتب): # e7ffa0

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

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

• الخلفية: # 00020c

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

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

• اللون 1 (20٪): rgba (255,255,255,0،XNUMX،XNUMX)
• اللون 2 (100٪): rgba (16,0,201,0.8،XNUMX،XNUMX)
• نوع التدرج: خطي
• اتجاه التدرج: 50 درجة

لون خلفية العمود 2

أضف أيضًا لون الخلفية إلى العمود 2.

• الخلفية: #ffffff

التحجيم

ثم انتقل إلى علامة التبويب تصميم وتغيير إعدادات التحجيم في الخيار التحجيم.

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

مباعدة

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

• المساحة المتروكة (أعلى وأسفل): 0 بكسل

التباعد (العمود 2)

• الحشو (أعلى وأسفل): 6vw (سطح المكتب) ، 120 بكسل (الجهاز اللوحي والهاتف)
• الحشو (يسار ويمين): 5vw (سطح المكتب) ، 80 بكسل (كمبيوتر لوحي) ، 50 بكسل (هاتف)

مربع الظل

وأيضًا امنح الصف ظلًا مربعًا دقيقًا.

• مربع قوة طمس الظل: 100 بكسل
• قوة انتشار الظل المربع: -10 بكسل

الانتقالات

أخيرًا ، سننشئ انتقالًا سلسًا للخلفية المتدرجة عن طريق زيادة مدة الانتقال في علامة التبويب متقدم.

• مدة الانتقال: 1100 مللي ثانية

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

تحميل صورة

حان الوقت لبدء إضافة الوحدات! أضف وحدة صورة إلى العمود الأول.

خلفية متدرجة

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

• اللون 1 (57٪): rgba (50,217,255,0.66،XNUMX،XNUMX،XNUMX)
• اللون 2 (100٪): rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)
• نوع التدرج: دائري
• موقف التدرج: أعلى

مباعدة

بعد ذلك ، أضف حشوة علوية مخصصة للوحدة.

• الحشو (أعلى): 14vw

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

إضافة محتوى

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

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

بعد ذلك ، انتقل إلى إعدادات نص العنوان وقم بإجراء بعض التغييرات.

• الخط: Abril Fatface
• لون النص: # 000000
• حجم النص: 4 vw (سطح المكتب) ، 60 بكسل (جهاز لوحي) ، 40 بكسل (هاتف)

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

إضافة محتوى

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

إعدادات النص

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

• محاذاة النص: مضبوط

التحجيم

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

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

مباعدة

أخيرًا ، أضف هوامش علوية وسفلية مخصصة إلى الوحدة النمطية لإنشاء مسافات.

• الهامش (العلوي والسفلي): 2,5 فولت (سطح المكتب) ، 50 بكسل (الجهاز اللوحي والهاتف)

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

إضافة وصف

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

إعدادات زر

ثم قم بتغيير إعدادات الزر.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1,2 vw (سطح المكتب) ، 14 بكسل (الجهاز اللوحي والهاتف)
• لون نص الزر: #ffffff

• توقف التدرج 1 (0٪): # 9ea6ff
• توقف التدرج 2 (100٪): rgba (16,0,201,0.8،XNUMX،XNUMX،XNUMX)
• التوجيه: 78 درجة

• عرض حد الزر: 0 بكسل
• نصف قطر الحدود: 30 بكسل
• تباعد الأحرف: -1 بكسل
• وزن الخط: عريض للغاية
• نمط الخط: TT - (أحرف كبيرة)

مباعدة

إضافة أيضا قيم التعبئة المخصصة.

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

مربع الظل

وقم بتطبيق ظل مربع دقيق على الزر.

• مربع قوة طمس الظل: 40 بكسل

اقرأ أيضا: كيفية تخصيص وحدة "Countdown Timer" باستخدام GIF

أضف القسم رقم 2

مباعدة

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

• المساحة المتروكة (أعلى وأسفل): 100 بكسل

أضف صفًا إلى عمودين

هيكل العمود

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

العمود 1 الخلفية

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

• الخلفية: #ffffff

خلفية العمود 2 (سطح المكتب)

أضف لون الخلفية التالي إلى العمود 2.

• الخلفية (سطح المكتب): #ffffff

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

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

• الخلفية (تحوم): # 3d02ff

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

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

• توقف التدرج 1 (20٪): rgba (255,255,255,0،XNUMX،XNUMX)
• توقف متدرج 2 (100٪): # ff7700

التحجيم

بعد ذلك ، انتقل إلى إعدادات الحجم وقم بإجراء بعض التغييرات.

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

التباعد (الخط)

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

• المساحة المتروكة (أعلى وأسفل): 0 بكسل

التباعد (العمود 1)

تغيير إعدادات تباعد العمود 1

• الحشو (أعلى وأسفل): 6vw (سطح المكتب) ، 120 بكسل (الجهاز اللوحي والهاتف)
• الحشو (يسار ويمين): 5vw (سطح المكتب) ، 80 بكسل (كمبيوتر لوحي) ، 50 بكسل (هاتف)

مربع الظل

وأضف أيضًا ظل مربع دقيقًا إلى هذا الصف.

• مربع قوة طمس الظل: 100 بكسل
• قوة انتشار الظل المربع: -10 بكسل

الانتقالات

أخيرًا ، قم بإنشاء انتقال سلس عن طريق زيادة مدة الانتقال في علامة التبويب متقدم.

• مدة الانتقال: 1100 مللي ثانية

وحدات سطر 1 مكررة

نظرًا لأن لدينا بالفعل جميع الوحدات التي نحتاجها في القسم السابق ، فسنوفر الوقت عن طريق استنساخها.

ضع التكرارات في الصف 2 أعمدة

وضع التكرارات في السطر الجديد كالتالي:

تعديل المحتوى

تأكد من تعديل محتوى وحداتك.

تغيير خلفية زر التدرج

قم أيضًا بتغيير تدرج خلفية الزر.

• توقف التدرج 0٪: # ff653f
• توقف التدرج بنسبة 100٪: # 0066ff
• الاتجاه: 39 درجة

تغيير الصورة

استبدل الصورة.

تغيير تدرج الخلفية

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

• توقف التدرج 0٪: rgba (0,2,12,0.66،XNUMX،XNUMX،XNUMX)
• توقف التدرج 57٪: rgba (255,255,255,0،XNUMX،XNUMX،XNUMX)

مسح

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

تحميل DIVI Now !!!

الخاتمة

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

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

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

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

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

...