كيفية إنشاء صورة انتقالية منفصلة باستخدام تأثيرات التمرير لديفي

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

هيا بنا نبدأ.

نظرة خاطفة

هنا نظرة خاطفة على التصميم لهذا اليوم.

يمكنك أيضًا مشاهدة العرض التوضيحي المباشر الأصلي للتصميم على صفحة العرض التوضيحي تحت عنوان "التمرين لا يجب أن يكون مملًا".

قم بتنزيل Breakaway Image Transition Divi 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 أعلاه ، ستحتاج إلى:

• صورتان (1080 بكسل × 540 بكسل على الأقل)
• برنامج لتحرير الصور مثل Photoshop لتقطيع الصور قبل إضافتها إلى Divi.

الجزء 1: تشريح الصور في برنامج فوتوشوب

قبل أن نبدأ في إنشاء تصميمنا في Divi ، نحتاج إلى تقسيم الصورتين اللتين سيتم استخدامهما لتأثير تمرير الانتقال المنفصل. يجب اقتصاص كلتا الصورتين بحيث تكون بدقة 1080 بكسل × 540 بكسل. بعد ذلك ، يجب تقطيعهم إلى 8 أجزاء متساوية (4 عبر ، 2 أسفل). بمجرد أن نكون جاهزين ، يمكننا حفظها على جهاز الكمبيوتر الخاص بنا وتحميل شرائح الصور على موقعنا. لنبدأ بالصورة الأولى.

الصورة رقم 1

قص الصورة

أول شيء يتعين علينا القيام به هو اقتصاص الصورة بحيث تكون أبعادها بالضبط 1080 بكسل × 540 بكسل. يمكنك استخدام أي برنامج لتحرير الصور للقيام بذلك. في Photoshop ، يمكنك استخدام أداة الاقتصاص.

تشريح الصورة

بعد ذلك ، انقر لاستخدام أداة الشريحة وحدد الصورة بأكملها. انقر بزر الماوس الأيمن فوق الشريحة / الصورة وحدد خيار Divide Slice.

في مربع الخيار Divide Slice ، قم بتحديث ما يلي:

قسّم أفقيًا إلى:

• شريحتان للأسفل ، متباعدتان بشكل متساوٍ
• 270 بكسل لكل شريحة

قسّم رأسياً إلى:

• 4 شرائح متباعدة بشكل متساوٍ
• 270 بكسل لكل شريحة

ثم انقر فوق "موافق".

حفظ شرائح الصورة

الآن لدينا صورة مقسمة إلى 8 كتل متساوية ، كل منها 270 بكسل × 270 بكسل.

لحفظ شرائح الصور ، انتقل إلى File> Export> Save for Web.

ثم اختر تنسيق الملف وانقر فوق حفظ.

في المربع المنبثق ، تأكد من تحديث ما يلي:

• حفظ باسم: [أدخل اسمًا للصورة (الصور)]
• التنسيق: الصور فقط
• الإعدادات: الإعدادات الافتراضية
• الشرائح: جميع الشرائح

ثم انقر فوق حفظ.

الآن سيتم حفظ جميع شرائح الصور الخاصة بك على الكمبيوتر ، لتكون جاهزة للتحميل على Divi.

الصورة رقم 2

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

تدوير شرائح الصورة

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

لتدوير صورة ، يمكنك استخدام Photoshop أو برنامج تحرير الصور المدمج من نظام التشغيل الخاص بك (يمكنك حتى استخدام معرض وسائط WordPress لتحرير الصور وتدويرها بعد تحميلها على موقعك.).

فيما يلي دليل لكيفية تدوير الصور في موضعها الأصلي عند تقطيع الصورة.

هذه هي الصورة الأصلية.

إليك كيفية تدوير شرائح الصور قبل تحميلها على موقعك.

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

الآن بعد أن تم اقتصاص كلتا الصورتين وتقطيعهما وحفظهما وتدويرهما ، فأنت جاهز لإضافتهما إلى موقع Divi الخاص بك. يجب أن يكون لديك إجمالي 16 صورة (8 من الصورة الأولى و 8 من الصورة 2).

الجزء 2: إنشاء تأثير التمرير لانتقال الصورة المنفصلة في Divi

بمجرد أن تصبح شرائح الصورة جاهزة ، يمكننا بدء عملية التصميم في Divi. هيريس كيفية القيام بذلك.

أضف الصف رقم 1

للبدء ، قم بإنشاء صف من أربعة أعمدة.

إعدادات الصف

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

• عرض الحضيض: 1
• العرض الأقصى: 1080 بكسل (سطح المكتب) ، 540 بكسل (الجهاز اللوحي والهاتف)
• المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل
• الفائض الأفقي: مرئي
• الفائض العمودي: مرئي

تحديث قسم الحشو

نظرًا لأننا سنضع صفنا الثاني تمامًا أعلى الصف الأول ، فنحن بحاجة إلى إزالة الحشوة العلوية (والسفلية) للقسم حتى لا تتخلص من موضع الصف الثاني. افتح إعدادات القسم وقم بتحديث ما يلي:

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

مضيفا الصور

في الصف الأول ، سنضيف كل صورة من الصور / الشرائح الثمانية التي تشكل الصورة الأولى. يجب وضع الصور داخل الأعمدة بالضبط بالطريقة التي تم بها تقطيعها في Photoshop (4 عبر و 2 أسفل).

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

الصورة رقم 1

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

ثم قم بتحميل شريحة الصورة الأولى إلى الوحدة النمطية.

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

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

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

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

• تمكين التحجيم لأعلى ولأسفل: نعم
• مقياس البدء: 100٪ (عند 20٪ منفذ عرض)
• النطاق المتوسط: 70٪ (عند 32٪ - 48٪ منفذ عرض)
• مقياس النهاية: 100٪ (عند 60٪ منفذ عرض)

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

• تمكين التدوير: نعم
• بدء الدوران: 0 درجة (عند 0٪ منفذ عرض)
• دوران متوسط: 0 درجة (عند 20٪ منفذ عرض)
• إنهاء الدوران: -90 درجة (عند 60٪ منفذ عرض)

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

الصورة رقم 2

لإنشاء الصورة رقم 2 ، قم بتكرار الصورة رقم 1 وضع النسخة المكررة في العمود 2.

قم بتحديث وحدة الصورة المكررة بالصورة رقم 2.

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

سنحتفظ بمعظم تأثيرات التمرير نفسها المنقولة من الصورة رقم 1. الشيء الوحيد الذي نحتاج إلى تغييره هو الدوران. انتقل إلى علامة التبويب "خيارات متقدمة" وقم بتغيير دوران النهاية إلى 90 درجة (بدلاً من -90 درجة) بحيث تدور في الاتجاه المعاكس.

• دوران النهاية: 90 درجة

الصورة رقم 3

لإنشاء الصورة رقم 3 ، انسخ والصق الصورة رقم 1 في العمود 3 ثم قم بتغيير الصورة إلى الصورة رقم 3.

الصورة رقم 4

لإنشاء الصورة رقم 4 ، انسخ والصق الصورة رقم 2 في العمود 4 وقم بتحديث الصورة إلى الصورة رقم 4.

الصورة رقم 5

لإنشاء صورة رقم 5 ، قم بتكرار الصورة رقم 1 بحيث يكون التكرار أسفلها مباشرةً في العمود 1.

قم بتحديث الصورة إلى الصورة رقم 5. ثم قم بتحديث تأثير التمرير Fading In and Out كما يلي:

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

ثم قم بتحديث تأثير التمرير Scaling Up and Down Scaling Up كما يلي:

• مقياس البدء: 100٪ (عند 0٪ منفذ عرض)
• النطاق المتوسط: 70٪ (عند 12٪ - 28٪ منفذ عرض)
• مقياس النهاية: 100٪ (عند 40٪ منفذ عرض)

وأخيرًا ، قم بتحديث تأثير التمرير الدوار كما يلي:

• بدء الدوران: 0 درجة (عند 0٪ منفذ عرض)
• دوران متوسط: 0 درجة (عند 0٪ منفذ عرض)
• إنهاء التدوير: 90 درجة (عند 40٪ منفذ عرض)

الصورة رقم 6

لإنشاء الصورة رقم 6 ، قم بتكرار الصورة رقم 5 وانقلها إلى العمود 2 (تحت الصورة رقم 2).

قم بتحديث وحدة الصورة بالصورة رقم 5. ثم اضبط تأثير التمرير الدوار على الاتجاه المعاكس (-90 درجة) على النحو التالي:

• نهاية الدوران: -90 درجة

الصورة رقم 7

لإنشاء الصورة رقم 7 ، قم بتكرار الصورة رقم 5 وانقلها أسفل الصورة رقم 3 في العمود 3. ثم قم بتحديث وحدة الصورة المكررة بالصورة رقم 7.

الصورة رقم 8

لإنشاء الصورة رقم 8 ، قم بتكرار الصورة رقم 6 وانقلها أسفل الصورة رقم 4 في العمود 4. ثم قم بتحديث وحدة الصورة المكررة بالصورة رقم 8.

الآن تمت إضافة جميع شرائح الصور إلى الصف رقم 1 باستخدام تأثير التمرير المنفصل.

هذا ما تبدو عليه النتيجة حتى الآن.

أضف الصف رقم 2

لن يستغرق تصميم الصف الثاني من الصور الكثير من الوقت. كل ما نحتاج إلى فعله هو تكرار الصف رقم 1 ، وتحديث جميع الصور بالصور الصحيحة ، ومن ثم إعطائها موضعًا مطلقًا.

انطلق وكرر الصف رقم 1.

تحديث صور الصف رقم 2

تذكر الصور التي تم تدويرها التي أنشأناها للصورة رقم 2. الآن ، كل ما يتعين علينا القيام به هو تحميل كل منهم إلى موقع وحدة الصورة الصحيح داخل الصف رقم 2.

تحديث تأثيرات تمرير الصورة

بمجرد أن تصبح الصور التي تم تدويرها في مكانها الصحيح ، نحتاج إلى إزالة تأثير التمرير Fading In and Out من جميع الصور الموجودة في الصف رقم 2.

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

• تمكين التلاشي للداخل والخارج: لا

صف المركز رقم 2

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

• الموقف: مطلق
• الموقع: توب سنتر

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

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

دعنا نتحقق من النتيجة النهائية.

وها هو على الهاتف المحمول.

افكار اخيرة

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

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

هتافات!