كيفية تطبيق الرسوم المتحركة المتضاربة على عناصر التصميم مع Divi

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

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

معاينة

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

مثال رقم 1: نص متضارب

المثال الثاني: اصطدام المقسمات

مثال رقم 3: تصادم الشبكة

يحوم

اشترك في قناتنا على اليوتيوب

إعادة إنشاء المثال رقم 1: نص متضارب

إضافة قسم التخصص

بنية

لنبدأ بالمثال الأول! افتح صفحة جديدة أو موجودة وأضف قسم تخصص جديد باستخدام الهيكل التالي:

تحجيم

بدون إضافة أي وحدات أو صف ، افتح إعدادات القسم وقم بتمكين خيار "Make This Section Fullwidth" في إعدادات التحجيم.

أضف الصف رقم 1

هيكل العمود

تابع بإضافة صف إلى قسم التخصص:

تحجيم

افتح إعدادات الصف وقم بإجراء بعض التغييرات على إعدادات التحجيم.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

تباعد

قم بتغيير قيم المساحة المتروكة المخصصة في إعدادات التباعد أيضًا.

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

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

إضافة محتوى

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

إعدادات نص العنوان

قم بتغيير إعدادات نص العنوان بعد ذلك.

• خط العنوان: مونتسيرات
• وزن خط العنوان: خفيف
• حجم نص العنوان: 4.4vw (سطح المكتب) ، 8.2vw (الجهاز اللوحي) ، 40 بكسل (الهاتف)
• ارتفاع خط العنوان: 0.7em

أضف وحدة Divider Module إلى العمود 1

الرؤية

الوحدة الثانية المطلوبة في العمود 1 هي وحدة Divider Module. تأكد من ظهور الحاجز عن طريق تمكين خيار "إظهار الحاجز".

• إظهار الحاجز: نعم

اللون

انتقل إلى علامة تبويب التصميم وقم بتغيير لون الفاصل.

• اللون: # 000000

تحجيم

قلل عرض الحاجز أيضًا.

• العرض: 91٪

تباعد

وأضف بعض الهامش العلوي لإنشاء مساحة بين وحدة Divider Module ووحدة النص.

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

حيوية

أخيرًا ، أضف رسمًا متحركًا دقيقًا إلى Divider Module.

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: يسار

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

إضافة محتوى

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

إعدادات نص العنوان

قم بتغيير إعدادات نص العنوان بعد ذلك.

• خط العنوان: مونتسيرات
• وزن خط العنوان: خفيف
• لون نص العنوان: # 3f46ff
• حجم نص العنوان: 3.8vw (سطح المكتب) ، 6.5vw (الجهاز اللوحي) ، 40 بكسل (الهاتف)
• ارتفاع خط العنوان: 0.8em

حيوية

وأضف رسمًا متحركًا إلى هذه الوحدة أيضًا.

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

أضف الصف رقم 2

هيكل العمود

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

أضف الوحدات المتبقية

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

أعد إنشاء المثال رقم 2: اصطدام المقسمات

إضافة قسم التخصص

بنية

إلى المثال التالي! أضف قسم تخصص جديد باستخدام الهيكل التالي:

تحجيم

بدون إضافة أي صفوف أو وحدات ، افتح إعدادات القسم وقم بتمكين خيار "Make This Section Fullwidth".

• اجعل هذا القسم كامل العرض: نعم

أضف الصف رقم 1

هيكل العمود

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

تباعد

افتح إعدادات الصف وقم بتعديل إعدادات المساحة المتروكة المخصصة.

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

أضف وحدة نصية

إضافة محتوى

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

إعدادات نص العنوان

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

• خط العنوان: مونتسيرات
• وزن خط العنوان: خفيف
• حجم نص العنوان: 70 بكسل (سطح المكتب) ، 50 بكسل (جهاز لوحي) ، 40 بكسل (هاتف)
• ارتفاع خط العنوان: 0.8em

أضف الصف رقم 2

هيكل العمود

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

تحجيم

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

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• العرض: 53٪ (سطح المكتب) ، 100٪ (الجهاز اللوحي والهاتف)

تباعد

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

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

أضف وحدة Divider Module إلى العمود 1

الرؤية

بمجرد الانتهاء من تعديل إعدادات الصف ، امض قدمًا وأضف وحدة Divider إلى العمود الأول وتأكد من ظهور الحاجز عن طريق تمكين خيار "Show Divider".

• إظهار الحاجز: نعم

اللون

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

• لون الفاصل: # 3f46ff

الأنماط

وتغيير نمط الفاصل في إعدادات الأنماط.

• نمط المقسم: مزدوج

تحجيم

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

• وزن الحاجز: 8 بكسل

حيوية

أخيرًا ، أضف رسمًا متحركًا إلى Divider Module.

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: صحيح

وحدة استنساخ مقسم ووضعها في العمود 2

بمجرد الانتهاء من تعديل إعدادات Divider Module ، انطلق واستنسخ الوحدة. ضع النسخة المكررة في العمود الثاني من الصف.

تغيير الرسوم المتحركة

لإنشاء تأثير تصادم ، قم بتغيير اتجاه الحركة لوحدة Divider Module المكررة.

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: يسار

أضف الصف رقم 3

هيكل العمود

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

أضف الوحدات المتبقية

وأضف العديد من الوحدات التي تريدها لإنهاء تصميم القسم.

إعادة إنشاء المثال رقم 3: تصادم الشبكة

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

تباعد

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

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

أضف الصف رقم 1

هيكل العمود

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

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

تحميل تراكب صورة على شكل

احفظ تراكب الصور التالي على سطح المكتب بالنقر بزر الماوس الأيمن:

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

خلفية متدرجة

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

• اللون 1: # aa2bff
• اللون 2: # 09f7eb

انتقام

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

• محاذاة الصورة: المركز

تحجيم

وقم بتمكين خيار "Force Fullwidth" في إعدادات التحجيم.

• فرض عرض كامل: نعم

تباعد

أضف بعض الهامش المخصص إلى الوحدة أيضًا.

• الهامش الأيسر: 200 بكسل
• الهامش الأيمن: 200 بكسل

حيوية

أخيرًا ، أضف رسمًا متحركًا إلى الوحدة.

• نمط الرسوم المتحركة: تكبير
• اتجاه الرسوم المتحركة: المركز
• مدة الرسوم المتحركة: 3000 مللي ثانية
• كثافة الرسوم المتحركة: 100٪

أضف الصف رقم 2

هيكل العمود

في الصف الثاني. استخدم هيكل العمود التالي:

تحجيم

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

• استخدام العرض المخصص: نعم
• الوحدة: PX
• العرض المخصص: 944 بكسل
• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1

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

إضافة محتوى

تابع عن طريق إضافة Blurb Module إلى العمود الأول. أدخل بعض المحتوى المفضل.

أيقونة

حدد رمزًا بعد ذلك.

لون الخلفية

وأضف لون الخلفية للوحدة أيضًا.

• لون الخلفية: rgba (255،255،255،0.83)

إعدادات الرمز

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

• لون الأيقونة: # 000000
• وضع الرمز: الأعلى
• استخدام حجم خط الأيقونة: نعم
• حجم خط الأيقونة: 73 بكسل

إعدادات نص العنوان

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

• خط العنوان: Open Sans
• وزن خط العنوان: شبه عريض
• محاذاة نص العنوان: الوسط
• حجم نص العنوان: 15 بكسل
• تباعد حرف العنوان: -1 بكسل
• ارتفاع خط العنوان: 1.8em

تحجيم

وخفض عرض المحتوى في إعدادات التحجيم.

• عرض المحتوى: 183 بكسل

تباعد

سنضيف بعض الحشو العلوي والسفلي المخصص أيضًا.

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

مربع الظل

استمر بإعطاء Blurb Module ظل مربع دقيق.

• مربع قوة طمس الظل: 80 بكسل
• لون الظل: rgba (0،0،0،0.3)

الانتقالات

وزيادة مدة الانتقال في علامة التبويب خيارات متقدمة.

• مدة الانتقال: 600 مللي ثانية

Clone Blurb Module 8 Times & Place 3 مكررات في كل عمود متبقي

الآن ، بمجرد الانتهاء من تعديل أول وحدة Blurb Module ، يمكنك المضي قدمًا واستنساخها 8 مرات. ضع ثلاث نسخ مكررة في العمود الثاني وثلاثة في العمود الثالث. في الجزء التالي من هذا البرنامج التعليمي ، سنقوم بإجراء تغييرات فريدة على كل وحدة من وحدات Blurb Modules. للقيام بذلك ، سوف نتبع الترقيم أدناه:

تعديل الوحدة النمطية Blurb # 1

تباعد

افتح أول وحدة Blurb Module وأضف بعض الهامش العلوي السلبي.

• الهامش العلوي: -340 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)

تحوم التباعد

قم بتغيير قيم الهامش عند التمرير.

• الهامش الأعلى: -380 بكسل
• الهامش السفلي: 40 بكسل
• الهامش الأيسر: -40 بكسل
• الهامش الأيمن: 40 بكسل

زوايا مدورة

تابع بإضافة "30 بكسل" إلى الزاوية اليسرى العلوية للوحدة.

حيوية

وإضافة الرسوم المتحركة.

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

تعديل Blurb Module # 2

لون الخلفية

افتح وحدة Blurb Module الثانية وقم بتغيير لون الخلفية.

• لون الخلفية: rgba (255،255،255،0.93)

تباعد

تابع بإضافة بعض الهامش العلوي السلبي إلى الوحدة النمطية.

• الهامش العلوي: -340 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)

تحوم التباعد

قم بتغيير قيم الهامش هذه عند المرور فوقها.

• الهامش الأعلى: -380 بكسل
• الهامش السفلي: 40 بكسل

حيوية

وإضافة رسم متحرك للوحدة.

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

تعديل الوحدة النمطية Blurb # 3

تباعد

إلى الوحدة النمطية Blurb الثالثة. أضف بعض الهامش العلوي السلبي.

• الهامش العلوي: -340 بكسل (سطح المكتب) ، 0 بكسل (الجهاز اللوحي والهاتف)

تحوم التباعد

قم بتعديل قيم الهامش عند التمرير.

• الهامش الأعلى: -380 بكسل
• الهامش السفلي: 40 بكسل
• الهامش الأيسر: 40 بكسل
• الهامش الأيمن: -40 بكسل

زوايا مدورة

أضف "30 بكسل" إلى الزاوية اليمنى العلوية من الوحدة أيضًا.

حيوية

وإضافة الرسوم المتحركة.

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

تعديل الوحدة النمطية Blurb # 4

لون الخلفية

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

• لون الخلفية: rgba (255،255،255،0.93)

تحوم التباعد

أضف بعض قيم هامش التمرير بعد ذلك.

• الهامش الأيسر: -40 بكسل
• الهامش الأيمن: 40 بكسل

حيوية

وإضافة الرسوم المتحركة كذلك.

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 800 مللي ثانية

تعديل الوحدة النمطية Blurb # 5

حيوية

إلى الوحدة الخامسة. الشيء الوحيد الذي عليك القيام به هنا هو إضافة الرسوم المتحركة.

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 1000 مللي ثانية

تعديل Blurb Module # 6

لون الخلفية

استمر بفتح الوحدة السادسة وتغيير لون الخلفية.

• لون الخلفية: rgba (255،255،255،0.93)

تحوم التباعد

قم بتغيير قيم التباعد عند التمرير أيضًا.

• الهامش الأيسر: 40 بكسل
• الهامش الأيمن: -40 بكسل

حيوية

وإضافة الرسوم المتحركة.

• نمط الرسوم المتحركة: تتلاشى
• تأخير الرسوم المتحركة: 1200 مللي ثانية

تعديل Blurb Module # 7

تحوم التباعد

إلى الوحدة السابعة. أضف بعض قيم هامش التمرير إلى إعدادات التباعد.

• الهامش العلوي: 40 بكسل
• الهامش الأيسر: -40 بكسل
• الهامش الأيمن: 40 بكسل

زوايا مدورة

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

حيوية

وإضافة الرسوم المتحركة.

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

تعديل الوحدة النمطية Blurb # 8

لون الخلفية

استمر بفتح الوحدة الثامنة وتغيير لون الخلفية.

• لون الخلفية: rgba (255،255،255،0.93)

تحوم التباعد

أضف بعض الهامش المخصص عند التمرير إلى الوحدة النمطية التالية.

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

حيوية

أضف رسمًا متحركًا إلى وحدة Blurb هذه أيضًا.

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

تعديل الوحدة النمطية Blurb # 9

تحوم التباعد

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

• الهامش العلوي: 40 بكسل
• الهامش الأيسر: 40 بكسل
• الهامش الأيمن: -40 بكسل

زوايا مدورة

أضف "30 بكسل" من نصف قطر الحد إلى الركن الأيمن السفلي أيضًا.

حيوية

وإضافة الرسوم المتحركة.

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

أضف هامشًا سفليًا سلبيًا إلى وحدة الصورة في الصف رقم 1

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

• الهامش السفلي: -520 بكسل

معاينة

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

المثال رقم 1: تصادم المقسمات

المثال الثاني: اصطدام النص

مثال رقم 3: تصادم الشبكة

يحوم

افكار اخيرة

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