كيفية إنشاء نص وصور تتغير عند التمرير في Divi

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

يمكنك تنزيل التخطيط كملف JSON أو إعادة إنشائه على موقع Divi الخاص بك.

هيا بنا نبدأ.

معاينة

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

سطح المكتب

متحرك

قم بتنزيل النص والصور التي تتغير في قسم التمرير مجانًا

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

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

تنزيل مجاني

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

تحميل

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

إعادة إنشاء قسم مع النص والصور التي تتغير في التمرير

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

خلفية

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

• صورة الخلفية: مربع وتصميم النقاط
  • سطح المكتب: الصورة 1
  • الجهاز اللوحي: الصورة 2
  • الهاتف: الصورة 3
• حجم الصورة: الغلاف
• تكرار صورة الخلفية: كرر Y (عموديًا)

تباعد

أضف بعض التباعد إلى القسم.

• حشوة علوية وسفلية: 30٪

الرؤية

إخفاء الفيضانات أيضًا.

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

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

الرؤية

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

• أفقي: مخفي
• تجاوز عمودي: افتراضي

أضف وحدة نصية

نص

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

• النص الأساسي: محتوى H1 - فريق الإنتاج

نص العنوان

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

• مستوى العنوان: H1
• الخط: Fredoke One
• الوزن: جريء
• لون أسود
• مقاس
  • سطح المكتب: 100 بكسل
  • الجهاز اللوحي: 75 بكسل
  • الهاتف: 33 بكسل
• تباعد الأحرف
  • سطح المكتب: 4 بكسل
  • الجهاز اللوحي: 3 بكسل
  • الهاتف: 2 بكسل

تحجيم

ثم اضبط العرض.

• العرض: 100٪

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

تحجيم

أضف الآن صفًا ثانيًا واضبط إعدادات التحجيم وفقًا لذلك:

• العرض: 80٪
• العرض الأقصى: 1000 بكسل

الرؤية

إخفاء الفيضانات أيضًا.

• الفيضانات الأفقية والعمودية: مخفية

أضف وحدة النص الأولى

نص

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

• الجسم: محتوى H2 - ضبط التصوير

نص العنوان

نمط العنوان التالي.

• مستوى العنوان: H2
• الوزن: جريء
• النمط: TT
• اللون: أسود # 000000
• مقاس
  • سطح المكتب: 50 بكسل
  • الجهاز اللوحي: 40 بكسل
  • الهاتف: 28 بكسل
• تباعد الأحرف: 3 بكسل

تباعد

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

• الهامش العلوي والسفلي: 0 بكسل

تأثيرات التمرير

أكمل إعدادات الوحدة بإضافة تأثيرات التمرير التالية:

• التلاشي للداخل والخارج: تمكين
• منفذ العرض السفلي
  • الموقف: 42٪
  • بدء التعتيم: 0٪
• متوسط ​​التعتيم
  • المركز السفلي: 43٪
  • أعلى مركز: 53٪
  • متوسط ​​التعتيم: 100٪
• منفذ العرض الأعلى
  • الموقف: 54٪
  • نهاية التعتيم: 0٪

وحدة نص مكررة مرتين

استنساخ وحدة النص مرتين.

ضبط وحدة النص الثانية

نص

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

• الجسم: محتوى H2 - الإخراج الفني

موقع

أضف تحديد المواقع المطلق إلى الوحدة أيضًا.

• الموقف: مطلق
• الموقع: أعلى اليسار

تأثيرات التمرير

بعد ذلك ، قم بتحديث إعدادات تأثير التمرير.

• التلاشي للداخل والخارج: تمكين
• منفذ العرض السفلي
  • الموقف: 56٪
  • بدء التعتيم: 0٪
• متوسط ​​التعتيم
• المركز السفلي: 57٪
• أعلى مركز: 67٪
• متوسط ​​التعتيم: 100٪
• منفذ العرض الأعلى
  • • المركز: 68٪
    • نهاية التعتيم: 0٪

  

ضبط الوحدة النمطية الثالثة للنص

نص

الآن اضبط وحدة النص الثانية مكررة. قم بتغيير المحتوى أولاً.

• الجسم: محتوى H2 - الدعائم وخزانة الملابس

موقع

أضف موضعًا مطلقًا بعد ذلك.

• الموقف: مطلق
• الموقع: أعلى اليسار

تأثيرات التمرير

بعد ذلك ، قم بتعديل تأثيرات التمرير.

• التلاشي للداخل والخارج: تمكين
• منفذ العرض السفلي
  • المنصب: 70٪
  • بدء التعتيم: 0٪
• متوسط ​​التعتيم
  • المركز السفلي: 71٪
  • أعلى مركز: 80٪
  • متوسط ​​التعتيم: 100٪
• منفذ العرض الأعلى
  • المركز: 81٪
  • نهاية التعتيم: 0٪

إضافة وحدة صورة

صورة

حان الوقت الآن لإضافة وحدة صورة. استخدم صورة مربعة بحجم صورة 350 × 350 بكسل.

• الصورة: صورة مربعة 350 x 350 px

انتقام

اضبط المحاذاة إلى اليسار.

• محاذاة الصورة: يسار

تباعد

اضبط التباعد أيضًا.

• إظهار المساحة أسفل الصورة:
• الهامش العلوي: -60 بكسل

المرشحات

ثم أضف مرشحًا لجعل الصورة غير مشبعة.

• التشبع: 0٪

الرؤية

الآن ، انتقل إلى علامة التبويب خيارات متقدمة واضبط الفائض على مخفي.

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

تأثيرات التمرير

أخيرًا وليس آخرًا ، أضف تأثير التمرير للداخل والخارج.

• التلاشي للداخل والخارج: تمكين
• منفذ العرض السفلي
  • المنصب: 70٪
  • بدء التعتيم: 0٪
• متوسط ​​التعتيم
  • المركز: 71٪
  • الوسط: 100٪
• منفذ العرض الأعلى
  • المركز: 100٪
  • نهاية التعتيم: 0٪

إضافة دعوة إلى وحدة الإجراء

نص

إلى الوحدة التالية ، وهي عبارة عن وحدة دعوة للعمل. قم بتضمين بعض المحتوى من اختيارك.

• العنوان: فريق جيسون للفنون
• زر: احجز فريق جيسون للفنون
• النص الأساسي: المحتوى الوصفي

وصلة

أضف ارتباطًا بعد ذلك.

• الارتباط: الارتباط الخاص بك

خلفية

قم بإزالة لون الخلفية الافتراضي أيضًا.

• استخدام لون الخلفية: لا

نص

ثم قم بتعيين المحاذاة إلى اليمين.

• محاذاة النص: صحيح

نص العنوان

صمم نص العنوان أيضًا.

• مستوى العنوان: H3
• الخط: Fredoke One
• محاذاة نص العنوان: يسار
• اللون: أسود #oooooo
• مقاس
  • سطح المكتب: 48 بكسل
  • الجهاز اللوحي: 42 بكسل
  • الهاتف: 33 بكسل
• تباعد الأحرف
  • سطح المكتب والجهاز اللوحي: 1 بكسل
  • الهاتف: 0 بكسل
• ارتفاع خط
  • سطح المكتب والجهاز اللوحي: 1.6em
  • الهاتف: 1.1em

نص أساسي

ثم النص الأساسي.

• الخط: Verdana
• اللون: أسود # 000000
• الحجم: 14 بكسل
• تباعد الأحرف: 0.5 بكسل

زر

اضبط أنماط الزر أيضًا.

• الأنماط المخصصة
• حجم النص: 17 بكسل
• لون النص: أبيض #ffffff
• الخلفية: أسود # 000000
• تباعد الأحرف: 1 بكسل
• الخط: Verdana
• الهامش العلوي: 20 بكسل
• الحشوة العلوية والسفلية: 10 بكسل
• الحشوة اليسرى واليمنى: 25 بكسل

موقع

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

• الموقف: نسبي
• أصل الإزاحة: أعلى اليسار
• الإزاحة الأفقية: 25 بكسل

الرؤية

ثم قم بإخفاء الفائض.

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

تأثيرات التمرير

أخيرًا وليس آخرًا ، قم بتمكين تأثير التمرير للداخل والخارج.

• التلاشي للداخل والخارج: تمكين
• منفذ العرض السفلي
  • الموقف: 54٪
  • بدء التعتيم: 0٪
• متوسط ​​التعتيم
  • المركز الأدنى: 55٪
  • أعلى مركز: 80٪
  • الوسط: 100٪
• منفذ العرض الأعلى
  • المركز: 100٪
  • نهاية التعتيم: 0٪

تكرار الصف الثاني

استنساخ الصف بكل وحداته.

ضبط وحدة النص الأولى

نص

الآن قم بتغيير محتوى وحدات النص المستنسخة. ابدأ من الأعلى.

• الجسم: محتوى H2 / ما قبل الإنتاج

نص

قم بتغيير المحاذاة إلى اليمين.

• محاذاة النص: صحيح

توسيع محاذاة النص

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

• توسيع محاذاة النص: لجميع وحدات النص في هذا الصف

ضبط وحدة النص الثانية

نص

الآن قم بتحديث المحتوى في الوحدة النصية الثانية المستنسخة.

• الجسم: محتوى H2 / الإنتاج عند التجهيز

موقع

قم بتغيير الموقع في إعدادات الموضع أيضًا.

• الموقع: أعلى اليمين

ضبط الوحدة النمطية الثالثة للنص

نص

الآن قم بتغيير محتوى الوحدة النمطية الثالثة للنص المستنسخ.

• الجسم: محتوى H2 / التنسيق بين الفرق

موقع

قم بتغيير الموقع في إعدادات الموضع أيضًا.

• الموقع: أعلى اليمين

ضبط وحدة الصورة الجديدة

صورة

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

• الصورة: صورة جديدة 350 × 350 بكسل

انتقام

قم بتغيير محاذاة الصورة أيضًا.

• محاذاة الصورة: صحيح

ضبط وحدة دعوة جديدة للعمل

نص

افتح وحدة الدعوة إلى العمل التالية وقم بتغيير كل المحتوى.

• العنوان: فريق أليس للإنتاج
• Button: احجز فريق إنتاج Alice
• النص الأساسي: محتوى وصفي جديد.

وصلة

قم بتغيير الارتباط أيضًا.

• الارتباط: ارتباط جديد

نص

قم بتعديل المحاذاة أيضًا.

• محاذاة النص: يسار

نص العنوان

قم بتغيير محاذاة نص العنوان أيضًا.

• محاذاة نص العنوان: يسار

نص أساسي

بالإضافة إلى النص الأساسي.

• محاذاة النص الأساسي: يسار

تحجيم

لا تنس تغيير محاذاة الوحدة بأكملها في إعدادات التحجيم أيضًا.

• محاذاة الوحدة: يسار

موقع

أخيرًا ، أعد تعيين إعدادات الموضع إلى الوضع الافتراضي ، وقد انتهيت!

• الوظيفة: إعادة التعيين إلى الافتراضي

معاينة

دعنا نلقي نظرة أخيرة على تخطيط الصفحة على أحجام الشاشات المختلفة.

سطح المكتب

متحرك

هذا هو التفاف للتخطيط مع النص والصور التي تتغير في التمرير!

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

دعنا نعرف بماذا تفكر في التعليقات!