كيفية إنشاء تأثير تمرير طبقات موسع لإشراك الرسوم التوضيحية للتطبيق في Divi

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

دعنا نقفز مباشرة ونبدأ.

نظرة خاطفة

قم بتنزيل Layout مجانًا

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

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

تنزيل مجاني

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

تحميل

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

لاستيراد التخطيط إلى صفحتك ، ما عليك سوى استخراج ملف مضغوط واسحب ملف JSON إلى Divi Builder.

دعنا نصل إلى البرنامج التعليمي ، أليس كذلك؟

ما تحتاجه للبدء

للبدء ، سوف تحتاج إلى القيام بما يلي:

1. إذا لم تكن قد قمت بذلك بعد ، فقم بتثبيت وتفعيل Divi Theme.
2. قم بإنشاء صفحة جديدة في WordPress واستخدم Divi Builder لتحرير الصفحة على الواجهة الأمامية (منشئ مرئي).
3. اختر الخيار "البناء من الصفر".

بعد ذلك ، سيكون لديك لوحة فارغة لبدء التصميم في Divi.

إنشاء تأثير التمرير الموسع للطبقات لتوضيح تطبيق جذاب في Divi

اضف سطر

لنبدأ بإضافة صف 2 (نصف نصف نصف).

إضافة هامش مؤقت للقسم

لتتمكن من معاينة تأثيرات التمرير لاحقًا ، أضف بعض الهامش العلوي والسفلي إلى القسم على النحو التالي:

• الهامش: 80vh أعلى ، 80vh أسفل

أضف 3 صور على هيئة طبقات

سنقوم بإنشاء ثلاث صور ستكون بمثابة ثلاث طبقات من الرسم التوضيحي للتطبيق. تكمن الفكرة في استخدام ثلاث صور (أو لقطات شاشة) لميزات التطبيق بنفس الحجم / الأبعاد بحيث تتلاءم الصور تمامًا مع بعضها البعض. ثم سنقوم بنقل الطبقات الثلاث باستخدام تأثيرات Divi التمرير.

لنبدأ بالصورة الأولى.

إنشاء الصورة 1

أضف وحدة صورة إلى العمود الأيسر.

ثم قم بتحميل الصورة الأولى إلى الوحدة. تذكر أن تتأكد من أن جميع الصور الثلاث سيكون لها نفس الأبعاد. هذا هو 500 × 1050 بكسل.

إعدادات الصورة 1

افتح إعدادات وحدة الصورة وقم بتحديث ما يلي:

العرض والهامش

• العرض: 300 بكسل (سطح مكتب وجهاز لوحي) ، 150 بكسل (هاتف)
• وحدة المحاذاة: اليسار
• الهامش: 0 بكسل للأسفل

الحدود

• الزوايا الدائرية: 40 بكسل
• عرض الحدود: 15 بكسل
• لون الحدود: #ffffff

مربع الظل

• Box Shadow: انظر لقطة الشاشة
• مربع الظل الوضع الرأسي: 0 بكسل
• مربع قوة طمس الظل: 48 بكسل
• لون الظل: rgba (0،0،0،0.2)

إنشاء صورة 2

لإنشاء صورة 2 ، قم بتكرار الصورة 1.

ثم قم بتحديث وحدة الصورة المكررة بصورة جديدة بنفس الأبعاد (500 × 1050 بكسل).

إعدادات الصورة 2

ثم أخرج الحدود عن طريق تحديث ما يلي:

الحدود

• عرض الحدود: 0 بكسل

لا نحتاج إلى حد لهذه الصورة ، لكننا نحتاج إلى استبدال تباعد الحدود بالحشو للتأكد من تكدس الصور بسلاسة.

حشوة

• المساحة المتروكة: 15 بكسل للأعلى ، 15 بكسل للأسفل ، 15 بكسل لليسار ، 15 بكسل لليمين

موقع

ثم قم بتحديث موضع الصورة 2 إلى مطلق. سيؤدي هذا إلى جعل الصورة تتداخل مع الصورة 1 بشكل مثالي.

• الموقف: مطلق

لمزيد من المعلومات ، تحقق من منشورنا الكامل حول كيفية استخدام الموضع المطلق في Divi.

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

حان الوقت الآن لإضافة تأثير التمرير الذي يحرك طبقتنا (الصورة 2) عند التمرير لأسفل الصفحة.

قم بتحديث تأثيرات التمرير كما يلي:

ضمن علامة التبويب " الحركة العمودية" ...

• تمكين الحركة العمودية: نعم
• بداية الإزاحة: 0 (عند 0٪ منفذ عرض)
• تعويض متوسط: 0 (عند 0٪ منفذ عرض)
• إزاحة النهاية: -1 (عند منفذ عرض بنسبة 100٪)

ضمن علامة التبويب " الحركة الأفقية" ...

• تمكين الحركة الأفقية: نعم
• بداية الإزاحة: 0 (عند 0٪ منفذ عرض)
• تعويض متوسط: 1 (عند منفذ عرض بنسبة 50٪)
• إزاحة النهاية: -1.5 (عند منفذ عرض 100٪)

ضمن علامة التبويب "الدخول والخروج" ...

• تمكين التلاشي للداخل والخارج: نعم
• بدء التعتيم: 0٪ (عند 0٪ منفذ عرض)
• تعتيم متوسط: 100٪ (عند 10٪ -15٪ منفذ عرض)
• إنهاء التعتيم: 70٪ (عند 30٪ منفذ عرض)

إنشاء صورة 3

بمجرد إضافة جميع تأثيرات التمرير إلى الصورة 2 ، نكون مستعدين لإنشاء الصورة 3.

افتح قائمة الإعدادات في الجزء السفلي من المنشئ وحدد زر الطبقات لنشر الطبقات المنبثقة. ثم قم بتكرار وحدة الصورة 2 داخل العمود 1 لإنشاء صورة 3. يعد استخدام ميزة الطبقات لهذا الأمر مفيدًا نظرًا لأنه من الصعب تحديد وحدات متداخلة.

افتح الآن إعدادات الصورة المكررة (الصورة 3) وقم بتحميل صورة جديدة. تأكد من الاحتفاظ بنفس الأبعاد (500 × 1050 بكسل).

صورة 3 آثار التمرير

ضمن علامة التبويب خيارات متقدمة ، قم بتحديث خيارات تأثيرات التمرير للصورة 3.

ضمن علامة التبويب Vertical Motion ، قم بتحديث إزاحة الحركة العمودية على النحو التالي:

• إزاحة النهاية: -2 (عند منفذ عرض بنسبة 100٪)

ضمن علامة التبويب Horizontal Motion ، قم بتحديث Horizontal Motion على النحو التالي:

• تعويض متوسط: 2 (عند منفذ عرض بنسبة 50٪)
• إزاحة النهاية: 3 (عند 100٪ منفذ عرض)

ضمن علامة التبويب Fading In and Out (التلاشي والخروج) ، قم بتحديث إعدادات Fading In and Out كما يلي:

• بدء التعتيم: 5٪ (عند 0٪ منفذ عرض)
• تعتيم متوسط: 100٪ (عند 30٪ -40٪ منفذ عرض)
• إنهاء التعتيم: 100٪ (عند 50٪ منفذ عرض)

نتيجة

تحقق من النتيجة حتى الآن.

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

هذا تأثير رائع المظهر كما هو ، لكننا سنحرف العمود لإنشاء المزيد من التأثير ثلاثي الأبعاد.

افتح إعدادات العمود 1 وأضف انحراف التحويل كما يلي:

انحراف التحويل (المحور X و Y): 8deg

سيؤدي هذا إلى إنشاء تأثير ثلاثي الأبعاد لطيف على الطبقات المتوسعة.

هذا كل شيء!

اختياري: أضف عبارة CTA إلى العمود 2

الآن يمكننا إضافة أي عنوان وزر (أو أي CTA) إلى العمود الأيمن مع بعض تأثيرات التمرير المجانية. تحقق من التنزيل المجاني لهذا التخطيط أعلاه للحصول على نفس CTA في هذا الرسم التوضيحي.

النتيجة النهائية

هنا هو النتيجة النهائية.

وإليك كيفية تكديسها على الجهاز اللوحي والهاتف.

استخدام الصور من حزمة Divi Layout

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

لتغيير التصميم ليناسب احتياجاتك الخاصة ، يمكنك استخدام الصور من حزم التخطيط المجانية الخاصة بنا أو إنشاء لقطات الشاشة الخاصة بك. فيما يلي مثال على التصميم باستخدام الصور من Mobile App Layout Pack. لقد أضفت أيضًا خلفية متدرجة لتكمل الصور الخفيفة المستخدمة للطبقات المتوسعة.

في غضون دقائق قليلة ، لدينا تصميم مختلف تمامًا!

افكار اخيرة

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

أتطلع إلى الاستماع منك في التعليقات.

هتافات!