كيفية الجمع بين الرسوم المتحركة والمنظر في Divi لتصميمات فريدة

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

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

هيا بنا نبدأ!

نظرة خاطفة

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

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

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

تنزيل مجاني

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

تحميل

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

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

دعنا نصل إلى البرنامج التعليمي ، فهل نحن؟

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

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

1. موضوع Divi مثبت ونشط
2. تم إنشاء صفحة جديدة للبناء من الصفر على الواجهة الأمامية (منشئ بصري)
3. الصور لاستخدامها لمحتوى وهمي. يمكنك العثور على الصور المستخدمة لهذا البرنامج التعليمي في Life Coach Divi Layout Pack.

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

الفكرة الأساسية

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

الجزء 1: إنشاء الرسوم المتحركة Divi وتصميم Parallax (الإصدار 1)

قم بإنشاء قسم جديد بصف من عمودين (1/2 1/2).

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

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

أولاً ، افتح إعدادات القسم وأخرج الحشو الافتراضي كما يلي:

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

ثم افتح إعدادات الصف وقم بإعطاء الصف صورة خلفية المنظر.

صورة الخلفية: [تحميل الصورة]
استخدام تأثير المنظر: نعم
طريقة المنظر: CSS

هنا يجب ضبط طريقة المنظر على CSS حتى يعمل التصميم.

العرض: 100٪
العرض الأقصى: 100٪
الحشو: 10vw أعلى ، 10vw يسار ، 10vw يمين

أضف وحدة النص مع مطابقة الخلفية المنظر

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

انطلق وقم بإضافة وحدة نصية جديدة إلى العمود 1.

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

محتوى الجسم:

<p>Hi!<br>I'm Jane...</p>

<a href="#">about me</a>

ثم امنح وحدة النص نفس صورة الخلفية css parallax التي أضفتها إلى الصف.

صورة الخلفية: [تحميل الصورة]
استخدام تأثير المنظر: نعم
طريقة المنظر: CSS

خط النص: فيرا سانس
وزن خط النص: خفيف
لون نص النص: #ffffff
حجم نص النص: 70 بكسل
ارتفاع خط النص: 1em

نمط خط الارتباط: تسطير (U)
لون نص الرابط: #ffffff (افتراضي) ، # 881e67 (تحوم)
حجم نص الرابط: 30 بكسل
تباعد حروف الارتباط: 2 بكسل

الحشو: 20٪ أعلى ، 20٪ أسفل ، 10٪ يسار ، 10٪ يمين

عرض الحدود: 20 بكسل
لون الحدود: #ffffff

ثم قم بإضافة الرسوم المتحركة التالية إلى وحدة النص:

نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: صحيح
مدة الرسوم المتحركة: 1500 مللي ثانية
كثافة الرسوم المتحركة: 80٪
بدء التعتيم في الرسوم المتحركة: 20٪

دعنا نتحقق من التأثير حتى الآن ...

لاحظ كيف تستقر صورة الخلفية لوحدة النص المتحرك على الموقع المطابق لخلفية الصف. هذا لأن كلاهما يشتركان في نفس صورة الخلفية مع تأثير css parallax.

إضافة وحدة النص الثانية مع صورة خلفية حقيقية للمنظر

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

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

ثم قم بتحديث محتوى النص بكلمة "مدونتي".

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

صورة الخلفية: [تحميل الصورة]
استخدام تأثير المنظر: نعم
طريقة المنظر: المنظر الحقيقي

خط النص: فيرا مونو
نمط خط النص: TT
محاذاة نص النص: مركز
لون نص النص: #ffffff
تباعد حروف النص: 10 بكسل
العرض: 320 بكسل
العرض الأقصى: 320 بكسل
محاذاة الوحدة: المركز

الهامش: (سطح المكتب): -5vw أعلى ، 4vw أسفل
الهامش (الجهاز اللوحي والهاتف): 3vw أعلى
الحشو: 70 بكسل للأعلى ، 70 بكسل للأسفل

عرض الحدود: 20 بكسل
لون الحدود: #ffffff

نمط الرسوم المتحركة: شريحة
اتجاه الحركة: لأسفل
تأخير الرسوم المتحركة: 200 مللي ثانية

إنشاء وحدة النص الثالثة مع صورة خلفية جديدة للمنظر

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

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

العرض: 240 بكسل
العرض الأقصى: 240 بكسل
وحدة المحاذاة: اليسار
الهامش: 0 بكسل للأسفل
المساحة المتروكة: 170 بكسل للأعلى ، 170 بكسل للأسفل ، 95 بكسل لليسار ، 95 بكسل لليمين

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

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

اتجاه الرسوم المتحركة: UP

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

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

الجزء 2: إنشاء الرسوم المتحركة وتصميم Parallax (الإصدار 2)

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

هيريس كيفية القيام بذلك.

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

بعد ذلك ، قم بتحديث إعدادات الصف العلوي على النحو التالي:

الارتفاع: 900 بكسل (سطح المكتب) ، 2000 بكسل (الجهاز اللوحي والهاتف)
المساحة المتروكة: 0 بكسل للأعلى و 0 بكسل للأسفل

نمط الرسوم المتحركة: شريحة
اتجاه الرسوم المتحركة: صحيح
مدة الرسوم المتحركة: 1250 مللي ثانية
تأخير الرسوم المتحركة: 1800 مللي ثانية

نحن نعطي الصف ارتفاعًا محددًا لأن الصف الفارغ لن يكون له أي ارتفاع افتراضيًا. لذلك عليك التأكد من أن ارتفاع الصف كافٍ لتغطية محتوى صفك الثاني بالمحتوى. قدمنا ​​أيضًا للصف رسمًا متحركًا مع تأخير بحيث ينزلق خلف المحتوى بعد ظهور الوحدات النصية.

تداخل الصفين

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

افتح إعدادات الصف السفلي وقم بتحديث الهامش على النحو التالي:

الهامش: -900 بكسل أعلى (سطح المكتب) ، -2000 بكسل (الجهاز اللوحي والهاتف)

ثم أخرج صورة الخلفية باستخدام طريقة css parallax للصف حيث سنستخدم صورة خلفية الصف العلوي بدلاً من ذلك.

ها هو التصميم حتى الآن. لاحظ الرسوم المتحركة الخلفية المؤجلة في الصف الأول وكيف تتطابق خلفية المنظر لوحدة النص في العمود 1 تمامًا.

إضافة لون خلفية القسم

لإعطاء الوحدات النمطية للنص لون خلفية مبدئيًا قبل الرسوم المتحركة للصفوف ، يمكنك إعطاء لون خلفية للقسم.

افتح إعدادات القسم وأضف ما يلي:

تدرج الخلفية اللون الأيسر: rgba (136،30،103،0.61)
تدرج الخلفية اللون الأيمن: # 881e67
نوع التدرج: شعاعي

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

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

وضع المزج الاختياري ومجموعة الرسوم المتحركة

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

وضع المزج: اللمعان
نمط الرسوم المتحركة: تكبير

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

وإليك كيف يبدو على الهاتف المحمول.

افكار اخيرة

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

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

هتافات!