كيفية تغيير خلفية متدرجة عند التمرير باستخدام Divi

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

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

معاينة

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

ثابتة

يحوم

قم بتنزيل الرسوم التوضيحية مجانًا

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

قم بتنزيل الملفات

تنزيل مجاني

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

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

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

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

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

تباعد

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

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

أضف الصف رقم 1

هيكل العمود

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

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

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

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

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

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

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

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

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

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

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

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

• لون خلفية العمود 2: #ffffff

تحجيم

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

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

تباعد

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

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

مربع الظل

ومنح الصف ظل مربع خفي كذلك.

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

الانتقالات

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

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

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

تحميل الصور

حان الوقت لبدء إضافة الوحدات! أضف وحدة صورة إلى العمود الأول وقم بتحميل ملف " divi-gradient-background-on-hover-illustration-1.png " الذي يمكنك العثور عليه في المجلد المضغوط الذي قمت بتنزيله في بداية هذا المنشور.

خلفية متدرجة

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

• اللون 1: rgba (50،217،255،0.66)
• اللون 2: rgba (255،255،255،0)
• نوع التدرج: شعاعي
• اتجاه شعاعي: أعلى
• المركز النهائي: 57٪

تباعد

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

• الحشوة العلوية: 14vw

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

إضافة محتوى

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

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

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

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

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

إضافة محتوى

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

إعدادات النص

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

• اتجاه النص: ضبط

تحجيم

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

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

تباعد

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

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

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

أضف نسخة

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

إعدادات الزر

قم بتعديل إعدادات الزر بعد ذلك.

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 1.2vw (سطح المكتب) ، 14 بكسل (الجهاز اللوحي والهاتف)
• لون نص الزر: #ffffff
• لون التدرج 1: # 9ea6ff
• لون التدرج 2: rgba (16،0،201،0.8)
• اتجاه التدرج: 78 درجة
• عرض حد الزر: 0 بكسل
• نصف قطر حدود الزر: 30 بكسل
• تباعد حرف الزر: -1 بكسل
• وزن الخط: عريض للغاية
• نمط الخط: أحرف كبيرة

تباعد

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

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

مربع الظل

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

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

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

تباعد

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

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

أضف الصف رقم 2

هيكل العمود

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

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

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

• لون خلفية العمود 1: #ffffff

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

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

• لون خلفية العمود 2: #ffffff

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

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

• لون خلفية العمود 2: # 3d02ff

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

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

• اللون 1: rgba (255،255،255،0)
• اللون 2: # ff7700
• موضع البداية للعمود 2: 20٪

تحجيم

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

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

تباعد

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

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

مربع الظل

وأضف ظل مربع خفي لهذا الصف أيضًا.

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

الانتقالات

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

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

وحدات نصية مكررة ووحدة زر للصف رقم 1

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

ضع التكرارات في العمود 1 للصف رقم 2

ووضع التكرارات في العمود الأول من الصف الجديد.

تغيير المحتوى

تأكد من تغيير محتوى الوحدات الخاصة بك.

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

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

• اللون 1: # ff653f
• اللون 2: # 0066ff
• اتجاه التدرج: 39 درجة

وحدة استنساخ الصورة للصف رقم 2

استنساخ وحدة الصورة التي يمكنك العثور عليها في العمود الأول من الصف السابق أيضًا.

ضع تكرار في العمود 2 من الصف رقم 2

وضع النسخة المكررة في العمود الثاني من الصف الجديد.

تغيير الصورة

قم بتغيير الصورة إلى ملف " divi-gradient-background-on-hover-illustration-2.png " الذي يمكنك العثور عليه في المجلد المضغوط الذي قمت بتنزيله في بداية هذا المنشور.

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

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

• اللون 1: rgba (0،2،12،0.66)
• اللون 2: rgba (255،255،255،0)
• المركز النهائي: 57٪

معاينة

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

ثابتة

يحوم

افكار اخيرة

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