هل ترغب في الحصول على تدرج خلفي في 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 بكسل
أضف القسم رقم 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 التالية. إذا كانت لديك أية مخاوف أو اقتراحات ، فابحث عنا قسم التعليقات لمناقشته.
يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...
