3 تأثيرات حركة تمرير سهلة يمكنك إضافتها إلى عناوينك باستخدام Divi

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

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

معاينة

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

مثال 1

سطح المكتب

متحرك

المثال رقم 2

سطح المكتب

متحرك

المثال رقم 3

سطح المكتب

متحرك

قم بتنزيل تخطيطات قسم Scroll Motion Effects مجانًا

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

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

تنزيل مجاني

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

تحميل

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

1. قم ببناء تصميم قسم البطل الخاص بك على صفحة جديدة أو موجودة

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

لون الخلفية

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

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

تباعد

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

• الحشوة العلوية: 15vw (سطح المكتب) ، 20vw (Tablet) ، 25vw (Phone)
• الحشو السفلي: 0vw

فيضانات

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

• الفائض الأفقي: مخفي
• الفائض العمودي: مخفي

أضف الصف رقم 1

هيكل العمود

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

تحجيم

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

• العرض: 90٪
• العرض الأقصى: 100٪

تباعد

قم بإزالة جميع الحشو الافتراضي العلوي والسفلي أيضًا.

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

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

أضف محتوى H1

الوحدة الوحيدة التي نحتاجها في هذا الصف هي وحدة نصية بها بعض محتوى H1.

إعدادات نص H1

قم بتغيير إعدادات نص H1 للوحدة وفقًا لذلك:

• خط العنوان: عرض Playfair
• وزن خط العنوان: غامق
• محاذاة نص العنوان: الوسط
• لون نص العنوان: # 000000
• حجم نص العنوان: 6vw

أضف الصف رقم 2

هيكل العمود

ثم أضف صفًا آخر باستخدام بنية العمود التالية:

خلفية متدرجة

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

• اللون 1: # 444444
• اللون 2: # 000000
• نوع التدرج: خطي
• اتجاه التدرج: 237deg

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 100٪
• العرض الأقصى: 100٪

تباعد

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

• الحشوة العلوية: 0vw
• الحشو السفلي: 10vw (سطح المكتب) ، 15vw (كمبيوتر لوحي) ، 20vw (هاتف)

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

إضافة محتوى

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

إعدادات النص

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات النص على النحو التالي:

• خط النص: عرض Playfair
• لون النص: #dddddd
• حجم النص: 6vw
• ارتفاع خط النص: 1em
• قوة تمويه ظل النص: 0.29em
• لون ظل النص: #ffffff
• محاذاة النص: الوسط

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

إضافة محتوى

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

إعدادات النص

قم بتغيير إعدادات نص الوحدة كما يلي:

• خط النص: Open Sans
• لون النص: # e8e8e8
• حجم النص: 0.9vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 2.5vw (هاتف)
• ارتفاع خط النص: 2em
• محاذاة النص: الوسط

تحجيم

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

• العرض: 40٪ (سطح المكتب) ، 90٪ (الجهاز اللوحي والهاتف)
• محاذاة الوحدة: المركز

تباعد

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

• الهامش العلوي: 10vw (سطح المكتب) ، 15vw (كمبيوتر لوحي) ، 20vw (هاتف)
• الهامش السفلي: 3vw (سطح المكتب) ، 8vw (كمبيوتر لوحي) ، 13vw (هاتف)

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

أضف نسخة

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

انتقام

تابع عن طريق تغيير محاذاة الزر في علامة تبويب التصميم.

• محاذاة الزر: الوسط

إعدادات الزر

بعد ذلك ، قم بتصميم الزر على النحو التالي:

• استخدام الأنماط المخصصة للزر: نعم
• حجم نص الزر: 0.8vw (سطح المكتب) ، 1.5vw (الجهاز اللوحي) ، 2.5vw (الهاتف)
• لون نص الزر: #ffffff
• لون حدود الزر: #ffffff
• نصف قطر حدود الزر: 1 بكسل
• خط الزر: فتح Sans
• وزن خط الزر: غامق
• نمط خط الزر: أحرف كبيرة

تباعد

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

• الحشوة العلوية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة السفلية: 1vw (سطح المكتب) ، 2vw (جهاز لوحي) ، 3vw (هاتف)
• الحشوة اليسرى: 2.5vw (سطح المكتب) ، 5vw (Tablet) ، 8vw (الهاتف)
• الحشو الأيمن: 2.5vw (سطح المكتب) ، 5vw (Tablet) ، 8vw (الهاتف)

2. تطبيق تأثيرات التمرير

مثال 1

وحدة النص # 1

الحركة الأفقية

الآن بعد أن قمنا بتصميم الشكل والمظهر العامين لقسم الأبطال لدينا ، حان الوقت لتطبيق تأثيرات حركة التمرير المختلفة على نسختنا. لإعادة إنشاء المثال الأول ، افتح أول وحدة نصية واستخدم الحركة الأفقية التالية:

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: 0
• الإزاحة المتوسطة: 0
  • 0٪ - 80٪ (سطح المكتب)
  • 0٪ - 95٪ (تابلت وهاتف)
• إزاحة النهاية: -10

تتلاشى للداخل والخارج

سنضيف تأثير التلاشي للداخل والخارج أيضًا.

• تمكين التلاشي للداخل والخارج: نعم
• بدء التعتيم: 100٪
• متوسط ​​التعتيم: 100٪
  • 0٪ - 70٪ (سطح المكتب)
  • 0٪ - 95٪ (تابلت وهاتف)
• نهاية التعتيم: 0٪

وحدة النص # 2

الحركة الأفقية

ثم افتح وحدة النص الثانية في القسم الخاص بك وقم بتطبيق الحركة الأفقية التالية:

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: 10
• الإزاحة المتوسطة: 0
  • 10٪ - 70٪ (سطح المكتب)
  • 10٪ - 95٪ (تابلت وهاتف)
• إزاحة النهاية: 10

تتلاشى للداخل والخارج

جنبًا إلى جنب مع تأثير التلاشي والتلاشي المطابق:

• تمكين التلاشي للداخل والخارج: نعم
• بدء التعتيم: 0٪
• متوسط ​​التعتيم: 100٪
  • 35٪ - 60٪ (سطح المكتب)
  • 35٪ - 95٪ (تابلت وهاتف)
• نهاية التعتيم: 0٪

المثال رقم 2

وحدة النص # 1

الحركة العمودية

هل تريد إعادة إنشاء تأثير حركة التمرير الثاني بدلاً من ذلك؟ افتح أول وحدة نصية في القسم الخاص بك وأضف الحركة العمودية التالية:

• تمكين الحركة العمودية: نعم
• بداية الإزاحة: 0
• الإزاحة المتوسطة: 0
  • 90٪ (سطح المكتب)
  • 95٪ (الجهاز اللوحي والهاتف)
• إزاحة النهاية: -8

التحجيم لأعلى ولأسفل

أضف تأثيرًا متدرجًا لأعلى ولأسفل أيضًا.

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 20٪
• مقياس متوسط: 100٪
  • 20٪ - 80٪ (سطح المكتب)
  • 20٪ - 95٪ (تابلت وهاتف)
• مقياس النهاية: 20٪

وحدة النص # 2

الحركة العمودية

ثم افتح وحدة النص الثانية واستخدم إعدادات الحركة العمودية التالية:

• تمكين الحركة العمودية: نعم
• بداية الإزاحة: 0
• الإزاحة المتوسطة: 0
  • 15٪ - 70٪ (سطح المكتب)
  • 15٪ - 90٪ (تابلت وهاتف)
• إزاحة النهاية: -8

التحجيم لأعلى ولأسفل

أضف تأثيرًا متدرجًا لأعلى ولأسفل بعد ذلك.

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 0٪
• مقياس متوسط: 100٪
  • 30٪ - 70٪ (سطح المكتب)
  • 30٪ - 90٪ (تابلت وهاتف)
• مقياس النهاية: 100٪

طمس

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

• تمكين التعتيم: نعم
• بدء التعتيم: 10 بكسل
• منتصف الضباب: 0 بكسل
  • 40٪ - 73٪ (سطح المكتب)
  • 40٪ - 95٪ (تابلت وهاتف)
• إنهاء الضبابية: 100 بكسل

المثال رقم 3

وحدة النص # 1

الحركة الأفقية

أخيرًا وليس آخرًا ، سنوضح لك كيفية إعادة إنشاء تأثير حركة التمرير الثالث. افتح أول وحدة نصية للقسم وأضف تأثير الحركة الأفقية.

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: 0
• الإزاحة المتوسطة: 0
  • 0٪ - 90٪
• إزاحة النهاية: 10

تتلاشى للداخل والخارج

استخدم تأثير التلاشي للداخل والخارج لهذه الوحدة أيضًا.

• تمكين التلاشي للداخل والخارج: نعم
• بدء التعتيم: 100٪
• متوسط ​​التعتيم: 100٪
  • 0٪ - 90٪ (سطح المكتب)
  • 0٪ - 95٪ (تابلت وهاتف)
• نهاية التعتيم: 0٪

لف

وسنطبق أيضًا تأثير الدوران.

• تمكين التدوير: نعم
• بدء الدوران: 0 درجة
• منتصف الدوران: 0 درجة
  • 0٪ - 90٪ (سطح المكتب)
  • 0٪ - 95٪ (تابلت وهاتف)
• دوران النهاية: 90 درجة

وحدة النص # 2

الحركة الأفقية

ثم افتح وحدة النص الثانية في القسم الخاص بك وقم بتطبيق إعدادات الحركة الأفقية التالية:

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: 0
• الإزاحة المتوسطة: 0
  • 0٪ - 90٪
• إزاحة النهاية: -10

تتلاشى للداخل والخارج

استمر باستخدام تأثير حركة التمرير تتلاشى للداخل والخارج.

• تمكين التلاشي للداخل والخارج: نعم
• بدء التعتيم: 100٪
• متوسط ​​التعتيم: 100٪
  • 0٪ - 80٪ (سطح المكتب)
  • 0٪ - 95٪ (تابلت وهاتف)
• نهاية التعتيم: 0٪

لف

وأكمل إعدادات الوحدة عن طريق إضافة تأثير التمرير الدوراني أيضًا.

• تمكين التدوير: نعم
• بدء الدوران: 0 درجة
• منتصف الدوران: 0 درجة
  • 0٪ - 80٪ (سطح المكتب)
  • 0٪ - 90٪ (تابلت وهاتف)
• نهاية الدوران: -90 درجة

معاينة

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

مثال 1

سطح المكتب

متحرك

المثال رقم 2

سطح المكتب

متحرك

المثال رقم 3

سطح المكتب

متحرك

افكار اخيرة

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

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